vue 使用 eslint 和自动 fix

首先确认安装了vue-cli

npm install vue-cli -g
复制代码

或者体验一把vue-cli 3.0

npm install @vue/cli -g
复制代码

接下来创建一个vue项目

vue init webpack studyEslint
复制代码

选择你想用的代码规范

接下来看看项目中跟eslint有关的地方

脚手架生成的有三个eslint的配置文件

.editorconfig

此文件的作用是为了防止团队协作时大家所用ide不同导致代码规范不同每次合并代码时带来大量的并没有变化的代码合并和不必要的冲突。 安装插件(webstorm 跳过) 此处以 VS Code 为例

去商店中搜索 EditorConfig for VS Code 进行安装，这样 VS Code 就会优先根据项目根目录的.editorconfig 文件对缩进之类风格进行配置，覆盖 VS Code 默认配置。

EditorConfig 插件会从文件所在目录开始逐级向上查找 .editorconfig，直到到达根目录或者找到包含属性 root=true 的 .editorconfig 文件为止。

当找到所有满足条件的 .editorconfig 配置文件后，插件会读取这些配置文件的内容，距离文件路径最短的配置文件中的属性优先级最高，同一个文件按照从上到下方式读取，底部定义的同名属性优先级要高于顶部定义的。

大部分编辑器都有这个插件，即使团队成员使用不同的 IDE，也可以很好的统一代码风格。

只要保证.editorconfig 这个文件一直即可

root = true                     // 表示当前是项目根目录

[*]                             // 所有文件都使用配置
charset = utf-8                 // 编码格式
indent_style = space            // Tab键缩进的样式，由space和table两种 一般代码中是space
indent_size = 2                 // 缩进size为2
end_of_line = lf                // 以lf换行 默认win为crlf mac和linux为lf
insert_final_newline = true     // 末尾加一行空行
trim_trailing_whitespace = true // 去掉行尾多余空格
复制代码

.eslintignore

此文件是eslint忽略文件配置，配置到此文件的文件文件夹都会被eslint的检测规则忽略

/build/
/config/
/dist/
/*.js
/test/unit/coverage/
复制代码

接下来是最核心的.eslintrc.js

下面是vue模版的默认配置

// https://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
  },
  // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
  // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
  extends: ['plugin:vue/essential', 'airbnb-base'],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  // check if imports actually resolve
  settings: {
    'import/resolver': {
      webpack: {
        config: 'build/webpack.base.conf.js'
      }
    }
  },
  // add your custom rules here
  rules: {
    // don't require .vue extension when importing
    'import/extensions': ['error', 'always', {
      js: 'never',
      vue: 'never'
    }],
    // disallow reassignment of function parameters
    // disallow parameter object manipulation except for specific exclusions
    'no-param-reassign': ['error', {
      props: true,
      ignorePropertyModificationsFor: [
        'state', // for vuex state
        'acc', // for reduce accumulators
        'e' // for e.returnvalue
      ]
    }],
    // allow optionalDependencies
    'import/no-extraneous-dependencies': ['error', {
      optionalDependencies: ['test/unit/index.js']
    }],
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

复制代码

此内容中需重点关注env,这里可以配置开发环境内容，例如：

env: {
    browse: true,
    node: true
}
复制代码

plugin是配置我们需要用到的一些插件， 还有一个对象是globals，用来配置全局变量是否可变同时也有声明的作用（亲测）：

globals:{
    ping: true,
    var1: false
}
复制代码

这样就解决了引用第三方库然后使用里面的方法没有声明报错的问题，true是代码此全局变量可以修改，false代表不可修改。

最后是rules，这里配置了你的个性化规则，你可能觉得有些规范太严格或者不太需要那可以在这里修改校验规则，报错等级或者直接关掉。 ESLint 附带有大量的规则。你可以使用注释或配置文件修改你项目中要使用的规则。要改变一个规则设置，你必须将规则 ID 设置为下列值之一：

• "off" 或 0 - 关闭规则
• "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
• "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

这是全局的设置办法，也可以在文件中用注释的办法：

/*eslint getter-return: "error"*/
复制代码

这样就能修改此文件中的这个校验规则。

重点----自动fix

此处以vscode为例，安装eslint的插件，修改vscode的配置文件

"eslint.enable": true,
"eslint.autoFixOnSave": true,
"eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        }
    ],
"editor.wordWrap": "wordWrapColumn",
"editor.formatOnSave": true,
复制代码

里面配置了一个80字符长度自动换行的规则。

可以配合prettier插件一起使用，vscode配置文件可以配置

"prettier.eslintIntegration": true,
复制代码

⚠️个人不建议将prettier的校验规则配置到eslint和airbnb或者standard的规则一起使用，这样有冲突！有冲突！有冲突！prettier遵从的是google的规范。

如需了解更多的eslint的知识请访问 eslint中文

本作品采用《CC 协议》，转载必须注明作者和本文链接