VSCode如何设置智能代码审查工作流 VSCode团队代码质量检查的自动化配置

爱谁谁

发布时间：2025-08-01 17:09:01

331人浏览过

来源于php中文网

原创

在vscode中设置智能代码审查工作流需整合静态分析、格式化工具与git钩子；2. 根据语言选择eslint、pylint等静态分析工具并安装配置；3. 使用prettier、black等格式化工具并通过配置文件定义代码风格；4. 在vscode中安装对应插件并在settings.json中启用保存时自动格式化与eslint修复；5. 配置git pre-commit钩子或使用husky与lint-staged实现提交前自动检查与格式化；6. 将eslint和prettier集成到ci/cd流程中确保合并前代码质量；7. 自定义eslint规则可通过修改rules字段设置error/warn/off级别或使用插件与共享配置；8. 大型项目应采用模块化配置、共享配置、.eslintignore忽略无关文件、启用缓存及增量检查提升效率；9. prettier与eslint协同需安装eslint-plugin-prettier和eslint-config-prettier以避免规则冲突；10. 确保"prettier"配置在extends最后以正确覆盖冲突规则，并通过vscode设置实现保存时自动修复与格式化。

VSCode如何设置智能代码审查工作流 VSCode团队代码质量检查的自动化配置

VSCode中设置智能代码审查工作流，核心在于整合静态代码分析工具、代码格式化工具，以及版本控制系统（如Git）的钩子，实现代码提交前的自动检查和格式化。目标是尽早发现并修复代码中的潜在问题，并保持团队代码风格的一致性。

解决方案：

选择合适的静态代码分析工具：

这取决于你使用的编程语言。例如，对于JavaScript/TypeScript，可以选择ESLint；对于Python，可以使用Pylint或flake8；对于Java，可以使用Checkstyle或PMD。这些工具可以检查代码中的潜在错误、不规范的写法、安全漏洞等。

安装：通常可以通过npm、pip或Maven等包管理器安装。例如，使用npm安装ESLint：
```
npm install -D eslint
```

配置静态代码分析工具：

每个工具都有自己的配置文件。例如，ESLint的配置文件是

.eslintrc.js

或

.eslintrc.json

。可以在配置文件中指定要使用的规则、忽略的文件或目录等。

示例

.eslintrc.js

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
};

配置代码格式化工具：

常用的代码格式化工具包括Prettier、black（Python）等。它们可以自动格式化代码，使其符合统一的风格。

安装：
```
npm install -D prettier
```
配置：创建
```
.prettierrc.js
```
或
```
.prettierrc.json
```
文件，指定格式化规则。

示例
```
.prettierrc.js
```
:
```
module.exports = {
    semi: true,
    trailingComma: "all",
    singleQuote: false,
    printWidth: 120,
    tabWidth: 4,
};
```
在VSCode中集成这些工具：

安装相应的VSCode插件，例如ESLint、Prettier等。这些插件可以让你在VSCode中直接运行静态代码分析和格式化工具，并实时显示错误和警告。

在VSCode的
```
settings.json
```
文件中配置这些插件，使其在保存文件时自动运行。
```
{
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact"
    ]
}
```
使用Git钩子自动化代码审查：

Git钩子是在Git版本控制系统的特定事件发生时自动运行的脚本。可以使用
```
pre-commit
```
钩子在代码提交前运行静态代码分析和格式化工具，如果检查失败，则阻止提交。

创建
```
.git/hooks/pre-commit
```
文件（如果不存在），并添加以下内容：
```
#!/bin/sh
echo "Running ESLint..."
npx eslint .

echo "Running Prettier..."
npx prettier --write .

# 如果 ESLint 发现错误，阻止提交
if [ $? -ne 0 ]; then
    echo "ESLint found errors. Please fix them before committing."
    exit 1
fi

# 添加修改后的文件到暂存区
git add .
exit 0
```
确保该文件具有执行权限：
```
chmod +x .git/hooks/pre-commit
```
现在，每次提交代码时，Git都会自动运行ESLint和Prettier。如果ESLint发现错误，提交将被阻止。

