要启用vscode中eslint自动修复，首先安装eslint插件，接着配置项目中的eslint规则文件（如.eslintrc.JS或.eslintrc.json），然后在vscode设置中开启eslint.validate并添加需检查的文件类型，再配置editor.codeactionsonsave以启用保存时自动修复，最后重启vscode确保配置生效。若自动修复未生效，可检查eslint是否正确安装、插件是否启用、文件类型是否识别、规则是否有冲突、依赖是否完整等。自定义eslint规则可通过修改.eslintrc.js中的rules字段实现，并可使用extends继承现有配置、通过plugins扩展功能，同时建议逐步调整规则并与团队协作统一规范。最佳实践包括从小范围规则开始、定期更新eslint版本、结合prettier格式化代码、使用版本控制管理配置变更、忽略特定无需检查的文件或行。
Vscode启用ESLint自动修复，简单来说，就是让Vscode在你保存代码的时候，自动按照ESLint的规则格式化你的代码。这能省去很多手动调整格式的时间，让代码风格保持一致。
解决方案：
-
安装ESLint插件： 首先，在Vscode的扩展商店里搜索ESLint，安装官方的ESLint插件。这是基础。
-
配置ESLint： 确保你的项目里已经配置了ESLint。通常会有一个.eslintrc.js或.eslintrc.json文件。如果没有，可以使用npm init @eslint/config在项目根目录下初始化一个。这个配置文件定义了你的代码规范。
-
Vscode设置： 打开Vscode的设置（文件 -> 首选项 -> 设置，或者直接按Ctrl + ,）。在搜索框里输入eslint.validate。
- 在eslint.validate中，添加你想要ESLint检查的文件类型。比如，[“JavaScript”, “javascriptreact”, “typescript“, “typescriptreact”, “vue“, “html”]。这意味着ESLint会检查js、jsx、ts、tsx、vue和html文件。
-
启用保存时修复： 继续在设置里搜索editor.codeActionsOnSave。点击在settings.json中编辑。
- 在settings.json文件中，添加以下配置：
{ "editor.codeActionsOnSave": { "source.fixAll.eslint": true } }- 如果你的Vscode版本较低，可能不支持source.fixAll.eslint。在这种情况下，可以尝试使用eslint.autoFixOnSave，将其设置为true。但source.fixAll.eslint是更推荐的方式。
-
重启Vscode： 修改了Vscode设置后，建议重启一下Vscode，确保配置生效。
-
检查ESLint配置： 如果自动修复没有生效，检查你的.eslintrc.js或.eslintrc.json文件是否正确配置了rules。有些rules可能阻止自动修复。
-
忽略文件： 有些文件可能不需要ESLint检查。可以在项目根目录下创建一个.eslintignore文件，将不需要检查的文件或文件夹添加到这个文件中。
为什么Vscode的ESLint自动修复不生效？
ESLint自动修复不生效的原因有很多，我踩过的坑包括：
- ESLint未正确安装或配置： 这是最常见的原因。确保你的项目里安装了ESLint，并且.eslintrc.js文件配置正确。可以通过在终端运行eslint .来检查ESLint是否正常工作。如果报错，说明ESLint配置有问题。
- Vscode插件未启用： 检查ESLint插件是否已启用。有时候插件会被禁用，导致自动修复失效。
- 文件类型未被识别： 确保eslint.validate中包含了你想要检查的文件类型。
- ESLint rules冲突： 有些ESLint rules可能互相冲突，导致自动修复失败。检查你的.eslintrc.js文件，看看是否有冲突的rules。
- Vscode设置问题： 检查editor.codeActionsOnSave和eslint.autoFixOnSave是否正确配置。
- 文件保存时出错： 有时候，文件保存时会出错，导致自动修复失败。可以查看Vscode的输出面板（查看 -> 输出），看看是否有ESLint相关的错误信息。
- 没有安装依赖： 有时候需要安装一些额外的依赖，比如eslint-plugin-react，才能让ESLint正常工作。
如何自定义ESLint规则以适应团队的代码风格？
自定义ESLint规则是让ESLint更好地适应团队代码风格的关键。以下是一些步骤和注意事项：
-
理解ESLint规则结构： ESLint规则通常包含rule ID、severity和options。rule ID是规则的名称，severity表示规则的严重程度（”off”、”warn”、”Error”），options是规则的配置选项。
-
修改.eslintrc.js： 打开你的.eslintrc.js文件，在rules字段中添加或修改规则。例如：
module.exports = { "rules": { "semi": ["error", "always"], // 强制使用分号 "quotes": ["error", "single"], // 强制使用单引号 "no-unused-vars": "warn" // 未使用的变量发出警告 } }; -
使用extends继承配置： 可以使用extends字段继承一些常用的ESLint配置，比如eslint:recommended、airbnb、standard等。这可以省去很多手动配置的麻烦。例如：
module.exports = { "extends": "airbnb", "rules": { // 覆盖airbnb的规则 "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }] } }; -
创建自定义规则： 如果ESLint自带的规则不能满足你的需求，可以创建自定义规则。这需要编写一些JavaScript代码来实现规则的逻辑。具体步骤可以参考ESLint官方文档。
-
使用plugins： ESLint支持使用plugins来扩展其功能。plugins可以提供额外的规则和配置。常用的plugins包括eslint-plugin-react、eslint-plugin-vue、eslint-plugin-typescript等。
-
逐步调整： 修改ESLint规则后，建议逐步调整，避免一次性修改过多导致代码混乱。
-
团队协作： 确保团队成员都了解并遵守ESLint规则。可以定期召开代码评审会议，讨论ESLint规则的合理性，并根据实际情况进行调整。
ESLint自动修复的最佳实践有哪些？
-
从小处着手： 刚开始使用ESLint自动修复时，不要一下子启用所有规则。先从一些简单的规则开始，比如空格、缩进、分号等。逐步增加规则，避免代码库出现大量修改。
-
定期更新ESLint： ESLint会不断更新，修复bug并添加新功能。定期更新ESLint可以确保你使用的是最新的版本，并享受到最新的功能和修复。
-
使用版本控制： 在修改ESLint配置之前，先提交代码。这样可以方便地回滚修改，避免出现问题。
-
代码评审： 即使使用了ESLint自动修复，仍然需要进行代码评审。自动修复只能解决一些简单的格式问题，无法保证代码的逻辑正确性。
-
与Prettier结合使用： ESLint主要用于检查代码的逻辑和风格，而Prettier主要用于格式化代码。可以将ESLint和Prettier结合使用，让代码风格更加统一。
-
忽略特定行或文件： 有时候，某些行或文件不需要ESLint检查。可以使用// eslint-disable-next-line或.eslintignore文件来忽略这些行或文件。
-
保持ESLint配置简单： 尽量保持ESLint配置简单明了。避免使用过于复杂的规则，以免影响代码的可读性和可维护性。
