真正有效的解法是让 vscode 在保存或新建时自动干预命名逻辑：新建html文件自动补全.html后缀并统一小写连字符风格，重命名时联动更新所有href/src引用，批量修正需结合命令行与eslint校验。
网页文件命名不规范，会导致路径引用错乱、Git 提交混乱、协作时理解成本上升——光靠人工检查和手动改名根本不可持续。真正有效的解法是让 VSCode 在保存或新建时就自动干预命名逻辑，而不是事后补救。
新建 HTML 文件时自动补全 .html 后缀
很多人新建文件后手动敲 .html，结果漏写、多写空格、或误写成 .htm，后续在 src 或 href 中引用时直接 404。VSCode 默认不会强制补全，需靠插件或设置兜底。
- 安装
chtml代码变量命名工具（注意：它不只是变量命名，也覆盖 HTML 文件名生成逻辑） - 新建文件时，输入
index后按Tab，插件会自动补全为index.html，且默认使用小写 + 连字符风格（如user-profile.html） - 若想禁用自动补全，可在
settings.json中设"chtml.autoCompleteHtmlExtension": false - 不依赖插件的备用方案：在
files.associations中配"*.html": "html"，再配合editor.quickSuggestions开启，但无命名规则约束
重命名已有 HTML 文件时同步更新所有引用
手动改 about-us.html → about.html 后，index.html 里的 <a href="about-us.html"></a> 不会变，页面跳转立刻失效。这不是“重命名文件”而是“重构链接关系”。
- 必须启用
Path Intellisense+ESLint（配eslint-plugin-html），二者协同才能扫描并提示未更新的href/src引用 - 右键文件 → “Rename Symbol” 不生效（HTML 不是语言服务器识别的“符号”），得用插件
Auto Rename Tag的延伸能力：它虽主打标签，但开启"auto-rename-tag.updateHref": true后可联动修改a和link标签中的路径 - 更稳妥的做法是：把所有静态路径收口到一个 JS 配置对象里（如
const ROUTES = { about: 'about.html' }），再用ESLint规则校验硬编码路径是否匹配该对象
批量修正项目中已存在的命名不一致问题
接手老项目常遇到 Contact.html、contact-us.html、CONTACT.HTML 混用，大小写、分隔符、后缀全乱。逐个改不仅累，还容易漏。
- 用
vscode-icons先暴露问题：不同命名风格的文件图标颜色/样式会有细微差异，一眼扫出异常项 - 执行终端命令统一处理（推荐在项目根目录运行）：
find . -name "*.html" -not -path "./node_modules/*" | while read f; do mv "$f" "$(dirname "$f")/$(basename "$f" .html | tr '[:upper:]' '[:lower:]' | sed 's/[^a-z0-9]/-/g' | sed 's/-\+/-/g' | sed 's/^-//;s/-$//').html"; done
- 上述命令会把
Contact Us.html→contact-us.html，HOME.HTML→home.html，但不会动index.html或404.html等保留名（需单独白名单保护） - 改完立刻跑一次
ESLint+html-validate，确认所有href已同步，否则 Git 提交后 CI 就报错
真正的难点不在“怎么改名”，而在“改名后谁来保证所有上下文都跟着变”。路径引用、构建配置、CI 脚本、甚至 SEO 的 canonical 标签，都可能藏着隐性依赖。别只盯着文件管理器里那几个名字。
