答案：配置VSCode需安装ESLint和Prettier扩展，项目中安装eslint、prettier及相关插件，通过.eslintrc.js和.prettierrc.js定义规则，并在.vscode/settings.json中设置保存时自动格式化，确保editor.formatOnSave为true且defaultFormatter指向Prettier，同时启用codeActionsOnSave修复ESLint问题，利用eslint-config-prettier禁用冲突规则，eslint-plugin-prettier将Prettier集成进ESLint检查，通过overrides实现不同文件类型定制化规则，优先级上以Prettier格式为准，ESLint负责质量检查，避免规则冲突。
配置 VSCode 来无缝衔接 ESLint 和 Prettier 进行代码检查和格式化，核心在于正确安装必要的扩展和项目依赖，然后通过 VSCode 的工作区设置以及项目根目录下的配置文件来统一代码规范。这能确保你的代码在保存时自动进行格式化，并实时提示潜在的语法或风格问题，极大提升开发效率和团队协作质量。
解决方案
要让 VSCode 愉快地与 ESLint 和 Prettier 协同工作，你需要做几件事。这可不是简单地装上扩展就完事，背后还有些配置的小心思。
首先，在 VSCode 里安装两个关键扩展：
ESLint (作者: Dirk Baeumer): 这个扩展是让 ESLint 活起来的基础。Prettier – Code formatter (作者: Esben Petersen): 这是 Prettier 在 VSCode 中的官方支持，负责格式化。
接着，在你的项目里安装必要的开发依赖。打开终端，进入项目根目录，然后运行：
npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier# 或者使用 yarnyarn add --dev eslint prettier eslint-config-prettier eslint-plugin-prettier
这里面
eslint-config-prettier
和
eslint-plugin-prettier
是重头戏。
eslint-config-prettier
负责禁用那些可能与 Prettier 冲突的 ESLint 格式化规则，避免两者打架。而
eslint-plugin-prettier
则是把 Prettier 的格式化能力集成到 ESLint 的规则中，这样 ESLint 就能报告 Prettier 认为不符合规范的地方，然后通过 ESLint 的自动修复来解决。
然后，你需要配置 ESLint 和 Prettier。
ESLint 配置 (
.eslintrc.js
或
.eslintrc.json
):在项目根目录创建或修改
.eslintrc.js
（我个人偏爱 JS 格式，灵活性高）：
module.exports = { env: { browser: true, es2021: true, node: true, }, extends: [ 'eslint:recommended', 'plugin:react/recommended', // 如果是 React 项目 'plugin:@typescript-eslint/recommended', // 如果是 TypeScript 项目 'prettier', // 确保这个在最后，禁用冲突的 ESLint 规则 'plugin:prettier/recommended', // 确保这个在最后，将 Prettier 规则作为 ESLint 规则 ], parser: '@typescript-eslint/parser', // 如果是 TypeScript 项目 parserOptions: { ecmaFeatures: { jsx: true, }, ecmaVersion: 12, sourceType: 'module', }, plugins: [ 'react', // 如果是 React 项目 '@typescript-eslint', // 如果是 TypeScript 项目 'prettier', // 启用 Prettier 插件 ], rules: { // 你可以在这里添加或覆盖 ESLint 规则 'prettier/prettier': 'error', // 将 Prettier 格式化问题视为错误 'indent': ['error', 2], // 示例：强制缩进为2个空格 'linebreak-style': ['error', 'unix'], 'quotes': ['error', 'single'], 'semi': ['error', 'always'], // 其他自定义规则... }, settings: { react: { version: 'detect', // 如果是 React 项目 }, },};
Prettier 配置 (
.prettierrc.js
或
.prettierrc.json
):在项目根目录创建或修改
.prettierrc.js
：
module.exports = { semi: true, // 行末是否加分号 singleQuote: true, // 使用单引号 printWidth: 100, // 每行代码最大长度 tabWidth: 2, // 缩进宽度 trailingComma: 'es5', // 对象或数组的最后一个元素后是否加逗号 arrowParens: 'always', // 箭头函数参数始终加括号 endOfLine: 'lf', // 保持文件以 LF 结尾，避免跨平台问题 // 其他自定义规则...};
最后，也是最关键的一步，配置 VSCode 的工作区设置 (
.vscode/settings.json
)。在项目根目录创建一个
.vscode
文件夹，并在其中创建
settings.json
文件：
{ "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true, "source.organizeImports": true // 比如，自动排序导入 }, "eslint.validate": [ "javascript", "javascriptreact", "typescript", "typescriptreact" ], // 确保 Prettier 插件在所有相关文件类型上都生效 "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[jsonc]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }}
这里
editor.defaultFormatter
设置为 Prettier，
editor.formatOnSave
开启保存时自动格式化。而
editor.codeActionsOnSave
里的
"source.fixAll.eslint": true
则是让 ESLint 在保存时自动修复所有能修复的问题，这其中就包括了
eslint-plugin-prettier
报告的格式问题。这样一来，你保存文件的时候，Prettier 会先格式化，然后 ESLint 再进行一遍修复和检查，确保万无一失。
为什么我的代码保存后没有自动格式化或检查错误？
这问题太常见了，每次帮同事看配置，十有八九都出在这里。别急，我们一步步排查。
首先，最基础的：扩展装了吗？ 确认 VSCode 里 ESLint 和 Prettier 扩展都处于已启用状态。有时候，装了但没启用，或者被其他扩展冲突了。
然后，项目依赖是不是全的？ 回到终端，再跑一遍
npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier
。有时候网络问题或者手滑，少装了某个包，整个链条就断了。特别是
eslint-config-prettier
和
eslint-plugin-prettier
，它们是 ESLint 和 Prettier 和平共处的关键。
接下来，VSCode 的设置对不对？ 仔细检查
.vscode/settings.json
文件。
editor.formatOnSave
必须是
true
。
editor.defaultFormatter
必须是
"esbenp.prettier-vscode"
。
editor.codeActionsOnSave
里
"source.fixAll.eslint": true
也不能少。如果这些配置写在了用户设置（全局设置）里，而项目工作区设置（
.vscode/settings.json
）又覆盖了它们，那以工作区设置为准。确保工作区设置是正确的。
配置文件有没有语法错误？
.eslintrc.js
和
.prettierrc.js
都是 JavaScript 文件，如果里面有语法错误，或者 JSON 文件格式不对，那它们就不会生效。我经常看到有人在 JSON 文件里不小心加了注释或者多余的逗号。
查看 VSCode 的输出面板。 这是排查问题的利器。打开 VSCode 的“输出”面板（View -> Output），在下拉菜单中选择 “ESLint” 或 “Prettier”。这里会显示它们运行时的日志和错误信息。比如，ESLint 可能会告诉你它找不到某个插件，或者某个配置文件解析失败。Prettier 也会告诉你它在格式化时遇到了什么问题。这些日志通常能帮你快速定位问题。
最后，一个比较玄学但有时管用的办法：重启 VSCode。是的，有时候就是这么简单，重启一下，所有的配置和扩展就都重新加载了，问题就解决了。如果还不行，尝试彻底关闭 VSCode，甚至杀掉所有相关的进程，再重新打开。
代码小浣熊
代码小浣熊是基于商汤大语言模型的软件智能研发助手，覆盖软件需求分析、架构设计、代码编写、软件测试等环节
51 查看详情
如何针对不同项目或文件类型定制 ESLint 和 Prettier 规则？
嗯，代码规范这东西，不可能一刀切。不同的项目、不同的文件类型，甚至项目里的不同模块，可能都有自己独特的风格需求。定制化是必须的。
项目级别的定制，最直接的方式就是在每个项目的根目录下创建
.vscode/settings.json
文件。这个文件里的设置会覆盖你的用户（全局）设置，只对当前项目生效。比如，你可能有一个项目使用 2 个空格缩进，而另一个老项目因为历史原因必须用 4 个空格，就可以在各自的
settings.json
中配置
editor.tabSize
。
ESLint 的定制，主要通过
.eslintrc.js
文件中的
overrides
字段来实现。这个字段允许你根据文件路径或 glob 模式，为特定的文件集合应用不同的规则、解析器或插件。
// .eslintrc.js 示例module.exports = { // ... 其他基础配置 overrides: [ { files: ['src/**/*.js', 'src/**/*.jsx'], // 针对 src 目录下的 JS/JSX 文件 rules: { 'no-console': 'warn', // 在 src 文件中，console.log 只是警告 }, }, { files: ['test/**/*.js'], // 针对测试文件 env: { jest: true, // 启用 Jest 全局变量 }, rules: { 'no-undef': 'off', // 测试文件里允许未定义的全局变量（如 describe, it） }, }, { files: ['*.ts', '*.tsx'], // 针对 TypeScript 文件 parserOptions: { project: ['./tsconfig.json'], // 指定 TypeScript 项目文件 }, rules: { '@typescript-eslint/explicit-module-boundary-types': 'off', // 禁用 TS 的某些规则 }, }, ],};
这样一来，你的测试文件可以有更宽松的规则，而生产代码则可以更严格。这就像给你的代码库里的不同部门，制定了不同的行为准则。
Prettier 的定制 也很类似，在
.prettierrc.js
文件中同样有
overrides
选项。
// .prettierrc.js 示例module.exports = { // ... 基础 Prettier 配置 overrides: [ { files: '*.json', // 针对 JSON 文件 options: { tabWidth: 4, // JSON 文件使用 4 个空格缩进 }, }, { files: '*.md', // 针对 Markdown 文件 options: { proseWrap: 'always', // Markdown 文件总是换行 }, }, ],};
你看，JSON 文件可能习惯 4 个空格，Markdown 文件可能需要自动换行以提高可读性，这些都可以通过
overrides
精准控制。
另外，别忘了
.eslintignore
和
.prettierignore
文件。它们的作用是告诉 ESLint 和 Prettier，哪些文件或目录应该被完全忽略，不进行检查或格式化。比如
node_modules/
、
dist/
目录通常都会被忽略。这对于避免处理生成文件或第三方库的代码非常有用。
ESLint 和 Prettier 冲突了怎么办，我该听谁的？
这问题简直是代码规范工具配置中的“哲学”问题。当 ESLint 和 Prettier 出现冲突时，你确实需要明确一个“老大”，否则就会陷入无休止的格式化-修复-格式化循环。我的经验是，Prettier 负责格式化，ESLint 负责代码质量和风格。
核心解决思路是：让 Prettier 说一不二地决定代码的格式，然后让 ESLint 来检查代码质量，同时把 Prettier 的格式规则也当成 ESLint 的一部分规则来检查。
这就是前面提到的
eslint-config-prettier
和
eslint-plugin-prettier
的作用。
eslint-config-prettier
: 它的职责非常明确——关闭所有与 Prettier 冲突的 ESLint 格式化规则。比如，ESLint 可能有一个规则叫
indent
，它会检查缩进，而 Prettier 也有自己的缩进规则。如果不禁用 ESLint 的
indent
规则，两者就会打架。
eslint-config-prettier
就是来做这个“和事佬”的。在
.eslintrc.js
的
extends
数组中，它应该放在所有其他配置的后面，以确保它能覆盖并禁用掉冲突的规则。
eslint-plugin-prettier
: 这个插件则把 Prettier 的格式化结果，作为一条 ESLint 规则来运行。也就是说，如果你的代码不符合 Prettier 的格式，ESLint 就会把它当作一个错误报告出来。这样，你就可以利用 ESLint 的自动修复功能（
source.fixAll.eslint
）来应用 Prettier 的格式化，而不是仅仅依赖 VSCode 的
formatOnSave
。这层封装让格式化错误也能通过 ESLint 的报告机制统一管理。在
.eslintrc.js
的
extends
数组中，
'plugin:prettier/recommended'
也应该放在最后。
如果你发现两者还在冲突，那多半是配置顺序不对，或者你手动添加的某些 ESLint 规则与 Prettier 的默认行为冲突了。
检查
extends
顺序：确保
prettier
和
plugin:prettier/recommended
在
.eslintrc.js
的
extends
数组中是最后两个。检查自定义 ESLint 规则：如果你在
rules
字段里手动设置了像
indent
、
quotes
、
semi
等与格式相关的规则，它们可能会和 Prettier 冲突。在启用了
plugin:prettier/recommended
后，通常就不需要再手动设置这些格式相关的 ESLint 规则了，让 Prettier 全权负责。如果非要设置，那就要非常小心，确保它们和 Prettier 的配置完全一致。
说实话，遇到冲突，我的第一反应是去检查
.eslintrc.js
里的
extends
数组，看看
prettier
相关的是不是在最下面。如果不是，改过来 90% 的问题都能解决。剩下的 10% 可能是你项目里有一些比较特殊的 ESLint 规则，需要仔细斟酌是否真的有必要，或者能否调整以适应 Prettier 的风格。记住，Prettier 的目标是减少格式化上的争议，让团队把精力放在代码逻辑本身。
以上就是如何配置 VSCode 以无缝衔接 ESLint 和 Prettier 进行代码检查和格式化？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/451926.html
微信扫一扫 
支付宝扫一扫 