配置CI/CD流程：

将静态代码分析和格式化工具集成到CI/CD流程中，可以确保每次代码合并到主分支之前都经过检查。可以使用GitHub Actions、GitLab CI等工具来实现。

示例

.github/workflows/ci.yml

name: CI

on:
    push:
        branches: [main]
    pull_request:
        branches: [main]

jobs:
    build:
        runs-on: ubuntu-latest

        steps:
            - uses: actions/checkout@v3
            - name: Use Node.js 16
              uses: actions/setup-node@v3
              with:
                  node-version: 16
            - name: Install dependencies
              run: npm install
            - name: Run ESLint
              run: npm run lint
            - name: Run Prettier
              run: npm run format

（假设

package.json

中有

lint

和

format

脚本）

ESLint的规则如何自定义？

ESLint的规则可以通过

.eslintrc.js

或

.eslintrc.json

文件进行自定义。可以修改现有的规则，也可以添加自定义规则。关键在于理解 ESLint 的配置结构，以及如何使用插件和共享配置。

修改现有规则：

在
```
rules
```
字段中，可以指定规则的名称和配置。配置可以是以下三种值之一：
- ```
"off"
```
  或
```
0
```
  : 禁用该规则。
- ```
"warn"
```
  或
```
1
```
  : 启用该规则，但将其视为警告。
- ```
"error"
```
  或
```
2
```
  : 启用该规则，并将其视为错误。
例如，要将
```
semi
```
规则设置为警告，可以这样配置：
```
module.exports = {
    "rules": {
        "semi": "warn"
    }
};
```
有些规则还接受更详细的配置，例如：
```
module.exports = {
    "rules": {
        "quotes": ["error", "double", { "avoidEscape": true }]
    }
};
```
这里，
```
quotes
```
规则被设置为错误，并且指定使用双引号，并且避免转义。

使用插件：

ESLint插件可以扩展ESLint的功能，添加新的规则或修改现有规则。要使用插件，首先需要安装它：

npm install -D eslint-plugin-react

然后在

.eslintrc.js

文件中配置插件：

module.exports = {
    "plugins": [
        "react"
    ],
    "rules": {
        "react/jsx-uses-react": "error",
        "react/jsx-uses-vars": "error"
    }
};

这里，

eslint-plugin-react

插件被启用，并且启用了两个规则：

react/jsx-uses-react

和

react/jsx-uses-vars

。

使用共享配置：

共享配置是一组预定义的规则，可以从npm安装并使用。例如，可以使用

eslint-config-airbnb

：

npm install -D eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser

然后在

.eslintrc.js

文件中配置共享配置：

module.exports = {
    "extends": [
        "airbnb",
        "airbnb/hooks"
    ],
    "rules": {
        // 可以覆盖共享配置中的规则
    }
};

extends

字段指定要使用的共享配置。可以指定多个共享配置，后面的配置会覆盖前面的配置。

创建自定义规则：

如果现有的规则无法满足需求，可以创建自定义规则。自定义规则是一个JavaScript模块，它导出一个对象，该对象包含规则的元数据和实现。

规则的元数据包括规则的描述、类型、是否需要修复等。规则的实现是一个函数，它接受一个context对象作为参数，并返回一个对象，该对象包含选择器和对应的处理函数。

例如，创建一个名为

no-console-log

的自定义规则，该规则禁止使用

console.log

：

// my-custom-rules/no-console-log.js
module.exports = {
    meta: {
        type: 'problem',
        docs: {
            description: 'Disallow the use of console.log',
            category: 'Best Practices',
            recommended: 'warn',
        },
        fixable: null,  // 是否可以自动修复
        schema: [], // 没有选项
    },
    create: function(context) {
        return {
            CallExpression(node) {
                if (node.callee.type === 'MemberExpression' &&
                    node.callee.object.type === 'Identifier' &&
                    node.callee.object.name === 'console' &&
                    node.callee.property.type === 'Identifier' &&
                    node.callee.property.name === 'log') {
                    context.report({
                        node: node,
                        message: 'Unexpected console.log statement',
                    });
                }
            },
        };
    }
};

