HOW - 代码风格一致性

@PHARAOH

于 2024-07-24 17:41:42 发布

阅读量248

点赞数 10

文章标签：代码规范代码格式化代码风格前端

本文链接：https://blog.csdn.net/weixin_58540586/article/details/140668570

版权

一、前言

为了保证一个代码仓库在多人开发时保持一致的代码风格，可以采取以下措施：

使用代码格式化工具

Prettier：这是一个广泛使用的代码格式化工具，支持多种编程语言。可以通过配置文件 .prettierrc 来统一团队的代码格式。
ESLint：这不仅是一个代码格式化工具，还是一个代码质量检查工具。通过配置 .eslintrc 文件，可以定义具体的代码风格和质量标准。

配置 Git 钩子

Husky：可以用来在 Git 钩子上运行自定义脚本。例如，可以在 pre-commit 钩子上运行 Prettier 和 ESLint，确保提交的代码符合规范。

代码审查（Code Review）

在合并代码到主分支之前，进行代码审查。确保每个 Pull Request（PR）都经过团队成员的审查，遵循统一的代码风格和最佳实践。

使用 CI/CD 管道

在 CI/CD 管道中集成代码检查和格式化步骤。可以在每次构建时自动运行 Prettier 和 ESLint，确保所有提交的代码都符合规范。

编写并遵循代码风格指南

制定并发布一个团队代码风格指南，详细说明代码书写的规范和要求。所有团队成员都应阅读并遵守该指南。

定期开会讨论代码风格

定期召开团队会议，讨论和调整代码风格指南，确保团队成员都理解并接受这些规范。

配置示例

以下是简单的示例，展示如何配置 Prettier、ESLint 和 Husky：

Prettier 配置（.prettierrc）：

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid"
}

ESLint 配置（.eslintrc.js）：

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: [
    'react',
    '@typescript-eslint',
  ],
  rules: {
    'prettier/prettier': 'error',
    // 添加其他规则
  },
};

Husky 配置（package.json 中）：

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

通过这些措施，可以有效地保证多人开发时代码仓库的一致性和高质量。

二、ESLint 和 Prettier

ESLint 和 Prettier 是 JavaScript 开发中常用的两个工具，它们有不同的用途和侧重点。

以下是它们的区别和各自的特点：

ESLint

目的：代码质量和语法检查

功能：ESLint 主要用于检查代码中的语法错误、潜在问题和风格不一致。它可以发现变量未定义、函数未使用、代码逻辑错误等问题。
规则：ESLint 具有丰富的规则集，可以定制和配置。可以使用内置规则，也可以编写自定义规则。
扩展性：支持插件，可以根据项目需求扩展功能。例如，使用 eslint-plugin-react 来检查 React 代码中的问题，使用 eslint-plugin-vue 来检查 Vue 代码中的问题。
配置：配置文件可以是 .eslintrc 格式的 JSON、YAML 或 JavaScript 文件。可以通过配置来指定规则的开启、关闭和规则的严格程度。

Prettier

目的：代码格式化

功能：Prettier 主要用于统一代码格式，确保代码风格一致。它自动格式化代码，按照指定的风格进行缩进、换行、空格等处理。
规则：Prettier 的规则较少，主要集中在代码风格方面，如缩进、引号、尾逗号等。规则是固定的，目的是减少争论和配置时间。
使用：通常与代码编辑器集成，保存时自动格式化代码。也可以作为命令行工具使用，批量格式化文件。
配置：配置文件可以是 .prettierrc 格式的 JSON、YAML 或 JavaScript 文件。可以通过配置来指定代码风格选项。

合作使用

ESLint 和 Prettier 可以结合使用，以同时实现代码质量检查和代码格式化。通常的做法是：

使用 ESLint 进行代码质量和语法检查。
使用 Prettier 进行代码格式化。
配置 ESLint 使其与 Prettier 兼容，避免冲突。

可以使用 eslint-config-prettier 来关闭 ESLint 中与 Prettier 冲突的规则。

示例：

