如何在VS Code中启用Prettier实时问题高亮功能？

Prettier 本身只是代码格式化工具，只负责在你触发格式化操作时按规则重排代码，根本不带输入时实时标注格式问题的功能。你看到其他用户截图里的实时下划线/高亮效果，是Prettier和代码校验工具配合实现的，并非安装Prettier扩展后默认自带的能力。

1. 安装必要依赖 #

JS/TS场景下的实时校验核心是ESLint，先在项目中安装ESLint和Prettier的适配包，在项目根目录打开终端执行命令：
npm install -D eslint eslint-config-prettier eslint-plugin-prettier
三个包的作用：

• eslint：代码扫描、问题标记的核心工具
• eslint-config-prettier：关闭ESLint默认规则中与Prettier冲突的格式规则，避免同一个问题出现重复提示
• eslint-plugin-prettier：将Prettier的格式规则转换为ESLint可识别的校验规则，代码不符合Prettier要求时就会触发提示

2. 添加ESLint配置 #

在项目根目录新建.eslintrc.json配置文件，写入基础配置：

{
  "plugins": ["prettier"],
  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "prettier/prettier": "warn"
  }
}

配置里"prettier/prettier": "warn"代表把不符合Prettier规范的问题标记为警告，编辑器会显示黄色下划线，你也可以改成"error"让它显示红色下划线。

3. 配置VS Code侧设置 #

• 先在扩展商店安装ESLint扩展，它和Prettier扩展是独立插件，不要漏装
• 按Ctrl+,（Windows）/Cmd+,（Mac）打开VS Code设置，点击设置页右上角的「打开设置(JSON)」按钮，添加以下配置：

// 指定ESLint需要校验的文件类型
"eslint.validate": [
  "javascript",
  "javascriptreact",
  "typescript",
  "typescriptreact"
],
// 设置输入代码时就触发校验，不用等保存才检查
"eslint.run": "onType",
// 可选：保存文件时自动修复所有可修复的问题（包含Prettier格式问题）
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

4. 生效验证 #

配置完成后按Ctrl+Shift+P/Cmd+Shift+P调出命令面板，执行ESLint: Restart ESLint Server重启ESLint服务，之后在JS文件里输入不符合Prettier规范的代码（比如缩进错误、多余空格、不符合规则的分号），就会实时出现下划线标注。

• 不要只单独打开单个JS文件编辑，需要在VS Code中打开项目根目录，ESLint才能正常读取项目下的配置文件
• 如果出现重复提示，关闭VS Code内置的JS格式校验即可，在设置JSON中添加"javascript.validate.enable": false
• 确保没有同时开启其他格式化插件的校验规则，避免规则冲突

内容的提问来源于stack exchange，提问作者Elliott B