4.3.4 添加 TypeScript 扩展配置
这是一个 Vue3 + TS 的项目，当然还需要检测 TS 语法。
打开 HelloWorld.vue 就发现了 TS 相关的错误。
安装 Vue 专用的 TS 扩展配置：
npm install --save-dev @vue/eslint-config-typescript @rushstack/eslint-patch
在配置文件 .eslintrc.cjs 中添加配置：
require('@rushstack/eslint-patch/modern-module-resolution') module.exports = { env: { node: true, }, extends: [ 'eslint:recommended', 'plugin:vue/vue3-recommended', '@vue/eslint-config-typescript/recommended', '@vue/eslint-config-prettier', ], rules: { // override/add rules settings here, such as: // 'vue/no-unused-vars': 'error' }, }
注意，始终让 prettier 相关配置留在 extends 数组的最后一位。
之后，问题解决：
4.3.5 其他配置添加
在 .eslintrc.cjs 中添加了几个常见配置：
require('@rushstack/eslint-patch/modern-module-resolution') module.exports = { env: { node: true, browser: true, es2021: true, }, parserOptions: { ecmaVersion: 'latest', sourceType: 'module', }, extends: [ 'eslint:recommended', 'plugin:vue/vue3-recommended', '@vue/eslint-config-typescript/recommended', '@vue/eslint-config-prettier', ], rules: { // override/add rules settings here, such as: // 'vue/no-unused-vars': 'error' }, }
在 .prettierrc.json 中添加了几个常见规则：
{ "semi": false, "singleQuote": true, "tabWidth": 2, "useTabs": false, "bracketSpacing": true }
4.3.6 添加终端命令
除了在配置文件中加入相关配置，命令行也可以。
在 package.json 中的 script 中添加两条命令：
"lint": "eslint --ext .js,.ts,.vue --ignore-path .gitignore --fix src", "format": "prettier . --write --ignore-path .gitignore"
- lint 命令通过 eslint 来对 src 目录下后缀为 .js 和 .vue 的文件进行代码检查和修复
--ext：指定需要检测的后缀文件，这里是 js, ts, vue，https://eslint.org/docs/latest/user-guide/command-line-interface#--ext--ignore-path：指定 .eslintignore 的替代文件，上面用的是 .gitignore 作为忽略检测的文件项，https://eslint.org/docs/latest/user-guide/command-line-interface#--ignore-path--fix：修复不符合规则的代码，eslint.org/docs/latest…src：表示修复 src 目录下的所有文件。
- format 命令通过 prettier 来格式化代码
--write：相当于eslint --fix，prettier.io/docs/en/cli…--ignore-path：同 eslint 的对应命令，prettier.io/docs/en/cli….：表示对当前目录进行代码格式化。
4.3.7 使用终端命令
现在尝试运行 npm run lint 来检测和修复代码：
vite-env.d.ts 出现了 3 个问题，2 个错误和 1 个警告。
针对这些问题，按照给出的提示，做对应调整就行。
或者调整 .eslintrc.cjs 的规则细节：
require('@rushstack/eslint-patch/modern-module-resolution') module.exports = { // other options rules: { // override/add rules settings here, such as: // 'vue/no-unused-vars': 'error' '@typescript-eslint/ban-types': [ 'error', { extendDefaults: true, types: { '{}': false, }, }, ], '@typescript-eslint/no-explicit-any': 0, }, }
之后，再次运行就不会报错了。
现在把 App.vue 文件中的代码格式打乱，变成屎山风格：
运行 npm run format 来格式化代码，摇身一变大漂亮：
4.3.8 小节
以上，我们自行配置了 ESLint + Prettier，可以实现保存时，根据配置的规则，自动检查并修复代码。另外一方面，可以通过命令行来实现相关流程。
那么问题来了，既然我们已经给 VSCode 设置了保存时自动修复，那么为什么还要设置命令行相关命令呢？这个问题和 CI 有关，我先挖个坑留着。（这篇实在太长了，如果你能看到这，我得给你赞哈哈哈）
五、总结
在 Vue3 + TS 项目中配置 ESLint + Prettier 基本就是这些内容了，更多的细节可以自己去查阅官网。接下来，整理一下整个流程：
如果你不想自己手动配置，那么就使用 create-vue 脚手架来自动添加 ESLint + Prettier 吧，或者使用ESLint 初始化 npm init @eslint/config；
如果你想要自己配置，那么就使用 Vite 来创建项目，然后按照以下步骤来配置：
- 在 IDE 中添加 ESLint、Prettier 插件，并设置保存时自动修复；
- 使用 vite 搭建脚手架，以此为基点，安装并配置 prettier ，安装并配置 eslint；
- 在 eslint 配置文件中，添加 prettier 和 typescript 相关扩展配置；
- 分别添加 lint 和 format 的终端命令。
另外，我还想补充或强调一些重要的 stuff：
- ESLint 和 Prettier 都有配置文件，各种类型，但作用是一样的。
- Configuration File in ESLint
- Configuration File in Prettier
- 相对的，还有一组 Ignoring Code 文件，用来指定不需要检查的文件，也可以使用 CLI 命令
--ignore-path，在 4.3.6 中有提到。
- 优先级问题，配置文件的优先级大于 IDE 的设置（settings.json），建议把设置里的关闭，采用配置文件。
- ESLint 的规则（rules）除了在配置文件中设置，还可以通过注释的方式使用：eslint.org/docs/latest…
- 局部范围内禁用一部分 ESLint 的规则（rules）的方式：eslint.org/docs/latest…
- ESLint 配置文件中的 extends 字段，遇到以
eslint-config-为前缀的扩展配置，可以省略前缀。例如，eslint-config-prettier可以简写为prettier，@vue/eslint-config-prettier可以简写为：@vue/prettier等等。eslint.org/docs/latest… - 同理，ESLint 配置文件中的 plugins 字段，遇到以
eslint-plugin-为前缀的插件，也可以省略前缀。eslint.org/docs/latest… - ESLint 配置文件中，prettier 相关的扩展配置需要放在 extends 数组的最后一位，避免影响格式化。
- 在使用 VSCode 时，保存代码时会自动格式化，右下角的通知会提示你选择格式化插件，选 Prettier 即可。
ESLint + Prettier 很好地解决了代码质量检查和格式化的问题，解放了 Code Review 中代码规范方面的巨大压力。1.3 节还提到了 editorconfig + husky + commitlint，至于这些组合为什么出现，将在团队协作系列的下篇剖析，大家敬请期待～
