首先安装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 协同工作，避免风格争议。

腾讯云AI代码助手

基于混元代码大模型的ai辅助编码工具

98

查看详情

• 安装 Prettier – Code formatter 插件。
• 在项目中安装 Prettier：npm install prettier eslint-config-prettier eslint-plugin-prettier –save-dev
• 在 .eslintrc 中添加插件和扩展：

“extends”: [
“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 就能实时帮你保持代码整洁。不复杂但容易忽略细节，尤其是项目级配置和依赖安装。