然后在

.eslintrc.js

文件中配置自定义规则：

module.exports = {
    "plugins": [
        "my-custom-rules"
    ],
    "rules": {
        "my-custom-rules/no-console-log": "error"
    },
    "settings": {
        "import/resolver": {
            node: {
                paths: ["src"] // 调整到你的代码路径
            }
        }
    }
};

需要注意的是，需要将自定义规则放在一个单独的目录中，并在

plugins

字段中指定该目录。

如何处理大型项目的ESLint配置？

处理大型项目的ESLint配置，关键在于模块化、可维护性和性能。大型项目通常具有复杂的代码结构和多种技术栈，因此需要一种灵活且可扩展的配置方案。

模块化配置：

将ESLint配置拆分成多个文件，每个文件负责配置一个特定的功能或技术栈。例如，可以创建以下文件：
- ```
.eslintrc.base.js
```
  : 包含所有项目通用的基本配置。
- ```
.eslintrc.react.js
```
  : 包含React相关的配置。
- ```
.eslintrc.typescript.js
```
  : 包含TypeScript相关的配置。
- ```
.eslintrc.node.js
```
  : 包含Node.js相关的配置。
然后在主配置文件
```
.eslintrc.js
```
中，使用
```
extends
```
字段引入这些配置文件：
```
module.exports = {
    "extends": [
        "./.eslintrc.base.js",
        "./.eslintrc.react.js",
        "./.eslintrc.typescript.js",
        "./.eslintrc.node.js"
    ],
    "rules": {
        // 可以覆盖共享配置中的规则
    }
};
```
这种方式可以使配置更加清晰、易于维护，并且可以根据需要选择性地启用或禁用某些配置。

MakeSong
AI音乐生成，生成高质量音乐，仅需30秒的时间

下载
使用共享配置：

使用共享配置可以减少重复配置，并保持团队代码风格的一致性。可以选择一些流行的共享配置，例如
```
eslint-config-airbnb
```
、
```
eslint-config-standard
```
等，也可以创建自己的共享配置，并在团队内部共享。

如果创建了自己的共享配置，可以将它发布到npm上，或者放在一个内部的Git仓库中。
忽略文件和目录：

在大型项目中，通常有一些文件或目录不需要进行ESLint检查，例如第三方库、构建输出目录等。可以使用
```
.eslintignore
```
文件来忽略这些文件和目录。
```
.eslintignore
```
文件的格式与
```
.gitignore
```
文件类似，每行指定一个要忽略的文件或目录。
```
node_modules/
dist/
coverage/
```
缓存：

ESLint的检查过程可能会比较耗时，尤其是在大型项目中。可以使用ESLint的缓存功能来提高检查速度。

ESLint会将检查结果缓存在
```
.eslintcache
```
文件中，下次检查时，如果文件没有发生变化，ESLint会直接使用缓存结果，而不会重新检查。

要启用缓存功能，可以在命令行中使用
```
--cache
```
选项：
```
eslint --cache .
```
或者在
```
.eslintrc.js
```
文件中配置
```
cache
```
选项：
```
module.exports = {
    "cache": true
};
```
增量检查：

只检查自上次提交以来发生变化的文件。可以使用lint-staged工具来实现增量检查。

安装：
```
npm install -D lint-staged
```
配置：

在
```
package.json
```
文件中添加以下配置：
```
{
    "lint-staged": {
        "*.{js,jsx,ts,tsx}": [
            "eslint --fix",
            "prettier --write"
        ]
    }
}
```
然后，在Git的
```
pre-commit
```
钩子中运行
```
lint-staged
```
命令：
```
#!/bin/sh
npx lint-staged
```
逐步迁移：

如果项目已经存在很长时间，并且没有使用ESLint，那么一次性启用所有规则可能会导致大量的错误和警告。可以采用逐步迁移的方式，先启用一些基本的规则，然后逐步增加规则的严格程度。

