ESlint简介

看到webpack打包后，各种eslint的报错的警告，于是想了解eslint自动fix的方法。 ESlint：是用来统一JavaScript代码风格的工具，不包含css、html等。脚手架生成的有三个eslint的配置文件：

.editorconfig 此文件的作用是为了防止团队协作时大家所用ide不同导致代码规范不同，每次合并代码时带来大量的并没有变化的代码合并和不必要的冲突。以 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,
  },
  extends: [
    // 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.
    'plugin:vue/essential', 
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    'standard'
  ],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  // add your custom rules here
  rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

env 这里可以配置开发环境内容，例如：

env: {
    browse: true,
    node: true
}

plugin 配置我们需要用到的一些插件
globals 配置全局变量是否可变同时也有声明的作用

globals:{
    ping: true, // true代表此全局变量可以修改
    var1: false // 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

vscode规范和eslint规范冲突

不知道什么原因，vscode保存后的规则是：

字符串默认用双引号（eslint规范是单引号）
代码句末尾默认添加分号（eslint默认不添加）
在代码尾部添加逗号（eslint默认不添加）
函数名和括号之间没有空格（ standard 规则要求要有）

  8  http://eslint.org/docs/rules/quotes
  7  http://eslint.org/docs/rules/semi
  4  http://eslint.org/docs/rules/comma-dangle
  2  http://eslint.org/docs/rules/space-before-function-paren

解决方案：

安装vscode eslint插件,并在settings.json（vscode的配置文件）中添加如下代码：

//配置eslint
  "eslint.autoFixOnSave": true,  //  启用保存时自动修复,默认只支持.js文件
  "eslint.validate": [
     "javascript",  //  用eslint的规则检测js文件
     {
       "language": "vue",   // 检测vue文件
       "autoFix": true   //  为vue文件开启保存自动修复的功能
     },
     {
       "language": "html",
       "autoFix": true
     },
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

注意这段代码必须放最后，因为后面的优先级最高

万一横竖修改后都不生效

那么就在vscode底下，右下方，Prettier处，选择Vetur的格式化方案，就能重新运用shift+alt+f实现自动格式化了。

参考文献： juejin.cn/post/684490… www.cnblogs.com/sheseido/p/…

配置vscode vue eslint

ESlint简介

自动fix

vscode规范和eslint规范冲突

万一横竖修改后都不生效