NIU UI

Appearance

基于VS Code插件的项目代码自动格式化 ​

在现代软件开发中，代码风格和一致性是保证代码质量的重要因素之一。传统的项目通常会使用eslint/prettier/lint-staged/husky等工具约束开发人员的代码行为，在保存或者提交时发出警告，但这种方式需要开发人员主动去执行，容易被忽略又不够智能。

而本次文章我们所需要介绍的是基于VS Code插件的项目代码自动格式化，通过配置setting.json文件，关联ESLint和Stylelint的配置文件，在保存代码时自动调整代码格式，从而提高代码的可读性和维护性。

为什么要使用代码格式化工具？ ​

  1. 提高代码可读性：一致的代码风格使得代码更容易阅读和理解。
  2. 减少代码审查时间：统一的代码风格减少了在代码审查过程中对格式问题的关注，开发者可以更多地关注逻辑和功能。
  3. 提高开发效率：自动格式化工具可以在保存时自动调整代码格式，节省手动调整的时间。
  4. 减少错误：自动格式化工具可以检测代码中的错误和潜在问题，帮助开发者避免一些常见的错误。
  5. 保持一致性：自动格式化工具可以强制执行一致的代码风格，避免团队成员之间的风格差异。

在开始之前，请确保已经安装了VS Code，并且在项目中安装了以下插件 ​

ESLint ​

ESLint是一个用于JavaScript代码的静态分析工具，旨在识别和报告代码中的模式，使代码更加一致并避免错误。通过自定义规则，ESLint可以帮助开发者保持一致的代码风格。

TIP

v9版本以上的eslint不再进行样式检查，而是专注于语法检查，不再会和prettier冲突了，样式检查交给stylelint处理

Stylelint ​

Stylelint是一个强大的现代CSS检查工具。它可以帮助我们检查样式代码中的错误，并保持一致的代码风格。

package.json配置 ​

安装eslint相关依赖

  • eslint eslint核心
  • @antfu/eslint-config 热门eslint预设
bash
npm i eslint @antfu/eslint-config --save-dev

安装stylelint相关依赖（sass）

  • stylelint stylelint核心
  • stylelint-config-standard 标准的CSS规则集
  • stylelint-config-standard-scss 标准的Sass/SCSS规则集
  • stylelint-config-standard-vue 标准的Vue规则集
  • stylelint-config-recommended-scss 推荐的Sass/SCSS规则
  • stylelint-config-recess-order CSS属性排序
bash
npm i stylelint stylelint-config-recess-order stylelint-config-recommended-scss stylelint-config-standard stylelint-config-standard-scss stylelint-config-standard-vue --save-dev

安装stylelint相关依赖（less）

  • stylelint stylelint核心
  • @stylistic/stylelint-config stylelint配置预设
  • stylelint-less Less语言支持
  • stylelint-config-standard-less 标准的Less规则集
  • stylelint-config-standard-vue 标准的Vue规则集
  • stylelint-config-recess-order CSS属性排序
bash
npm i stylelint @stylistic/stylelint-config stylelint-config-recess-order stylelint-config-recommended-less stylelint-config-standard-less stylelint-config-standard-vue stylelint-less --save-dev

配置ESLint ​

首先，我们在项目根目录下创建一个eslint.config.mjs文件，并添加以下配置：

javascript
import antfu from '@antfu/eslint-config'

export default antfu(
  {
    rules: {
      'no-console': 'off',
      // 添加自定义的规则
    },
  },
)

配置Stylelint ​

接下来，我们在项目根目录下创建一个.stylelintrc.cjs文件，并添加以下配置：

javascript
// sass
module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-standard-scss',
    'stylelint-config-recess-order',
    'stylelint-config-recommended-scss',
    'stylelint-config-standard-vue',
  ],
}
javascript
// less
module.exports = {
  extends: [
    '@stylistic/stylelint-config',
    'stylelint-config-standard-less',
    'stylelint-config-recommended-less',
    'stylelint-config-standard-vue',
    'stylelint-config-recess-order',
  ],
  plugins: ['stylelint-less'],
}

配置VS Code ​

为了使VS Code在保存时自动格式化代码，我们需要在项目的.vscode文件夹中创建或修改settings.json文件，添加以下配置：

json
{
  "editor.formatOnSave": false, // 禁用VS Code默认的格式化功能
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit", // 保存时自动修复ESLint问题
    "source.fixAll.stylelint": "explicit" // 保存时自动修复Stylelint问题
  },
  // 配置ESLint和Stylelint的文件类型
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "html",
    "markdown",
    "json",
    "jsonc",
    "yaml"
  ],
  "stylelint.validate": ["css", "less", "scss", "vue", "html"]
}

测试与验证 ​

配置完成后，打开一个项目文件并进行编辑，保存时VS Code应该会自动格式化代码。可以通过引入一些不符合规范的代码来测试自动格式化功能是否正常工作。

总结 ​

通过上述步骤，我们成功配置了VS Code，使其在保存时自动格式化项目中的文件。且配置跟随项目，不会被不同开发人员本地的formatOnSave所影响，能够确保代码的一致性和可读性，从而提高开发效率和代码质量。在实际项目中，也可以根据需要进一步调整和扩展这些配置，以满足特定的需求。

最后更新于：2024-05-28