前端开发 eslint 使用心得分享

eslint 是代码规范检查工具，可以辅助开发人员规范代码风格

安装

mpn i eslint -D

在根目录创建 .eslintrc.js 文件用来配置 eslint的文件js的文件不同于json需要

module.exports = {}

注意： eslint查找自己配置文件的优先级如下

.eslintrc.js
.eslintrc.yaml
.eslintrc.yml
.eslintrc.json
.eslintrc
package.json

如果项目中存在多个配置文件则 eslint 先检同级下的配置文件然后在找别的，选择原则就是就近原则。

*例如：*如果在你的主目录下有一个自定义的配置文件 (~/.eslintrc) ，如果没有其它配置文件时它才会被使用。

开始使用 npm命令启动

首先我不推荐把 eslint 配置到 webpack中，尤其是在 dev 开发模式下使用，虽然执行 webpack就会给我们规范，以及在保存时候自动格式化，但是这样无疑浪费系统性能。所以首先介绍一种推荐模式。

在项目根目录配置文件中增加下面这一条：

//package.json 项目根目录
{ 
    "scripts":{
        "lint": "eslint --fix --ext  .ts,.vue src"
    }
}

--fix 是自动修复功能 --ext 是用来传后面的配置 .ts,.vue src 意思是对 src 下面的 .ts,.vue当我们执行 npm run lint 时候系统会直接使用我们根目录下的 .eslintrc.js 对当前的目录下的文件进行检查和提示。这时候我们执行 lint 控制台就会把有问题的代码呈现给我们，同时 eslint 提供了一个格式化配置，可以把有问题的代码按照我们想要的样子给我们具体配置如下

//package.json 项目根目录
{ 
    "scripts":{
        "lint": "eslint --format codeframe --fix --ext  .ts,.vue src"
    }
}

--format 后面可以跟下面的值

checkstyle
codeframe
compact
html
jslint-xml
json-with-metadata
json
junit
stylish
table
tap
unix
visualstudio

不同的配置会有不同的结果样式，具体大家可以自己试试

配置说明

在开始详细介绍前我把我项目中的配置发到了下面，并删除了很多个性化的配置只留下了比较常用的场景，和不同的配置风格，方便大家理解并自行扩展。

module.exports = {
  "root": true,
  "extends": "eslint:recommended",
  "env": {
    "browser": true,
    "es6": true
  },
  "parserOptions": {
    "ecmaVersion": 7,
    "sourceType": "module",
    "parser": "@typescript-eslint/parser",
    "ecmaFeatures": {
      "legacyDecorators": true
    }
  },
  "parser":  "vue-eslint-parser",
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": [ 1, {
        "printWidth": 80,
        "tabWidth": 4,
        "useTabs": false,
      "singleQuote": false,
        "semi": true,
        "trailingComma": "none",
        "bracketSpacing": true,
    }],
    "no-debugger":[1],
    "arrow-spacing": [
        1,
        {
            "before": true,
            "after": true
        }
    ],
    "no-dupe-args":[1]
  }
}

root默认情况下，ESLint将在所有父文件夹中查找根目录中的配置文件。如果您希望所有项目都遵循特定惯例，但有时会导致意想不到的结果，这会非常有用。要将ESLint限制为特定项目，请将其"root": true放在文件的eslintConfig字段内package.json或.eslintrc.*项目根目录下的文件中。一旦找到配置，ESLint将停止在父文件夹中查找"root": true。

module.exports = {
    "root": true
}

extends 属性我们在很多场景下都会见到，意思就是扩展。但是在 eslint 中它还有别的用途，

module.exports = {
    "extends": "eslint:recommended" || "eslint:all",
}

"eslint:all" 用于启用当前安装的ESLint版本中的所有核心规则。核心规则集可以在任何次要或主要版本的ESLint中更改。 注意: 不建议将此配置用于生产用途，因为它随ESLint的每个次要版本和主要版本而变化。使用风险自负。所以推荐使用 "eslint:recommended"。

env ESlint 可以让我们选择支持的 js 语言，我这个项目是浏览器项目，同时使用了很多新的特性,所以我的配置是

module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
}

"es6": true 会启动 es6 语法规则检测，这时候就需要 parserOptions 进行详细的配置

module.exports = {
    "parserOptions": {
        "ecmaVersion": 7,
        "sourceType": "module",
        "parser": "@typescript-eslint/parser",
        "ecmaFeatures": {
        "legacyDecorators": true
        }
    },
    "parser":  "vue-eslint-parser",
}

ecmaVersion - 设置为3,5（默认），6,7或8以指定要使用的ECMAScript语法的版本。您也可以设置为2015年（与6）相同，2016年（与7相同）或2017（与8相同）使用年份命名。

sourceType- 设置为"script"（默认）或者"module"您的代码位于ECMAScript模块中。

parser 解析器，例如我的项目是 vue+ts版我用的就是 @typescript-eslint/parser 如果是普通的可以写成 babel-eslint，

而在外面还有一个 parser 我的项目是vue1项目于是选择解析器 "vue-eslint-parser"

注意： 在 npm 下载这些解析器的时候要匹配好相应的 eslint 版本。

在 eslint 中使用插件例如 prettier

我们只要下载好插件然后在 rules 里面配置好就可以用了,具体配置如下

module.exports = {
    "plugins": ["prettier"],
    "rules": {
    "prettier/prettier": ["error", {
        "printWidth": 80,
        "tabWidth": 4,
        "useTabs": false,
        "singleQuote": false,
        "semi": true,
        "trailingComma": "none",
        "bracketSpacing": true
    }]
}

rules配置规则。

这个配置方案挺简单，规则比较简单例如：

    "no-debugger":[1],
    "arrow-spacing": [
        'error',
        {
            "before": true,
            "after": true
        }
    ],

elint 所有的 rules 配置都是一样的，它接收一个数组对象 ary

ary[0] 代表规则级别，可以理解为规则的严重程度，具体如下：

"off"或者0- 关闭规则 "warn"或者1- 将规则打开为警告（不影响退出代码） "error"或者2- 将规则打开为错误（触发时退出代码为1）可以是 string 也可以是 number

ary[1] 配置该规则的具体描述，每个规则都有独特的描述如果不清楚就不要配置了。