怎样利用 VSCode 进行自动化代码检查与修复？-VSCode-PHP中文网

怎样利用 VSCode 进行自动化代码检查与修复？

狼影

发布： 2025-09-17 19:29:01

原创

380人浏览过

选择合适的Linter和Formatter并配置VSCode，可实现代码自动检查与修复。通过安装ESLint、Prettier等插件，在settings.json中设置保存时自动格式化和修复，并协调项目配置避免冲突。使用husky和lint-staged集成Git Hooks，确保提交前代码合规。针对大型项目，通过忽略文件、缓存、多进程等方式优化性能。

怎样利用 vscode 进行自动化代码检查与修复？

VSCode 通过插件和配置，可以实现代码的自动化检查与修复，从而提高代码质量和开发效率。关键在于选择合适的 Linter 和 Formatter，并进行适当的配置。

解决方案：

选择合适的 Linter 和 Formatter：
- Linter: Linter 用于静态代码分析，检查代码风格、潜在错误等。常见的 Linter 包括 ESLint (JavaScript/TypeScript), Pylint (Python), RuboCop (Ruby) 等。选择哪个取决于你使用的编程语言。
- Formatter: Formatter 用于自动格式化代码，使其符合统一的代码风格。常见的 Formatter 包括 Prettier (JavaScript/TypeScript/CSS/HTML), Black (Python), gofmt (Go) 等。
安装 VSCode 插件：

在 VSCode 扩展商店中搜索并安装你选择的 Linter 和 Formatter 对应的插件。例如，如果你使用 ESLint 和 Prettier，就安装
```
ESLint
```
登录后复制
和
```
Prettier - Code formatter
```
登录后复制
插件。

配置 Linter 和 Formatter：

配置文件： 大多数 Linter 和 Formatter 都支持配置文件，用于定义代码检查和格式化的规则。例如，ESLint 使用
```
.eslintrc.js
```
登录后复制
或
```
.eslintrc.json
```
登录后复制
，Prettier 使用
```
.prettierrc.js
```
登录后复制
或
```
.prettierrc.json
```
登录后复制
。
VSCode 设置： 在 VSCode 的
```
settings.json
```
登录后复制
文件中配置 Linter 和 Formatter。你可以通过
```
Ctrl + Shift + P
```
登录后复制
(或
```
Cmd + Shift + P
```
登录后复制
on macOS) 打开命令面板，输入
```
settings.json
```
登录后复制
并选择
```
Preferences: Open Settings (JSON)
```
登录后复制
。

下面是一些常用的 VSCode 设置示例：

{
    "editor.formatOnSave": true, // 保存时自动格式化代码
    "editor.defaultFormatter": "esbenp.prettier-vscode", // 设置默认的 Formatter 为 Prettier
    "eslint.validate": [ // 配置 ESLint 检查的文件类型
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact"
    ],
    "eslint.autoFixOnSave": true, // 保存时自动修复 ESLint 发现的问题
    "[javascript]": { // 为 JavaScript 文件设置特定的设置
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": { // 为 TypeScript 文件设置特定的设置
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

登录后复制

使用 Linter 和 Formatter：

配置完成后，VSCode 会自动使用 Linter 和 Formatter 检查和格式化你的代码。你可以在 VSCode 的
```
Problems
```
登录后复制
面板中查看 Linter 发现的问题。保存文件时，Formatter 会自动格式化代码。
自定义规则：

根据你的项目需求，自定义 Linter 和 Formatter 的规则。例如，你可以配置 ESLint 检查特定的代码风格，或者配置 Prettier 使用特定的缩进大小。

如何解决 VSCode 自动格式化与项目配置冲突的问题？

当 VSCode 的自动格式化与项目本身的配置（比如项目已经有

.editorconfig

登录后复制

或特定的 ESLint 规则）冲突时，解决办法通常需要协调 VSCode 的设置，使其与项目配置保持一致。首先，确保 VSCode 安装了 EditorConfig 插件，这个插件能自动读取并应用

.editorconfig

登录后复制

文件中的配置。如果冲突依然存在，检查 VSCode 的

settings.json

登录后复制

，确保其中没有覆盖项目配置的设置。例如，如果项目使用 2 空格缩进，而 VSCode 设置为 4 空格，就需要修改 VSCode 的设置。

此外，一些格式化工具（如 Prettier）可能与 ESLint 的格式化规则冲突。在这种情况下，可以安装

eslint-config-prettier

登录后复制

和

eslint-plugin-prettier

登录后复制

，禁用 ESLint 中与 Prettier 冲突的规则，并让 Prettier 负责代码格式化。

如何在 VSCode 中集成 Git Hooks 进行代码检查？

集成 Git Hooks 可以确保每次提交的代码都通过了 Linter 和 Formatter 的检查。可以使用

husky

登录后复制

和

lint-staged

登录后复制

这两个工具来实现。

安装 husky 和 lint-staged：
```
npm install husky lint-staged --save-dev
```
登录后复制
配置 husky：

在
```
package.json
```
登录后复制
文件中添加以下配置：
```
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write",
      "git add"
    ]
  }
}
```
登录后复制
或者使用以下命令初始化 husky：

Fireflies.ai
自动化会议记录和笔记工具，可以帮助你的团队记录、转录、搜索和分析语音对话。

145

查看详情
```
npx husky install
npm set-script prepare "husky install"
npm run prepare
```
登录后复制
然后在
```
.husky
```
登录后复制
目录下创建
```
pre-commit
```
登录后复制
文件，并添加以下内容：
```
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm run lint-staged
```
登录后复制
确保该文件有执行权限：
```
chmod +x .husky/pre-commit
```
登录后复制
配置 lint-staged：

在
```
lint-staged
```
登录后复制
中配置需要检查的文件类型和执行的命令。例如，上面的配置表示对所有
```
.js
```
登录后复制
,
```
.jsx
```
登录后复制
,
```
.ts
```
登录后复制
,
```
.tsx
```
登录后复制
文件执行
```
eslint --fix
```
登录后复制
和
```
prettier --write
```
登录后复制
命令，并自动将修改后的文件添加到 Git 暂存区。

现在，每次提交代码时，

lint-staged

登录后复制

会自动检查暂存区中的文件，并执行配置的命令。如果检查失败，提交会被阻止。

如何处理大型项目中 Linter 性能问题？

在大型项目中，Linter 的性能可能会成为一个问题，导致检查速度变慢。以下是一些优化 Linter 性能的方法：

使用
```
.eslintignore
```
登录后复制
或
.prettierignore
登录后复制
文件：

排除不需要检查的文件或目录，例如
```
node_modules
```
登录后复制
或
```
dist
```
登录后复制
目录。
配置 Linter 只检查修改过的文件：

使用
```
lint-staged
```
登录后复制
可以只检查暂存区中的文件，从而提高检查速度。
使用缓存：

一些 Linter 插件支持缓存，可以避免重复检查未修改的文件。例如，ESLint 可以使用
```
--cache
```
登录后复制
选项启用缓存。
优化 ESLint 规则：

检查 ESLint 配置文件，删除不必要的或性能较差的规则。
使用多进程：

一些 Linter 插件支持多进程处理，可以利用多核 CPU 提高检查速度。例如，ESLint 可以使用
```
eslint-plugin-parallel
```
登录后复制
插件启用多进程。