首先安装ESLint、Prettier、Stylelint插件及项目依赖，然后初始化对应配置文件，接着在VSCode中设置格式化工具并启用保存自动格式化，最后确保各插件启用且配置正确，即可实现代码实时检查与格式化。
为 VSCode 配置代码检查工具能帮助你在编写代码时及时发现错误、规范格式。关键在于安装合适的插件并配置对应的检查工具，比如 ESLint、Prettier、Stylelint 等，具体步骤如下。
安装并配置 ESLint（JavaScript/TypeScript）
ESLint 是最常用的 JavaScript 和 TypeScript 代码检查工具，可以检测语法错误、潜在 bug 和代码风格问题。
- 在 VSCode 扩展市场中搜索并安装 ESLint 插件。
- 在项目根目录初始化 ESLint 配置文件：
npx eslint --init
按提示选择环境、框架、是否使用 TypeScript 等。 - VSCode 会自动读取项目中的 .eslintrc.js 或 .eslintrc.json 配置，并在编辑器中标记问题。
- 确保项目已安装依赖：npm install eslint --save-dev
集成 Prettier 统一代码格式
Prettier 负责代码格式化，可与 ESLint 协同工作，避免风格争议。
- 安装 Prettier - Code formatter 插件。
- 在项目中安装 Prettier：npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev
- 在 .eslintrc 中添加插件和扩展：
"eslint:recommended",
"plugin:prettier/recommended"
]
- 设置默认格式化工具：右键编辑器 -> “格式化文档” -> 选择 Prettier。
- 可在 VSCode 的 settings.json 中启用保存时自动格式化：
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
配置 Stylelint（CSS/SCSS/Less）
如果你的项目包含样式文件，可以用 Stylelint 检查 CSS 语法和风格。
- 安装 Stylelint 插件。
- 安装依赖：npm install stylelint stylelint-config-standard --save-dev
- 创建配置文件 .stylelintrc.json：
"extends": "stylelint-config-standard"
}
- VSCode 会自动对 CSS/SCSS 文件进行高亮提示。
确保设置生效
有些情况下插件不会立即工作，需要手动确认设置。
- 检查 VSCode 的设置中是否启用了相关功能，如“ESLint: Enable”应为 true。
- 确保工作区没有禁用插件。
- 如果使用多根工作区（monorepo），确保每个子项目都有正确的配置文件和依赖。
- 重启 VSCode 或执行“Developer: Reload Window”使配置生效。
基本上就这些。只要正确安装插件、配置检查规则并设置保存自动格式化，VSCode 就能实时帮你保持代码整洁。不复杂但容易忽略细节，尤其是项目级配置和依赖安装。
