Eslint学习总结

---

插件化的javascript代码开源检测工具。形象来说，就是eslint通过配置一个json对象检测javascript代码规范。一个.eslintrc.js件示例文件

module.exports = {
  "root": true,
  "parser": 'babel-eslint',
   "env": {
       "browser": true,
       "commonjs": true,
       "es6": true
   },
  "parserOptions": {
       "ecmaFeatures": {
            "jsx": true
        },
        "sourceType": "module"
  },
  "globals": {
        "$": true,
        "require": false
   }
  "extends": "standard",
  // 支持检测vue文件中的script
  "plugins": [
       "html"
  ],
  // 自定义规则再次添加
  "rules": {
    // 箭头函数只有一个参数时，可以省略圆括号
    "arrow-parens": 0,
    // 关闭不必要的转义字符通知
    "no-useless-escape": 0
  }
}

安装

---

• 全局安装 npm install eslint -g

  作为插件化的工具，全局使用eslint时，同时要求对应项目引入的插
  件也要全局安装

• 本地安装 npm install eslint

配置和使用

---

当我们安装好eslint，我们需要生成一定的配置规则，实际上可以通过两种方式配置规则

1. 可以用 .eslintrc.* 文件或者在 package.json 文件里的 eslintConfig
   字段这两种方式进行的整体配置

2. 通过在javascript文件注释嵌入，用于个别规则单独配置，一般用于当前位置不满足整体配置，优先级最高

.eslintrc.*文件生成

全局:

eslint --init 

本地：

./node_modules/.bin/eslint --init

第三种方式

通过命令行指定配置文件

 eslint -c myconfig.json myfile.js

配置的优先级

行内配置 > 命令行 > 配置文件

配置参数说明

1.全局变量:globals

当访问未定义的变量时，no-undef 规则将发出警告。如果你想在一个文件里使用全局变量，推荐你定义这些全局变量，这样 ESLint 就不会发出警告了。你可以使用注释或在配置文件中定义全局变量。

//true允许重写，false不允许
 "globals": {
    "$": true,
    "require": false
 }

2.继承extends
流行的配置有eslint-config-airbnb ，eslint-config-standard

eslint --init 命令创建的配置，默认继承推荐的规则。

  {
    "extends": "eslint:recommended",
  }

3.插件plugins
框架流行的插件有eslint-plugin-html， eslint-plugin-react，eslint-plugin-vue，eslint-plugin-html 等

全局安装的 ESLint 只能使用全局安装的插件。本地安装的 ESLint 不仅可以使用本地安装的插件还可以使用全局安装的插件

4.规则rules

三种级别

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

规则	含义	推荐配置
no-cond-assign	禁止条件表达式中出现赋值操作符	error
no-console	禁用 console	no-console: ["error", { allow: ["warn", "error"] }]
no-constant-condition	禁止在条件中使用常量表达式	0
no-debugger	禁用 debugger	process.env.NODE_ENV === 'production' ? 2 : 0
...	...	...

具体参见中文官网规则配置

vue支持

---

npm install eslint-plugin-vue
或
npm install eslint-plugin-html

vscode配置支持静态检查

---

安装eslint插件，设置配置

"eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue-html",
    "vue"
],
"eslint.options": {
    "ignorePattern": ["node_modules", "build", "config"]
},
"eslint.workingDirectories": []

项目中检查

---

在package.json配置命令

"scripts": {
   "lint": "eslint --ext .js,.vue src"
 },