VSCode格式化工具与纠错规则配合使用指南-VSCode-PHP中文网

必须禁用eslint格式化功能（"eslint.format.enable": false）、关闭vetur的js/html格式化（"vetur.format.defaultformatter.js/html": "none"）、禁用vscode内置js/html格式器，并为每种语言显式指定"editor.defaultformatter"为prettier，确保其唯一执行格式化。

vscode格式化工具与纠错规则配合使用指南

VSCode 里装了 Prettier、ESLint、Vetur 这些插件，但保存后代码还是报错、格式乱跳、引号分号反复切换——问题不在工具没装，而在它们没被“管住”。核心矛盾是：多个格式化器同时对同一文件生效，且职责没划清。

为什么保存时代码会“闪一下”再变样？

这是多个格式化器串行执行的典型表现。VSCode 检测到一个文件有多个可用格式化器（比如 esbenp.prettier-vscode、dbaeumer.vscode-eslint、vetur），默认按响应速度或启用顺序依次调用。实测中 prettier 通常最慢，但它最后执行，就会覆盖前面的结果——你看到的“闪”，其实是 ESLint 先修了一次，Prettier 紧接着又重排了一次。

必须禁用所有语言的内置格式化器，例如关闭 javascript.format.enable 和 html.format.enable
Vue 项目要额外关掉 Vetur 的 JS/HTML 格式化：在 settings.json 加上 "vetur.format.defaultFormatter.js": "none" 和 "vetur.format.defaultFormatter.html": "none"
确保只有一条路径能触发格式化：要么用 Prettier 做唯一格式化器，要么让 ESLint 只做检查+修复（不参与格式排版）

ESLint 能不能既报错又格式化？

可以，但不该让它干这个活。ESLint 的 source.fixAll.eslint 能修一部分风格问题（比如引号、分号），但它的修复逻辑和 Prettier 的排版规则天然冲突。比如 ESLint 修完是 const a = 1;，Prettier 接着可能改成 const a = 1（无分号），来回拉扯。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

推荐配置：ESLint 只负责静态检查，禁用所有格式类规则，靠 eslint-config-prettier 插件一键清空
在 .eslintrc.js 中明确写：extends: ["eslint:recommended", "prettier"]，后面那个 prettier 就是 eslint-config-prettier
把自动修复留给 Prettier，ESLint 的 editor.codeActionsOnSave 只保留 "source.fixAll.eslint" 用于逻辑错误（如未定义变量），别让它碰样式

如何让 .prettierrc 和 .eslintrc 同时生效又不打架？

它们本就不该“同时生效”于同一操作。正确分工是：.prettierrc 控制“怎么排版”，.eslintrc 控制“哪里写错了”。两者共存的前提是 ESLint 不输出任何格式建议。

.prettierrc 示例（项目根目录）：

{ "semi": false, "singleQuote": true, "printWidth": 100 }

.eslintrc.js 必须含 plugins: ["prettier"] 和 rules: { "prettier/prettier": "error" }，这样 ESLint 会把 Prettier 的排版结果当“标准”，不合就报错，而不是自己去改
VSCode 的 settings.json 中，JavaScript 文件必须指定 "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }，否则 ESLint 可能偷偷接管格式化

Vue 单文件里 HTML/JS/CSS 各自用什么格式化器？

Vetur 默认全包，但这正是冲突源头。Vue 文件本质是三段式（<template></template>、<script></script>、<style></style>），每段应由对应语言的专用格式化器处理，而非 Vetur 一刀切。

<script></script> 部分交给 esbenp.prettier-vscode（配合 .prettierrc）
<template></template> 部分也走 Prettier，但需确认 prettier-plugin-vue 已安装并启用（它让 Prettier 理解 Vue 特有语法）
<style></style> 部分同理，Prettier + prettier-plugin-css 或直接用 stylelint 检查（不格式化）
彻底禁用 Vetur 的格式化能力，只保留其语法高亮和跳转功能