配置 eslint 也太容易了

接手的项目过去管理不太严格，没有 eslint，所以这次我就给这个项目配置一下，并把配置流程记录一下。

安装 eslint 相关包

bash 复制代码

yarn create @eslint/config

然后会问一系列的问题，按照自己的实际情况选择即可，大概情况如下图：

选择完成之后，开始安装对应的包，并且会根据自己的选择初始化 eslint.config.js 文件。

这时，随便找一个文件，添加一个未使用的变量，如：

js 复制代码

const aaaaa = 1

然后执行以下命令，检测eslint是否配置成功

bash 复制代码

npx eslint src/main.js

此时，报了一个错，如下图所示：

根据提示，安装对应的包：

bash 复制代码

yarn add vue-eslint-parser --dev

再次验证，发现通过，证明 eslint 的基本安装和配置成功。

在开发工具 vscode 中配置 eslint

为了能方便的触发 eslint 校验，推荐在 vscode 中配置 eslint，这样就能在开发的时候实时检测代码，并给出提示。

首先安装 Eslint 插件，如下图所示：

然后在 settings.json 文件中添加以下配置：

json 复制代码

{
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": "always"
  },
  "eslint.validate":[
      "vue",
      "javascript"
  ],
}

然后执行快捷键 Ctrl+Shift+P，输入 Eslint，选择 Eslint: Restart Eslint Server，重启 eslint 服务【这一步很重要，否则可能不生效】，然后再验证，在一个文件中输入问题代码，会发现已经成功有提示了

设置 husky

接下来在提交代码的时候进行 eslint 验证。

首先安装 husky 和 lint-staged ：

bash 复制代码

yarn add husky lint-staged --dev

然后初始化 husky：

bash 复制代码

 npx husky init

会发现在 package.json 的 scripts 中增加了一个命令

json 复制代码

{
  "scripts":{
    "prepare": "husky"
  }
}

这个命令会在执行 yarn 或者 npm install 的时候自动执行，完成 husky 的初始化。

另外，还会发现多了一个 .husky 的文件夹，并且该文件的第一层有 pre-commit 文件，现在给里面添加一行代码：

bash 复制代码

npx lint-staged

并且在package.json 中添加这样一段代码：

json 复制代码

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

接下来尝试提交代码，会发现会在 commit 之前，进行 eslint 校验。

补充 eslint 配置

参考 eslint - 规则参考，进行规则的补充。

参考 eslint - 忽略文件进行忽略文件的配置。

另外，对于通过使用 unplugin-auto-import 引入 element-plus 的项目，在直接使用 ElMessage 的时候，可能会报错：

perl 复制代码

'ElMessage' is not defined .eslint no-undef

这个时候，在 eslint.config.js 文件中添加以下代码，即可解决，参考文档链接：eslint-plugin-vue 中文网

js 复制代码

{
  languageOptions:{
    globals: {
      'ElMessage':'readonly'
    },
  }
}

最后完整的初始版配置文件如下：

js 复制代码

import js from "@eslint/js";
import globals from "globals";
import pluginVue from "eslint-plugin-vue";
import { defineConfig,globalIgnores} from "eslint/config";
import stylisticJs from '@stylistic/eslint-plugin-js';
import vueParser from "vue-eslint-parser"

export default defineConfig([
  { 
    files: ["**/*.{js,mjs,cjs,vue}"], 
    plugins: { 
      js,
      '@stylistic/js': stylisticJs
    }, 
    languageOptions: { 
      globals: {
        ...globals.browser,
        'ElMessage':'readonly'
      },
      parser: vueParser,
    },
    extends: [
      "js/recommended",
    ],
    rules:{
      '@stylistic/js/indent': ['error', 2],
    }
  },
  ...pluginVue.configs["flat/essential"],
  globalIgnores([
    "**/node_modules/**",
    "**/dist/**",
    "**/mock/**",
  ])
]);

总结

至此eslint的配置算是完成了，总结下来，多查查官方文档，多问问Ai，也没啥难的。