解决 VS Code 中某些文件无法自动格式化的问题

问题描述

在 VS Code 中，有些文件（如 pages/blog/ 目录下的文件）保存时无法自动格式化，但其他目录下的文件（如 pages/tech/001try.vue）可以正常格式化。

问题根源

经过排查，发现有两个问题：

1. VS Code 配置禁用了自动格式化

.vscode/settings.json 中：

"editor.formatOnSave": false,  // ❌ 禁用了自动格式化
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": "explicit"  // 只能通过 ESLint 修复
}

问题：仅依赖 ESLint 的样式修复，而 ESLint 对不同文件路径的处理可能不一致。

2. JSON 配置包含注释

{
  "editor.formatOnSave": false,  // 关闭默认格式化
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"  // 只让 ESLint 修复
  }
}

问题：JSON 规范不支持注释，导致配置文件解析可能出问题。

3. ESLint 配置缺乏显式路径匹配

eslint.config.js 没有对 pages/ 和 components/ 目录的显式配置，ESLint FlatConfig 在处理这些动态路由文件时可能出现问题。

解决方案

步骤 1：更新 .vscode/settings.json

删除注释，启用 Prettier 格式化：

{
  "editor.tabSize": 2,
  "editor.detectIndentation": false,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "eslint.useFlatConfig": true,
  "eslint.validate": ["javascript", "typescript", "vue"],
  "eslint.run": "onSave",
  "files.autoSave": "off"
}

关键改动：

• editor.formatOnSave: true —— 启用保存时自动格式化
• editor.defaultFormatter: "esbenp.prettier-vscode" —— 使用 Prettier 作为默认格式化工具
• 为各种文件类型显式指定 Prettier 格式化

步骤 2：更新 eslint.config.js

在现有配置后添加显式的路径匹配规则：

// eslint.config.js
import { createConfigForNuxt } from '@nuxt/eslint-config'

export default createConfigForNuxt({
  features: {
    stylistic: true,
  },
}).append({
  rules: {
    'no-undef': 'off',
    'no-unused-vars': 'off',
  },
}).append({
  files: ['pages/**/*.vue', 'components/**/*.vue'],
  rules: {
    'vue/multi-word-component-names': 'off',
  },
})

改动说明：

• 添加第二个 .append() 块，明确指定 pages/ 和 components/ 目录的规则
• 关闭 vue/multi-word-component-names 规则，支持单词组件名（可选）

步骤 3：重启 ESLint 服务（可选）

在 VS Code 中按 Ctrl+Shift+P，输入 "ESLint: Restart ESLint Server" 重启服务。

验证结果

修改后，所有目录下的 Vue 和 TypeScript 文件在保存时都应该能自动格式化，包括：

• ✅ pages/blog/index.vue
• ✅ pages/blog/tag/[tag].vue
• ✅ pages/blog/[...slug].vue
• ✅ pages/tech/001try.vue
• ✅ components/** /*.vue

总结

推荐：使用 Prettier 作为统一的格式化工具，比单纯依赖 ESLint stylistic 规则更稳定可靠。