代码校验

eslint

使用 eslint 来预先制定编码规范，借助编辑器的错误检测和格式化来格式化代码，有效控制代码质量，也省去了很多手工操作。

在项目根目录添加 .eslintrc.js 文件，用于校验代码，编写 eslint 相关规则。

配置

全局配置

使用全局安装 ESLint 后，使用的任何 ESLint 插件或可分享的配置也需要全局安装。

# 全局安装
$ pnpm add -g eslint

# 在有 package.json 文件的项目中初始化
$ eslint --init

在 VSCode 配置文件 setting.json

{
  // 如果使用 yarn 全局安装 eslint，要在 vscode 编辑器的 setting.json 改变此项
  "eslint.packageManager": "yarn",

  "eslint.options": {
    // 指定 .eslintrc.js 配置文件路径即可启用自定义规则检测，ESLint 会查找并自动读取
    "configFile": "E:/git/github/styleguide/eslint/.eslintrc.js",

    // ESLint 默认只支持 js 文件的脚本检测，如果我们需要支持类 html 文件（如 vue）的内联脚本检测，还需要安装 eslint-plugin-html 插件
    "plugins": ["html"]
  },
  "eslint.validate": ["javascript", "javascriptreact", "html", "vue"]
}

项目配置

如果仅仅想让 ESLint 成为项目构建系统的一部分，也可以在项目根目录进行本地安装

# 安装 eslint & prettier
$ pnpm install -D eslint eslint-config-prettier eslint-plugin-prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-plugin-vue

# 初始化
$ pnpm eslint --init

配置好规则文件后，安装编辑器检查插件，比如 vscode 中添加 eslint 和 vetur 插件，安装好了之后，会自动根据你上面配置的规则进行代码检查，不合格的会高亮显示。

具体配置

1. 使用 .eslintrc.* 文件（支持 JSON 和 YAML 两种语法）

   .eslintrc 放在项目根目录，则会应用到整个项目；如果子目录中也包含 .eslintrc 文件，则子目录会忽略根目录的配置文件，应用该目录中的配置文件。这样可以方便地对不同环境的代码应用不同的规则。

   module.exports = {
     // 指定要启用的环境，以保证在进行代码检测时不会把这些环境预定义的全局变量识别成未定义的变量而报错
     env: {
       browser: true,
       es6: true,
       node: true,
     },
   
     // 启用推荐规则
     extends: ['eslint:recommended', 'plugin:vue/essential'],
   
     // 脚本在执行期间访问的额外的全局变量
     globals: {
       Atomics: 'readonly',
       SharedArrayBuffer: 'readonly',
     },
   
     // 指定解析器
     parse: '',
   
     // 指定想要支持的 JavaScript 语言选项, 指定解析器选项
     parserOptions: {
       ecmaVersion: 2018,
       sourceType: 'module',
     },
     plugins: ['vue'],
   
     // 启用的规则及其各自的错误级别
     rules: {},
   
     // 别人可以直接使用你配置好的ESLint
     root: true,
   }
   

2. 在 package.json 中添加 eslintConfig 配置块

   {
     "name": "mypackage",
     "version": "0.0.1",
     "eslintConfig": {
       "env": {
         "browser": true,
         "node": true
       }
     }
   }
   

3. 直接在代码文件中定义

   代码文件内配置的规则会覆盖配置文件里的规则。

   局部禁用 eslint:

   • 单个 js 文件禁用 ESLint 语法校验：在代码顶部添加一行注释 /* eslint-disable */
   • 禁用某个代码块的校验：在代码块顶部和底部加 /* eslint-disable */
   • 避开指定的校验规则 /* eslint-disable no-new */
   • 禁用当前行：在当前行 // eslint-disable-line
   • 禁用下一行：在上一行 // eslint-disable-next-line

4. 忽略校验

   在 package.json 配置 "eslintIgnore" 或添加文件 .eslintignore

创建自己风格的 eslint 插件

{
  "eslintConfig": {
    "root": true,
    "extends": ["xxx"]
  }
}