【前端工程化】统一代码规范格式化EditorConfig EditorConfig是一个用于统一编辑器配置的插件。它可以

EditorConfig

EditorConfig是一个用于统一编辑器配置的插件。它可以定义一组编辑器配置规则，如缩进、换行符等，并在不同的编辑器中自动应用这些规则。通过使用EditorConfig，可以确保团队成员在不同的编辑器中使用相同的代码风格和配置，从而提高代码的可读性和一致性。

配置文件 .editorconfig

# http://editorconfig.org

# 表示是最顶层的配置文件，发现值为true时，才会停止查找.editorconfig文件
root = true
 
[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行
 
[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false

vscode需安装插件EditorConfig for VS Code

Prettier

Prettier是一个代码格式化工具，它可以自动格式化代码，使其符合统一的代码风格。Prettier支持多种编程语言，并提供了许多可配置的选项，如缩进、换行符、引号样式等。通过使用Prettier，可以减少开发人员在代码格式上花费的时间和精力，并确保团队成员之间的代码风格一致。

1. 安装prettier依赖

npm install prettier -D

2. 配置.prittierrc文件

useTabs: tab缩进还是空格缩进，false为空格缩进
tabWidth: tab表示几个空格
printWidth: 一行字符最大的长度
semi: 行尾是否设置分号，false为不设置
singleQuote: 单引号还是双引号，true为单引号
trailingComma: 在多行输入的尾逗号是否添加，none为不添加

{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none"
}

3. 配置.prittierignore文件

/node_modules
/dist

4. vscode安装prettier插件

5. 设置保存自动格式化

打开设置搜索format on save

6. 使用命令格式化所有文件

在package.json中配置

"scripts": {
  "prettier": "prettier --write ."
},

然后就可以执行npm run prettier去格式化所有文件了

ESLint

ESLint是一个JavaScript静态代码分析工具，它可以帮助检查和修复代码中的错误和潜在问题，并强制执行一致的编码规范。ESLint支持自定义规则，并提供了丰富的插件生态系统。通过使用ESLint，可以提高代码质量、减少潜在错误，并促使开发人员遵循统一的编码规范。

1. 安装eslint

npm install eslint -D

2. 初始化eslintrc文件

npx eslint --init

然后会自动生成一个.eslintrc.json文件, 对默认配置稍微进行了修改。

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:vue/vue3-essential",
    "plugin:@typescript-eslint/recommended"
  ],
  "overrides": [],
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "parser": "@typescript-eslint/parser"
  },
  "plugins": ["vue", "@typescript-eslint"],
  "rules": {
    "vue/multi-word-component-names": "off"
  }
}

3. vscode安装eslint插件

冲突解决

eslint规则与prettier规则冲突时，该如何解决？

可以使用插件如"eslint-plugin-prettier"和"eslint-config-prettier"来解决冲突。这些插件可以将Prettier的规则集成到ESLint中，确保两者的规则不会相互冲突。

1. 安装`eslint-plugin-prettier`和`eslint-config-prettier`

npm install eslint-plugin-prettier eslint-config-prettier -D

2. 配置eslintrc文件

"extends": [
  ...
  "plugin:prettier/recommended"
],

总结

这些工具的作用是帮助开发团队统一代码风格和规范，提高代码质量和可读性。它们可以自动格式化代码、检查潜在错误、强制执行编码规范，并提供可配置的选项来满足不同项目和团队的需求。通过使用这些工具，可以减少开发人员在代码格式和规范上的争议，提高团队协作效率，并降低维护成本。

【前端工程化】统一代码规范格式化