webstorm vue return ()报错_用eslint来规范vue项目的js代码

前段时间接手了一个比较大的功能模块，要命的是我之前基本没接触过这个项目的相关内容，所以开发前期的主旋律变成了读代码。一个月后的我，每每想起那些放荡不羁的代码风格，仍然会被秀到头皮发麻。至此我深刻意识到，一个多人合作项目是多么的需要一个统一的代码风格。

eslint的安装与配置

直接安装eslint

npm install eslint --save-dev

这会为当前项目安装eslint，并且将eslint作为一个只在dev环境使用的依赖。

或者也可以全局安装eslint

npm install eslint

安装完成之后，我们可以根据官方引导快速构建eslint的环境

eslint装在项目中执行：

./node_modules/.bin/eslint --init

全局安装执行：

eslint --init

接下来就按照官方的引导回答几个问题

然后他会根据我们的答案安装依赖，并生成一个配置文件

//.eslintrc.*
//这是我配置过的配置文件，初始化后自动生成的文件选项更少
{
  "root": true,
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "extends": [
    "standard",
    "plugin:vue/essential"
  ],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "parser": "babel-eslint",
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": [
    "vue"
  ],
  "rules": {
    "indent": ["error", 4],
    "quotes": ["off"],
    "semi": ["error", "always"],
    "eqeqeq": "warn"
  }
}

根据我们的配置，eslint会自动生成不同格式的文件。

配置的优先级为.eslintrc.js > .eslintrc.yaml > .eslintrc.yml > .eslintrc.json > .eslintrc > package.json

配置文件各个选项的含义可以参考 官方文档

需要特别注意的点：

1、eslint并不会自己去检测代码，我们可以手动执行 eslint file 命令进行代码检测

如果需要在代码检测时自动修复格式问题，可以执行

eslint file --fix

自动的错误提示需要编辑器的支持

webstorm的配置

webstorm勾选下面的 run eslint --fix on save 会在文件保存时自动进行代码格式化。

PS：实践中发现2020.1版本的webstorm只会在编辑器失去焦点时修复代码格式问题（应该也是在这个时候保存文件的），否则需要我们手动 command/ctrl + s

2、对Vue文件的检测支持必须要导入vue的规则

"extends": [
    "standard",
    "plugin:vue/essential"
],

和eslint-plugin-vue组件

"plugins": [
    "vue"
 ]

vue组件有一套自己的规则，详见 https://eslint.vuejs.org/rules/

3、不指定解析器的时候，eslint默认使用 Espree 作为其解析器，为了更好地兼容 babel，推荐使用 babel-eslint 作为解析器

"parser": "babel-eslint"

在webpack配置中使用eslint-loader

除了上述方法，我们还可以使用 eslint-loader 来实现代码规范化和自动格式化。

安装好 eslint-loader 插件之后在vue.config.js中修改webpack配置

// vue.config.js
module.exports = {
  configureWebpack: {
    module: {
        rules: [
            {
                enforce: 'pre',
                test: /.(js|vue)$/,
                loader: 'eslint-loader',
                exclude: /node_modules/,
                options: {
                    fix: true,
                    cache: false,
                    failOnError: false,
                    rules: {
                        indent: ["error", 4]
                    }
                }
            }
        ]
    }
  }
}

webpack中eslint-loader的配置可以参考 https://webpack.docschina.org/loaders/eslint-loader/

在webpack中配置 eslint-loader 后，代码检测会在热加载时自动进行，并且在命令行输出格式错误

设置 fix: true，热重载时会自动修复大部分格式问题，那些需要手动修复的错误，例如变量定义了未使用，会打印出来。

配置 failOnError: true，格式不符合规则时 npm run dev 就会报错，并无法热重载，知道我们修改完所有的格式问题。

上面两种方案可以同时存在，这样一来我们在写代码和编译时都有代码格式错误提示和自动修复。

有时候，我们并不想在保存时更改整个文件的格式，也不想要在编译时更改整个项目的格式，因为担心这会影响到项目的稳定性。我们想要的是尽量不去动已经存在的代码，只对增量代码做规范化处理。这个目的可以利用 husky 和 lint-staged 在代码提交时对增量代码自动格式化，详细的内容可以参考 https://juejin.im/post/5b79a52651882543025ac6d7

遇到的问题

1、使用eslint-loader的时候报错：error Use the latest vue-eslint-parser

解决方法：

@lincenying Ah, I see. Thank you for your investigation. Yes, this plugin requires the custom parser vue-eslint-parser to parse templates (this setting is included in plugin:vue/recommended). So it conflicts the "parser": "babel-eslint" setting.

The workaround is here: https://github.com/mysticatea/vue-eslint-parser#-options

"parserOptions": {"parser": "babel-eslint"} should work

翻译一下就是：eslint-plugin-vue组件默认使用解析器 vue-eslint-parser 来解析template，这和 babel-eslint 冲突了，把 "parser": "babel-eslint" 这个配置放到 parserOptions 中可以解决这个问题。

2、使用vue-plugin-html插件时报错：error Bad line indentation (html plugin)

解决办法：

import和export不缩进（webstorm的script标签里面的import和export代码都缩进了）

3、使用vue-plugin-html插件时报错：error Parsing error: Unexpected token import

解决办法：

在.eslintrc.*文件中指定"parser": "babel-eslint"，和parserOptions平级