EsLint

eslint官网：https://eslint.org/

对项目代码的统一规范，包括代码质量的规范和代码格式的规范；

本质上通过eslint限制键值对代码添加限制规则；如 prefer-const': 'error' 即强制项目代码使用 const 声明变量

开始

安装：npm i eslint -D

生成配置文件

手动创建：文件格式可能是 .eslintrc.js，.eslintrc.yml，.eslintrc.json

命令行创建：

1. package.json 的 scripts 下新增 "eslint": "./node_modules/.bin/eslint"

2. npm run eslint -- --init 自定义选项生成配置文件

3. npm run eslint xx.js 在指定文件/目录下运行eslint检测（支持npx）

注：目前官方文档eslint有v9.9.0和v8.57.0两个大版本，新版本配置文件规范为 eslint.config.xx，需检查新旧版本差异；

配置

// .eslintrc.js
module.exports = {
    root: true,
    parser: '@babel/eslint-parser',
    parserOptions: {
        ecmaVersion: 2019,
        sourceType: 'module',
        ecmaFeatures: {
            globalReturn: false,
            impliedStrict: true,
            jsx: true
        },
        requireConfigFile: false,
        allowImportExportEverywhere: false
    },
    env: {
        browser: true,
        node: true,
        commonjs: true,
        es6: true,
        jquery: true
    },
    extends: "eslint:recommended",
    rules: {}
};

root

eslint支持层叠配置(读取不同层级目录的rc文件)，以检测文件最近的rc作为最高优先级；root: true 即当前为根目录配置，停止向上查找；

env

告诉 ESLint 当前项目支持的运行环境，以便于支持识别不同环境下的全局变量；

如配置 { browser: true } 即浏览器运行环境，自动支持 window，document变量识别；

常用开启环境：browser node commonjs es6 jquery；

parser

设置eslint解析器，默认为 Espree；其它与Eslint完全兼容的解析器有

esprima

@babel/eslint-parser：使用babel转译的项目推荐（支持所有语法特性）

@typescript-eslint/parser：TypeScript项目推荐

parserOptions

 配置JavaScript语言选项，包括ECMAScript 其它版本和 JSX 的支持；配置项：

parserOptions: {
  ecmaVersion: 2019, // ECMAScript版本支持，最新特性2022版本
  sourceType: 'module', // 默认值为script, module即代码为ECMAScript模块
  ecmaFeatures: {  // 语言特性
    globalReturn: false, // 不允许在全局作用域下使用 return
    impliedStrict: true, // 启用全局 strict mode
    jsx: true  // 启用jsx
  },
  // 以下选项作用于@babel/eslint-parser解析器
  requireConfigFile: false, // 没有 babelrc文件，也用@babel/eslint-parser解析
  allowImportExportEverywhere: false // 仅允许 import export 语句出现在模块顶层
}

global

定义额外的全局变量，以控制 no-undef 正确检测

"globals": {
    "var1": "writable",
    "var2": "readonly"  // 'off'
}  

extends

当前eslint配置文件继承自其它的config，值可以为

字符串类型：配置文件路径、eslint-config- 开头的可共享配置名称(可省略前缀)、来自插件的配置(详见plugins配置项)、 eslint:recommended (eslint推荐)

数组：每个配置继承它前面的配置，依次覆盖

常用配置规则： eslint:recommended eslint-config-airbnb  eslint-config-prettier eslint-config-standard

注意：

prettier是一个特殊规范，主要是对代码格式的规范，如括号，逗号，分号等，常覆盖在最前面；

plugins

eslint支持引入插件供所有配置项中使用，以增强eslint配置；

插件名常以 eslint-plugin- 为前缀，声明时可省略前缀；

extends 使用插件预设

extends: [ 'eslint:recommended', 'plugin:import']

rules 使用插件规则(常见于不使用插件预设时)

// 须声明插件
plugins: [ 'eslint-plugin-import' ],
rules: {
  "import/no-unresolved": [2, { commonjs: true, amd: true }]
}

常用插件： eslint-plugin-import eslint-plugin-react eslint-plugin-vue

rules

自定义eslint键值对规则，会覆盖extends中规范；值可以是：

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

rules编写

查看ESlLint的官方rules限制键名规则；prettier同理；

忽略文件

默认 node_modules 目录文件被忽略，支持自定义配置：

module.exports = {
    "ignorePatterns": ["temp.js", "**/vendor/*.js"],

.eslintignore

dist/*
node_modules/*

Typescript

安装

npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser （二者版本一致）

TypeScript@5.6.0 及以下推荐 @typescript-eslint@7.18.0 版本，否则推荐 @typescript-eslint@8.x.x 版本

配置

module.exports = {
  root: true,
  parserOptions: {
    parser: "@typescript-eslint/parser",  // parser
    // ......
    },
  },
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended", // @typescript-eslint/eslint-plugin
    "plugin:prettier/recommended",
    "./eslintrc-auto-import.json",
  ],
}

规范参考

京东凹凸实验室规范

腾讯规范

Prettier

代码格式化器，表现上与 eslint 相似

仅检查格式：npx prettier --check .

检查并纠正格式：npx prettier --write .

eslint + prettier

相关依赖

eslint-config-prettier

覆盖 eslint 上与 prettier 冲突规则，项目存在 eslint 时必须

eslint-plugin-prettier

将 prettier 规则作为 eslint 规则并入，通过 eslint 提示代码格式

安装：npm i eslint-config-prettier eslint-plugin-prettier -D

eslint 配置：通过 prettier 插件将 prettier 默认规则并入 eslint

// .eslintrc.js
module.exports = {
  extends: ["spark", "plugin:prettier/recommended"], // eslint-config-prettier
  rules: {
    "prettier/prettier": "warn" // eslint-plugin-prettier
  }
}

prettier 配置：通过 .prettierrc.js 文件自定义格式化规则

预提交：预提交时借助 eslint fix 修复部分 prettier 格式化问题

vscode

安装：vscode插件 prettier-vscode

prettier 配置：通过 .prettierrc.js 文件自定义格式化规则

settings.json 配置：

{
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

注：

如果你的某个文件prettier无法生效，检查vscode上述设置是否存在

vscode右下角prettier可查看实时prettier格式化输入输出，对代码debug

集成

Vue CLI

Vue CLI创建的项目默认支持eslint，且创建时可选择自定义选项中勾选eslint format，选择使用 eslint + airbnb ,再选择 ‘‘独立eslit配置为单个文件”

此时package.json会自动添加以下包

• @vue/cli-plugin-eslint

• @vue/eslint-config-airbnb

• eslint-plugin-vue

• babel-plugin-import

在没有某些extends时，如prettier，我们安装对应的npm包，如”prettier”的 @vue/eslint-config-prettier，然后在extends添加新规范；

注： 安装 @vue/eslint-config-prettier 报错“未找到eslint-plugin-prettier”，安装该包即可；如果还是报错，尝试安装最新eslint版本；

vscode

1. 安装vscode拓展 ESLint

2. 检查配置，如下

   // "prettier.requireConfig": true,
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
   "source.fixAll.eslint": true
   },
   "eslint.format.enable": true,
   "eslint.probe": [
     "javascript",
     "html",
     "vue"
   ]
   

3. 查看vscode右下角控制台eslint是否正常运行，重启编辑器

webpack集成

其它集成详见官方 Integrations - ESLint中文文档

• Previous
  chrome devtool 调试工具
• Next
  Element-UI