解决 Eslint 和 Prettier 的冲突
当项目同时使用 Eslint 和 Prettier 时，往往格式化时会有冲突，导致最终格式化效果不对。发现问这个问题的人还不少，所以这里记录一下解决办法，需要的时候发给人看。 其实解决方案很成熟，就是用到两个插件，eslint-config-prettier 和 eslint-plugin-prettier。 当你的项目已经安装了 eslint 和 prettier 后，也有了各自的配置文件后，安装以上两个插件： pnpm add eslint-config-prettier eslint-plugin-prettier -D 然后在你的 eslint 配置文件中的 extends 中最后加上一个 plugin:prettier/recommended： { // ... "extends": [ // 一些别的配置 "eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:vue/vue3-essential", // 将这个添加到最后 "plugin:prettier/recommended" ] } 如果使用的是 vscode 编辑器，注意要安装这两个插件： 同时加上这一段配置，可以在项目中添加配置文件 .vscode/settings.json，文件内容如下： { "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll": "explicit" }, "editor.defaultFormatter": "esbenp.prettier-vscode" } 此时重启编辑器，可以做到完美格式化代码。要注意的是，此时不要在 eslint 配置文件中加上代码风格相关的配置，这样可能又会跟 prettier 冲突。上面的配置可以做到让 eslint 检查代码错误，让 prettier 格式化。所以要改变代码风格，请到 prettier 中修改。