「这是我参与2022首次更文挑战的第10天，活动详情查看：2022首次更文挑战」
在一个大型项目中，我们往往都需要通过团队协作去达成我们的目标。由于个人风格不同，当众多开发者一起开发时，难免会遇到代码风格上的问题。代码风格的不同会导致我们Review时不能很好的捕捉具体的变动，尤其是Git提交后，格式的改动会让评审时浪费额外的精力。为了保证不同开发者的代码可读性与美观性，我们需要借助格式化工具来将每个人的代码进行格式化，且保持格式化之后的风格统一。
editorConfig
集成editorconfig配置
EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。
# http://editorconfig.org
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是一个代码格式化工具，它可以支持JS/JSX/TS/Flow/JSON/CSS/LESS等文件格式，它能够解析代码，使用你自己设定的规则来重新打印出格式规范的代码。
使用
- 安装
npm install prettier -D
- 配置
配置.prettierrc文件：
- useTabs：使用tab缩进还是空格缩进，选择false时表示使用空格；
- tabWidth：tab是空格的情况下，是几个空格，选择2个；
- printWidth：当行字符的长度，推荐80；
- singleQuote：使用单引号还是双引号，选择true，使用单引号；
- trailingComma：在多行输入的尾逗号是否添加，设置为
none； - semi：语句末尾是否要加分号，默认值true，选择false表示不加；
- 更多的配置可以查看官方文档
{
"useTabs": false,
"tabWidth": 2,
"printWidth": 80,
"singleQuote": true,
"trailingComma": "none",
"semi": false
}
- 添加忽略文件
/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*
4, 安装插件
每一次格式化样式的时候，我们都需要使用指令的话比较麻烦
所以我们在vscode上安装prettier对应的插件
设置vscode的保存行为，让vscode在保存的时候自动使用prettier进行代码格式化
- 测试
在代码中进行修改后保存查看效果
我们会发现默认情况下，保存的时候，vscode只会使用prettier对当前文件进行代码格式化
并不会对整个代码中的文件进行代码格式化，如果需要对整个代码中的文件进行格式化操作
需要在package.json的script选项中配置如下脚本：
"prettier": "prettier --write ."
eslint
代码规范化在日益庞大的前端多人协作项目中越来越凸显它的价值，eslint是前端代码规范方案中很优秀的代表。它提供了对句法、错误、代码格式的检测能力。
- 生成配置文件，按提示选择对应的场景 即可自动生成对应的eslint配置文件
eslint --init
根据命令提示，完成操作：
-
How would you like to use ESLint? （你想如何使用eslint？）
To check syntax only（
只检查语法检查语法并发现问题） To check syntax and find problems（检查语法并发现问题） To check syntax, find problems, and enforce code style（检查语法，发现问题，并强制代码样式） -
What type of modules does your project use?（您的项目使用什么类型的模块?）
JavaScript modules (import/export) CommonJS (require/exports) None of these
-
Which framework does your project use? （你的项目使用什么框架？）
React Vue.js None of these（
这些中没有任何一个） -
Does your project use TypeScript?（你的项目中使用Typescript吗？）
Yes/No
-
Where does your code run?（你的代码运行在？）
Browser（
浏览器） Node（Node） -
How would you like to define a style for your project?（
你想给你的项目定义什么风格？）Use a popular style guide（
使用一个流行的风格指南） Answer questions about your style（回答你关于风格的问题） Inspect your JavaScript file（检查你的javascript文件） -
Which style guide do you want to follow? （
你想遵循是么样的风格指南？）Airbnb: github.com/airbnb/java… Standard: github.com/standard/st… Google: github.com/google/esli… XO: github.com/xojs/eslint…
-
What format do you want your config file to be in?（
你希望配置文件的格式是什么？）JavaScript YAML JSON
- 和prettier一样，为了方便vscode根据我们所配置的eslint的规则对我们的代码进行检测和修复，我们需要安装eslint在vscode中的插件
3.配置
Eslint 默认只会对工作空间的js文件进行检查，如果想让它检查其他的文件类型需要在vscode的setting.json中配置:
"eslint.validate": [
"javascript",
"javascriptreact",
"vue"
]
解决冲突问题
editorconfig,eslint和prettier都可以解决代码的格式化问题
| 配置 | 说明 |
|---|---|
| editorconfig | 覆盖编辑器的选项，规范化编辑器对于代码的配置和显示 |
| prettier | 在保存的时候对代码进行格式化，主要针对于代码风格问题进行修复 |
| eslint | 在保存的时候对代码进行格式化，主要针对于代码质量问题进行修复 |
eslint虽然可以同时对代码质量问题和代码风格问题进行检测和修复
但是eslint在代码风格问题方面的检测没有prettier全面
如果觉的eslint在代码风格问题方面的检测已经足以满足需求，可以选择不使用prettier
但如果同时使用了eslint和prettier，那么它们在代码风格方面的检测可能会存在冲突
此时我们可以安装对应的插件来解决这个问题
npm i eslint-plugin-prettier eslint-config-prettier -D
module.exports = {
env: {
browser: true,
es2021: true
},
extends: [
'plugin:vue/essential',
'airbnb-base',
'plugin:prettier/recommended' // 添加 prettier 插件 以解决冲突
],
parserOptions: {
ecmaVersion: 12,
parser: '@typescript-eslint/parser',
sourceType: 'module'
},
plugins: ['vue', '@typescript-eslint'],
rules: {
'max-len': ['error', 120],
'vue/no-multiple-template-root': 'off' // 关闭多根节点的校验
}
}
stylelint
stylelint和eslint一样 都是对代码进行校对的工具
stylelint的配置相对比较简单，直接参考文档即可
.stylelintrc.json
{
"extends": [
"stylelint-config-standard",
"stylelint-config-prettier"
]
}
.stylelintignore
node_modules
dist