// .eslintrc.json
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "rules": {
    "prettier/prettier": "error",
    "no-unused-vars": "warn",
    "no-console": "off"
  }
}

使用 plugin:prettier/recommended 可以确保 ESLint 和 Prettier 和谐共存，Prettier 的格式化规则会优先于 ESLint 的格式化规则。

总结

ESLint：用于代码质量和语法检查，发现代码中的潜在问题。
Prettier：用于代码格式化，统一代码风格。
结合使用：可以同时实现代码质量检查和代码格式化，提高代码的一致性和可维护性。

Q：用了 ESLint 还有必要多用一个 Prettier 吗？
A：使用 ESLint 和 Prettier 组合工具可以带来最佳的开发体验，因为它们专注于不同的领域，即使有一些重叠。

具体来说：

职责分离

ESLint：主要用于代码质量和语法检查。它帮助你发现和修复代码中的潜在错误和不一致的编码风格。ESLint 可以配置多种规则，检查代码逻辑、变量使用、错误处理等方面的问题。
Prettier：专注于代码格式化，确保代码风格一致。Prettier 通过一组固定的规则格式化代码，减少了对代码风格的争论和配置时间。

避免冲突：

ESLint 和 Prettier 有一些重叠的规则，例如缩进、引号、行尾逗号等。使用 Prettier 可以统一这些格式化规则，而 ESLint 可以专注于代码质量检查。
使用 eslint-config-prettier 可以关闭 ESLint 中与 Prettier 冲突的规则，确保两者无缝协作。

自动化和开发效率：

通过在编辑器中集成 Prettier，可以在保存时自动格式化代码，无需手动调整格式。
使用 ESLint 可以实时检查代码质量问题，在编写代码时就能发现和修复潜在错误。

三、保存自动格式化

在 Visual Studio Code（VSCode）中，可以通过安装和配置 Prettier 和 ESLint 插件，实现保存文件时自动格式化和代码检查。

以下是具体步骤：

1. 安装必要的扩展

Prettier - Code formatter：Prettier 插件，用于代码格式化。
ESLint：ESLint 插件，用于代码检查。

打开 VSCode，进入扩展市场（Extensions Marketplace），搜索并安装以上两个扩展。

2. 配置项目

首先，确保在你的项目中已经安装了必要的依赖：

npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier

然后，配置 ESLint 和 Prettier。

ESLint 配置示例

// .eslintrc.json
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "rules": {
    "prettier/prettier": "error",
    "no-unused-vars": "warn",
    "no-console": "off"
  }
}

Prettier 配置示例

// .prettierrc.json
{
  "printWidth": 80,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "es5",
  "semi": true
}

3. 配置 VSCode

在 VSCode 的设置中配置保存时自动格式化和使用 ESLint 进行代码检查。

打开设置

通过菜单：File > Preferences > Settings
通过快捷键：Ctrl + ,（Windows/Linux）或 Cmd + ,（Mac）

添加配置

在 VSCode 设置的右上角点击 {} 图标，打开 settings.json 文件，然后添加以下配置：

{
  "editor.formatOnSave": true, // 保存时自动格式化
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 默认格式化工具设为 Prettier
  "eslint.alwaysShowStatus": true, // 总是显示 ESLint 状态
  "eslint.format.enable": true, // 允许 ESLint 进行格式化
  "editor.codeActionsOnSave": {
    "source.fixAll": true, // 保存时自动修复 ESLint 所有能修复的问题
    "source.fixAll.eslint": true // 保存时修复 ESLint 问题
  },
  "prettier.requireConfig": true // 仅在有配置文件时才使用 Prettier
}

4. 检查配置

确保 ESLint 和 Prettier 配置文件无误，可以通过以下命令检查 ESLint 配置：

npx eslint .

确保没有错误，如果有错误，根据错误提示修复。

5. 测试保存功能

打开一个 JavaScript/TypeScript 文件，进行一些代码修改，然后保存文件（Ctrl + S 或 Cmd + S）。如果配置正确，保存时应该会自动格式化代码并修复 ESLint 能自动修复的问题。

总结

