eslint相关配置

1 配置文件

• .eslintrc.js位于项目根目录
• package.json 中 eslintConfig节点

2 具体配置

2.1 rules 具体规则

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

2.2 extends

现有以下较为有名的规则：

• Eslint 官方的规则open in new window：eslint:recommended
• Vue Cli 官方的规则open in new window：plugin:vue/essential
• React Cli 官方的规则open in new window：react-app

// 文档：https://eslint.bootcss.com/docs/user-guide/configuring
module.exports = {
  env: {
    node: true, // 启用node中全局变量
    browser: true, // 启用浏览器中全局变量
  },
  plugins:['import'],//解决动态引入语法报错（eslint需要识别import语法）；npm i eslint-plugin-import -D
  // 解析选项
  parserOptions: {
      ecmaVersion: 6, // ES 语法版本
      sourceType: "module", // ES 模块化
      ecmaFeatures: { // ES 其他特性
        jsx: true // 如果是 React 项目，就需要开启 jsx 语法
      }
  }
  // 具体检查规则（我们的规则会覆盖掉react-app的规则）
  rules: {
      'no-console': process.env.NODE_ENV === "production" ? "warn" : "off",
      'no-debugger': process.env.NODE_ENV === "production" ? "warn" : "off",
      semi: "error", // 禁止使用分号
      'array-callback-return': 'warn', // 强制数组方法的回调函数中有 return 语句，否则警告
      'default-case': [
        'warn', // 要求 switch 语句中有 default 分支，否则警告
        { commentPattern: '^no default$' } // 允许在最后注释 no default, 就不会有警告了
      ],
      eqeqeq: [
        'warn', // 强制使用 === 和 !==，否则警告
        'smart' // https://eslint.bootcss.com/docs/rules/eqeqeq#smart 除了少数情况下不会有警告
        "no-var": 2, // 不能使用 var 定义变量
      ],
    }
  // 继承其他规则
  extends: ["react-app"],
  // ...
  // 其他规则详见：https://eslint.bootcss.com/docs/user-guide/configuring
};

3 在webpack中使用

• 下载包

npm i eslint-webpack-plugin eslint -D

• 定义 Eslint 配置文件.eslintrc.js
• 配置webpack.config.js

const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const os = require("os");
const threads = os.cpus().length;

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "static/js/main.js",                             
  },
  module: {
    rules: [],
    plugins: [
      new ESLintWebpackPlugin({
        context: path.resolve(__dirname, "src"),// 指定检查文件的根目录
        exclude: "node_modules", // 默认值
        cache: true, // 开启缓存
        // 缓存目录
        cacheLocation: path.resolve(
          __dirname,
          "../node_modules/.cache/.eslintcache"
        ),
        threads, // 开启多进程
      }),
    ],
};

• 运行指令

npx webpack

4 Eslint 插件

 打开 VSCode，下载 Eslint 插件，在项目根目录新建.eslintignore忽略文件

# 忽略dist目录下所有文件
dist

5 Prettier插件

官方文档：Prettier 中文网 · Prettier 是一个“有态度”的代码格式化工具

在项目中新建 .prettierrc 文件，该文件为 perttier 默认配置文件

{
  // 不尾随分号
  "semi": false,
  // 使用单引号
  "singleQuote": true,
  // 多行逗号分割的语法中，最后一行不加逗号
  "trailingComma": "none"
}

问题： ESLint 和 prettier 之间的冲突问题：created 这个方法名和后面的小括号之间，应该有一个空格，prettier 会自动帮助我们去除掉这个空格。

解决方法：打开 .eslintrc.js 配置文件，在 rules 规则下，新增一条规则

'space-before-function-paren': 'off'

6 代码格式规范处理

6.1 通过 pre-commit 检测

1. 执行 npx husky add .husky/pre-commit "npx eslint --ext .js,.vue src" 添加 commit 时的 hook （npx eslint --ext .js,.vue src 会在执行到该 hook 时运行）

2. 该操作会生成对应文件 pre-commit：

   

3. 关闭 VSCode 的自动保存操作

4. 修改一处代码，使其不符合 ESLint 校验规则

5. 执行 提交操作 会发现，抛出一系列的错误，代码无法提交

   PS F:\xxxxxxxxxxxxxxxxxxx\imooc-admin> git commit -m 'test'
   
   F:\xxxxxxxxxxxxxxxx\imooc-admin\src\views\Home.vue
     13:9  error  Strings must use singlequote  quotes
   
   ✖ 1 problem (1 error, 0 warnings)
     1 error and 0 warnings potentially fixable with the `--fix` option.
   
   husky - pre-commit hook exited with code 1 (error)
   

6. 想要提交代码，必须处理完成所有的错误信息

6.2 lint-staged 自动修复格式错误

lint-staged 可以让你当前的代码检查 只检查本次修改更新的代码，并在出现错误的时候，自动修复并且推送。vue-cli已经安装过了。

1. 修改 package.json 配置

   "lint-staged": {
       "src/**/*.{js,vue}": [
         "eslint --fix",
         "git add"
       ]
     }
   

2. 如上配置，每次它只会在你本地 commit 之前，校验你提交的内容是否符合你本地配置的 eslint规则(这个见文档 ESLint )，校验会出现两种结果：

   1. 如果符合规则：则会提交成功。
   2. 如果不符合规则：它会自动执行 eslint --fix 尝试帮你自动修复，如果修复成功则会帮你把修复好的代码提交，如果失败，则会提示你错误，让你修好这个错误之后才能允许你提交代码。

3. 修改 .husky/pre-commit 文件

   #!/bin/sh
   . "$(dirname "$0")/_/husky.sh"
   
   npx lint-staged
   
   

4. 再次执行提交代码

5. 发现 暂存区中 不符合 ESlint 的内容，被自动修复