代码规范化配置

前言：我们在开发的时候发现，可能会遇到明明我只修改了几行代码，但是最后提交的时候发现很多地方被修改；还有时候，我们拉取代码，发现IDE中出现很多警告或报错；其实就是团队内每个人的配置不同导致的（prettier和linters）

ESLint

ESLint 是一个可配置的 JavaScript 检查器。它可以帮助你发现并修复 JavaScript 代码中的问题。问题可以指潜在的运行时漏洞、未使用最佳实践、风格问题等。

vscode 编辑器（可省略）

在 vscode 中安装 eslint 插件
配置 settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 使用 prettier 作用所有文件的默认格式化工具
  "eslint.enable": true, // 开启eslint检查
  "eslint.validate": ["javascript", "typescript", "html", "vue"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "editor.formatOnSave": true, // 保存时自动格式化
  "prettier.requireConfig": true // 要求根目录下有配置文件
}

source.fixAll.eslint 选项值

explicit：保存时触发代码操作
always：保存以及窗口或焦点改变自动保存时触发代码操作。
never：保存时绝不会触发代码操作。与相同false。

项目配置

安装

npm i eslint eslint-config-standard -D

配置文件

.eslintrc
.eslint.config.js
.eslint.config.mjs
.eslint.config.cjs
package.json 中 eslintConfig 配置项

以 .eslintrc 为例：

{
  // 是否是根配置文件
  "root": true,
  "env": { // 配置代码运行的环境。每个环境都会附带一组预设的全局变量
    "browser": true,
    "node": true
  },
  "parserOptions": { // 配置解析器选项
    "ecmaVersion": 2024,
    "sourceType": "module" // 模块解析方式
  },
  "globals": {  // 脚本在执行过程中需要用到的额外全局变量。
    "$": true // "readonly" 只读 | "writable" 可写 | true 可读可写
  },
  "extends": { // 继承配置的规则
    "eslint:recommended", // eslint 官方提供的推荐配置
    "standard" // 社区提供的更全局面的规则集（eslint-config-standard）
  },
  "plugins": { // 第三方插件为 ESLint 定义了额外的规则、环境、配置等

  },
  "rules": {}
}

rules

off 或 0: 关闭规则
warn 或 1: 警告
error 或 2: 错误

命令行

# 语法检测
eslint src/index.js
# 语法检测并尽量修复
eslint src/index.js --fix

Prettier

Prettier 的格式化代码的功能与 ESLint 的非常相似，但是它并不检查代码质量问题。它只是作为一个代码格式化工具（Code Formatter），是 js 特有的格式化工具，里面很多配置项是 js 这门语言特有的规范。对于它原生支持的 JavaScript 而言，它做的非常好。然而，同时它也支持 JSX、Flow、TypeScript、HTML、JSON、CSS 等其他众多语言。

{
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 设置 Prettier 为默认格式化工具
  "editor.formatOnSave": true, // 保存时自动格式化
  "prettier.requireConfig": true // 要求根目录下有配置文件
}

项目配置

.prettierrc
.editorconfig

优先级：.prettierrc > .editorconfig > vscode默认配置。

{
  "printWidth": 80, // 单行长度
  "tabWidth": 2, // 缩紧长度
  "useTabs": false, // 使用空格代替缩进
  "semi": true // 句末使用分号
}

解决 eslint 和 prettier 冲突问题

冲突的根本原因在 eslint 的格式化规则和 prettier 不匹配。那么如果我们让 eslint 只负责代码质量检测，用 prettier 用于代码格式化，已经有较为完善的方案 eslint-config-prettier + eslint-plugin-prettier

eslint-config-prettier 的作用是关闭 eslint 中与 prettier 相互冲突的规则。
eslint-plugin-prettier 的作用是赋予 eslint 用 prettier 格式化代码的能力。安装依赖并修改.eslintrc 文件

{

  "extends": {
    "eslint:recommended",
    "standard",
    "plugin:prettier/recommended"
  },
}

配置

规则集

eslint-config-standard 社区更严格的规则集合
eslint-config-airbnb React 项目中广泛使用
eslint-plugin-prettier/eslint-config-prettier 重置 eslint 中与 prettier 相互冲突的规则
eslint-plugin-import
eslint-plugin-node
eslint-plugin-promise

eslint 和 prettier 规则对照表

eslint	prettier	说明
indent	tabWidth	缩进
semi	semi	分号
singleQuote	singleQuote	单双引号

EditorConfig

EditorConfig 既不检测也不格式化你的代码。它仅仅在开发者团队内部使用的所有 IDE 和编辑器之间定义了一份标准的代码风格指南（提供一个统一的设置和标准，而且通过各个主流编辑器和 IDE 可以自动同步设置，在不同的文件自动更改尾行配置或者是缩进编码等问题）。比如，一个团队主要使用 Sublime Text 和 VSCode，EditorConfig 能够使得它们在单个文件内定义公共的缩进模式（空格或制表符）。

root = true											# 表示最顶层的配置文件，设置true时，停止向上查找

[*]
indent_style = tab 							# 设置缩进为 tab 或 space
charset = utf-8    							# 设置编码，值为latin1、utf-8、utf-8-bom、utf-16be和utf-16le
indent_size = 2    							# 设置缩进所占列数，如果 indent_style 为 tab，则以 tab_width 值作为缩进宽度
end_of_line = lf   							# 设置换行符，值为lf、cr和crlf

[*.md] 													# 表示仅 md 文件适用以下规则
insert_final_newline = false		# 设为 true 表示使文件以一个空白行结尾
trim_trailing_whitespace = true	# 设为 true 表示会去除行尾的空白字符

代码规范化配置

代码规范化配置

ESLint

vscode 编辑器（可省略）

项目配置

rules

命令行

Prettier

项目配置

解决 eslint 和 prettier 冲突问题

配置

EditorConfig

StyleLint

Husky