例如，可以先启用一些代码风格相关的规则，例如
```
semi
```
、
```
quotes
```
等，然后再启用一些代码质量相关的规则，例如
```
no-unused-vars
```
、
```
no-console
```
等。
团队协作：

确保团队成员都使用相同的ESLint配置，可以使用共享配置或将配置文件放在Git仓库中。

可以使用EditorConfig来统一代码风格，例如缩进、换行符等。

定期审查ESLint配置，并根据项目的实际情况进行调整。

Prettier如何与ESLint协同工作？

Prettier和ESLint都是代码质量工具，但它们的功能有所不同。Prettier主要负责代码格式化，而ESLint主要负责代码检查。为了充分利用这两个工具的优点，需要将它们协同工作。

安装必要的依赖：

除了Prettier和ESLint之外，还需要安装
```
eslint-plugin-prettier
```
和
```
eslint-config-prettier
```
。
```
npm install -D prettier eslint eslint-plugin-prettier eslint-config-prettier
```
- ```
eslint-plugin-prettier
```
  ：将Prettier作为ESLint的一个规则运行，可以将Prettier的格式化结果作为ESLint的错误或警告显示出来。
- ```
eslint-config-prettier
```
  ：禁用所有可能与Prettier冲突的ESLint规则，以避免格式化冲突。

配置ESLint：

在

.eslintrc.js

文件中，配置

extends

和

plugins

字段：

module.exports = {
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "prettier" // 确保 "prettier" 在最后
    ],
    "plugins": [
        "prettier",
        "@typescript-eslint"
    ],
    "rules": {
        "prettier/prettier": "error"
    }
};

```
extends
```
字段：
- ```
"eslint:recommended"
```
  ：启用ESLint的推荐规则。
- ```
"plugin:@typescript-eslint/recommended"
```
  ：启用TypeScript ESLint的推荐规则。
- ```
"prettier"
```
  ：禁用所有可能与Prettier冲突的ESLint规则。注意：
  "prettier"
  必须放在最后，以确保它覆盖了之前的配置。
```
plugins
```
字段：
- ```
"prettier"
```
  ：启用
```
eslint-plugin-prettier
```
  插件。
```
rules
```
字段：
- ```
"prettier/prettier": "error"
```
  ：将Prettier的格式化结果作为ESLint的错误显示出来。

配置Prettier：

创建

.prettierrc.js

或

.prettierrc.json

文件，配置Prettier的格式化规则。

module.exports = {
    semi: true,
    trailingComma: "all",
    singleQuote: false,
    printWidth: 120,
    tabWidth: 4,
};

在VSCode中集成：

安装ESLint和Prettier插件，并在

settings.json

文件中配置自动格式化：

{
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact"
    ]
}

运行：

现在，每次保存文件时，VSCode会自动运行Prettier进行格式化，并运行ESLint进行检查。如果Prettier的格式化结果与ESLint的规则冲突，ESLint会显示错误或警告。

可以使用命令行运行ESLint：
```
eslint .
```
ESLint会自动运行Prettier，并将Prettier的格式化结果作为ESLint的错误或警告显示出来。
处理冲突：

如果Prettier和ESLint的规则冲突，需要修改配置，以解决冲突。

通常情况下，应该优先使用Prettier的格式化规则，因为Prettier的格式化规则更加全面和一致。

可以通过修改
```
.eslintrc.js
```
文件，禁用与Prettier冲突的ESLint规则。

例如，如果Prettier使用单引号，而ESLint要求使用双引号，可以禁用ESLint的
```
quotes
```
规则：
```
module.exports = {
    "rules": {
        "quotes": "off"
    }
};
```

Git钩子：

配置Git钩子，在代码提交前自动运行Prettier和ESLint。

可以使用Husky和lint-staged工具来实现Git钩子。

安装：

npm install -D husky lint-staged

配置：

在

package.json

文件中添加以下配置：

{
    "husky": {
        "hooks": {
            "pre-commit": "lint-staged"
        }
    },
    "lint-staged": {
        "*.{js,jsx,ts,tsx}": [
            "eslint --fix",
            "prettier --write"
        ]
    }
}

然后运行：