HTML怎么做EditorConfig_html EditorConfig编辑器配置【方法】-html教程-PHP中文网

HTML文件应配置EditorConfig的indent_style=space、indent_size=2、end_of_line=lf、charset=utf-8、trim_trailing_whitespace=true、insert_final_newline=true，统一基础格式行为。

html怎么做editorconfig_html editorconfig编辑器配置【方法】

HTML 文件该用哪些 EditorConfig 属性

HTML 文件本身不执行逻辑，但格式混乱会直接影响可读性、diff 可读性，甚至影响某些构建工具（比如 vite-plugin-html 或 html-webpack-plugin）的模板解析。EditorConfig 对 HTML 的控制集中在基础结构层面，不是美化标签嵌套，而是统一换行、缩进、编码这些底层行为。

end_of_line = lf：必须设为 lf，Windows 上编辑 HTML 时若混入 crlf，Git 提交可能触发 warning，CI 构建也可能因行尾不一致失败
indent_style = space 和 indent_size = 2：HTML 普遍采用 2 空格缩进（Vue/React 官方示例、MDN 文档均如此），设成 tab 容易和 JS/TS 配置冲突，且多数 LSP 不识别 tab 缩进的 HTML 嵌套层级
charset = utf-8：HTML5 默认编码，不设此项，VS Code 或 WebStorm 可能 fallback 到系统 locale 编码，中文注释或属性值乱码
避免对 [*.html] 单独设 trim_trailing_whitespace = false：HTML 中行尾空格虽不渲染，但会污染 git diff，也干扰 Prettier 的后续处理

.editorconfig 里写 [.html] 还是 []？

直接写 [*.html] 是常见误区。EditorConfig 的匹配是「自上而下首个命中即生效」，如果你在 [*] 段已定义了 indent_size = 2，再在 [*.html] 里重复写一遍，等于冗余；但如果想给 HTML 单独设不同规则（比如允许超长行），才需要显式声明段落。

多数项目用 [*] 统一覆盖 HTML/JS/CSS/JSON —— 因为它们共享相同的缩进、换行、编码习惯
仅当 HTML 有特殊需求时才拆分，例如：[*.html] 下设 max_line_length = 0（禁用行宽限制），因为 HTML 标签属性常跨多行，硬限制反而破坏可读性
注意顺序：[*.html] 必须写在 [*] 之后，否则会被通配段覆盖，EditorConfig 不会合并配置，只取第一个匹配段的值

VS Code / WebStorm 为什么没生效？

EditorConfig 插件不是开箱即用。VS Code 自 1.80 起内置支持，但默认不启用「保存时自动格式化」；WebStorm 则需手动开启，且优先级低于其内置代码风格设置。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

VS Code：确认已启用 editor.formatOnSave，且在设置中搜索 editor.defaultFormatter，确保 HTML 类型未被强制设为 esbenp.prettier-vscode —— 否则 .editorconfig 的缩进规则会被 Prettier 覆盖
WebStorm：进入 Settings > Editor > Code Style > HTML，勾选 Enable EditorConfig support；同时检查 Settings > Editor > General > Virtual Space 是否关闭，否则缩进光标位置可能错乱
验证是否加载：在 HTML 文件中按 Ctrl+Shift+P（Win）或 Cmd+Shift+P（Mac），输入 EditorConfig: Show Effective Properties，能看到当前文件实际应用的配置项

和 Prettier / ESLint 冲突怎么办

EditorConfig 只管「编辑器行为」，Prettier 管「代码重写」，两者定位不同，但参数重叠（如 indent_size）就会打架。关键不是禁用谁，而是明确分工：

让 .editorconfig 控制「新建行缩进」和「文件末尾换行」这类基础行为 —— 这些是编辑器实时响应的，Prettier 不插手
把标签换行、属性排序、引号风格等交给 prettier.config.js，并在 VS Code 中关掉 editor.formatOnSave，改用 prettier.eslintIntegration 或保存时运行 prettier --write
特别注意 insert_final_newline：如果 .editorconfig 设为 true，但 Prettier 配置里 endOfLine: 'crlf'，保存时会反复添加/删除空行，Git 提交显示大量 ^M

最易被忽略的是 root = true 的位置 —— 如果你在子目录误放了一个 .editorconfig 且没设 root = true，编辑器会继续向上查找，可能加载到父项目的配置，导致 HTML 行为和预期不符。每次加新配置，先用 EditorConfig: Show Effective Properties 确认生效路径。