一、为什么要使用eslint

---

一句话解释：

官方版：查找并修复JavaScript代码中的问题

简单版：解决代码质量的问题

二、如何在项目中加入eslint

---

目前主流的vue、react项目，在用脚手架创建项目时，都会自带eslint

所以这里简单两步说明一下

（1）首先执行以下命令

npm init @eslint/config

（2）根据实际的情况，确定选项

下面是vue+ts项目的选择示例

三、认识.eslintrc.cjs配置文件（重点）

---

下面以react脚手架，创建的react项目中的.eslintrc.cjs文件为例

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parser: '@typescript-eslint/parser',
  plugins: ['react-refresh'],
  rules: {
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
  },
}

（1）虽然代码不多，看着似乎挺复杂的样子，不过别急！

化繁为简，先去除对象属性的值，加上注释，立马就一目了然了

module.exports = {
  root: true,          // 此配置文件是项目的根 ESLint 配置文件
  env: [],             // 运行环境
  extends: [],         // 继承的规则（扩展）
  ignorePatterns: [],  // 忽略的文件或目录
  parser: {},          // 解析器
  plugins: [],         // 插件
  rules: {}            // 具体规则
};

（2）实际项目中，需要改动的地方是rules对象

其中，对象的属性是规则名，对象的值是对规则作用的限制

"off" 或 0     =>   关闭此规则
"warn" 或 1    =>   打开规则作为警告，不影响代码执行
"error" 或 2   =>   打开规则作为错误，代码不能执行，界面报错

示例：

rules: {
  'no-unused-vars': 2,  // 禁止定义未使用的变量
  'no-var': 2,          // 不允许使用var定义变量
},

（3）实际开发中，注意下方有黄色、红色波浪线的代码

鼠标移动到代码上，上方会显示一个长方形的气泡框

注意eslint小括号里的内容，这就是eslint的具体规则

可复制下来，在rules对象里，对它在做具体的规则限制

更多内容请参考 eslintrc 官网eslint.nodejs.cn/