代码格式化

应用的技术

editorconfig：更改编辑器的设置
prettier：在格式化时按照设置的格式对代码内容进行格式化
eslint：对 js 或 ts 文件内容的格式进行检查

说明：editorconfig、prettier和eslint发挥作用的方式是不同的，所以最好都设置一下

editorconfig

版本：0.16

vscode编辑器中安装editorconfig for vscode扩展
项目根目录下创建.editorconfig文件，基本内容如下：

root = true

[*]
# 使用空格来缩进
indent_style = space
# 使用2个空格来缩进
indent_size = 2
# 编码格式设置为utf-8
charset = utf-8
# 换行符使用lf
end_of_line = lf
# 文件末尾插入一条空行
insert_final_newline = true
# 移除代码行末尾的多余空格
trim_trailing_whitespace = true

[*.md]
# markdown文件不插入末尾空行
insert_final_newline = false
# markdown文件行末尾不移除多余空格
trim_trailing_whitespace = false

查看官方文档

prettier

版本：2.7.1

vscode编辑器中安装Prettier - Code formatter扩展
安装prettiernpm 包到package.json的devDependencies中
项目根目录下创建.prettierrc.json文件，基本内容如下：

{
    "printWidth": 80,
    "tabWidth": 2,
    "useTabs": false,
    "semi": true,
    "singleQuote": true,
    "quoteProps": "as-needed",
    "trailingComma": "all",
    "bracketSpacing": true,
    "bracketSameLine": true,
    "arrowParens": "avoid",
    "htmlWhitespaceSensitivity": "css",
    "vueIndentScriptAndStyle": false,
    "endOfLine": "lf",
    "embeddedLanguageFormatting": "off",
    "singleAttributePerLine": false
}

查看官方文档
可以配置npm脚本，名为format，命令为prettier --write .，并创建.prettierignore文件来定义不需要格式化的文件

eslint

版本：8.25.0

vscode编辑器中安装Eslint扩展
安装eslint、eslint-config-react-app、eslint-config-prettier与eslint-plugin-prettiernpm 包到package.json的devDependencies中
项目根目录下新建.eslintrc文件并添加以下内容：

{
  "root": true,
  "extends": ["react-app", "plugin:prettier/recommended"],
}

查看官方文档

vscode 编辑器设置（可选）

当使用vscode的vetur或volar扩展时，vue文件的格式化将会默认使用vetur或volar扩展中内置的prettier来完成。这个内置的prettier的版本很可能会与我们安装的prettiernpm 包版本不一致，从而导致一些不可预测的问题

可以通过vscode的配置文件，设置vue文件的格式化通过扩展prettier来完成，而不是通过vetur或volar插件完成

项目根目录下创建.vscode/setting.json文件
在setting.json中添加如下内容：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

如果觉得有必要的话，可以选择将这个配置文件上传到Git仓库

配置项目代码格式规范