HTML项目集成Prettier与ESLint双重质量保障配置

Prettier默认不格式化Vue单文件组件及WXML等文件，需要手动绑定文档选择器；ESLint工具检查内联JavaScript代码必须借助eslint-plugin-html插件；另外，eslint-config-prettier与eslint-plugin-prettier需成对安装且顺序正确；并且，在VSCode编辑器内，还需开启prettier e

Prettier 默认情况下无法格式化 Vue、WXML 等文件，根本原因在于语言 ID 不匹配——必须通过 documentSelectors 手动绑定；ESLint 检查内联 JavaScript 代码时，必须借助 eslint-plugin-html 插件；eslint-config-prettier 与 eslint-plugin-prettier 需要成对安装并按照正确顺序配置；在 VS Code 中，prettier.enable 和语言映射设置缺一不可。这些配置项看似琐碎，但缺少任何一环，编辑器都会在你按下 Ctrl+S 时保持沉默，格式化毫无反应。

HTML项目使用Prettier与ESLint的双重质量保障配置

在 HTML 项目中使用 Prettier 进行格式化，按理说应该很简单，但实际开发中经常遇到“保存后没有反应”“内联 JS 代码未被检查”“Vue 或 WXML 文件中格式化失效”等问题。问题根源不在于工具本身，而在于默认配置根本没有覆盖真实业务场景。

为什么 Prettier 默认只格式化 .html 文件？

Prettier 的 parser 默认只识别 html 这个语言 ID，但 VS Code 在遇到 .vue、.wxml、.astro 等文件时，会自动将其识别为对应的语言类型（比如 vue），而不是 html。这就导致了一个尴尬局面：你按下了保存快捷键，Prettier 却根本收不到任何格式化请求。

首先检查右下角状态栏的语言模式，如果显示的是 Vue 或 WXML，说明语言 ID 没有匹配上。
需要显式配置 prettier.documentSelectors，例如设置为 ["*.vue", "*.wxml", "*.html"]。
对于 .vue 文件，还需要开启 prettier.vueIndentScriptAndStyle: true，否则