通过以上配置，在 VSCode 中可以实现保存文件时自动使用 Prettier 进行格式化，并通过 ESLint 进行代码检查和自动修复。这将极大地提高开发效率，确保代码质量和风格一致。

四、Husky+Lint-Staged：提交前格式化

Husky 简介

Husky 是一个 Git hooks 工具，允许你在 Git 的各个生命周期阶段（如 commit、push 等）运行自定义脚本。结合 Prettier 和 ESLint，可以确保代码在提交前符合格式和质量规范。

Husky 与 Lint-Staged 集成

为了在提交代码前运行 Prettier 和 ESLint，可以结合使用 Husky 和 Lint-Staged。Lint-Staged 可以只对暂存区（staged）的文件运行 lint 和格式化，确保只检查和格式化将要提交的文件。

安装依赖

首先，在项目中安装 Husky 和 Lint-Staged：

npm install --save-dev husky lint-staged

配置 Husky

初始化 Husky：运行以下命令初始化 Husky，这将创建 .husky 目录和 pre-commit 钩子文件。
```
npx husky install
npx husky add .husky/pre-commit "npx lint-staged"
```
在 package.json 中添加 prepare 脚本：确保在克隆仓库后自动设置 Husky 钩子。
```
"scripts": {
  "prepare": "husky install"
}
```

配置 Lint-Staged

在 package.json 中添加 lint-staged 配置，指定在提交前对哪些文件运行哪些命令：

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

完整配置示例

以下是一个完整的 package.json 配置示例，包括 Husky、Lint-Staged、ESLint 和 Prettier：

{
  "name": "your-project",
  "version": "1.0.0",
  "scripts": {
    "prepare": "husky install"
  },
  "devDependencies": {
    "eslint": "^7.32.0",
    "prettier": "^2.3.2",
    "husky": "^7.0.0",
    "lint-staged": "^11.0.0"
  },
  "eslintConfig": {
    "env": {
      "browser": true,
      "es2021": true
    },
    "extends": [
      "eslint:recommended",
      "plugin:prettier/recommended"
    ],
    "parserOptions": {
      "ecmaVersion": 12,
      "sourceType": "module"
    },
    "rules": {
      "prettier/prettier": "error",
      "no-unused-vars": "warn",
      "no-console": "off"
    }
  },
  "prettier": {
    "printWidth": 80,
    "tabWidth": 2,
    "singleQuote": true,
    "trailingComma": "es5",
    "semi": true
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ]
  }
}

工作流程

修改代码：开发者在代码库中进行代码修改。
暂存文件：开发者暂存（git add）需要提交的文件。
提交代码：开发者执行 git commit 命令。
Husky 触发 Lint-Staged：Husky 通过 pre-commit 钩子触发 Lint-Staged，Lint-Staged 对所有暂存文件运行指定的 lint 和格式化命令。
ESLint 和 Prettier：Lint-Staged 使用 ESLint 检查代码质量，并使用 Prettier 格式化代码。
提交完成：如果所有检查和格式化通过，Git 继续完成提交操作。如果有任何问题，提交将被中断，开发者需要修复问题后再提交。

总结

通过 Husky 和 Lint-Staged 的结合，可以在 Git 提交之前确保代码符合 ESLint 和 Prettier 的规范。这种自动化的代码检查和格式化流程有助于保持代码质量一致，减少代码审查时的风格问题，提高团队协作效率。

@PHARAOH

关注

10
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
HOW - 代码风格一致性

ESLint：用于代码质量和语法检查，发现代码中的潜在问题。Prettier：用于代码格式化，统一代码风格。结合使用：可以同时实现代码质量检查和代码格式化，提高代码的一致性和可维护性。Q：用了 ESLint 还有必要多用一个 Prettier 吗？A：使用 ESLint 和 Prettier 组合工具可以带来最佳的开发体验，因为它们专注于不同的领域，即使有一些重叠。职责分离ESLint：主要用于代码质量和语法检查。它帮助你发现和修复代码中的潜在错误和不一致的编码风格。
复制链接

扫一扫