webpack详情3

editorconfig

在项目中引入 editorconfig 是为了在多人协作开发中保持代码的风格和一致性。不同的开发者使用不 同的编辑器或IDE ，可能会有不同的缩进（比如有的人喜欢 4 个空格，有的喜欢 2 个空格）、换行符、编码 格式等。甚至相同的编辑器因为开发者自定义配置的不同也会导致不同风格的代码，这会导致代码的可 读性降低，增加代码冲突的可能性，降低了代码的可维护性。

EditorConfig 使不同编辑器可以保持同样的配置。因此，我们得以无需在每次编写新代码时，再

依靠 Prettier 来按照团队约定格式化一遍（出现保存时格式化突然改变的情况） 。当然这需要在

你的 IDE 上安装了必要的 EditorConfig 插件或扩展。

安装 EditorConfig for VS Code

目前主流的编辑器或者 IDE 基本上都有对应的 EditorConfig 插件，有的是内置支持的（比如，

WebStorm 不需要独立安装 EditorConfig 的插件），有的需要独立安装。

需要注意的是，不同的插件对 EditorConfig 属性的支持度不一样，笔者使用的是 VS Code 。

{
"recommendations": ["editorconfig.editorconfig"]
}

为什么要做这个操作？ 假如哪天项目新来一个协同开发的同学，当他拉取取项目，用 vscode 打

开项目的时候，编辑器就会自动提醒他安装这个插件，并将相关的配置做设定。下面的 eslint

和 prettier 插件也是类似

新建 .editorconfig

在根目录新建 .editorconfig 文件：

# https://editorconfig.org
root = true # 设置为true表示根目录，控制配置文件 .editorconfig 是否生效的字段
[*] # 匹配全部文件，匹配除了 `/` 路径分隔符之外的任意字符串
charset = utf-8 # 设置字符编码，取值为 latin1，utf-8，utf-8-bom，
utf-16be 和 utf-16le，当然 utf-8-bom 不推荐使用
end_of_line = lf # 设置使用的换行符，取值为 lf，cr 或者 crlf
indent_size = 2 # 设置缩进的大小，即缩进的列数，当 indexstyle 取值 tab
时，indentsize 会使用 tab_width 的值
indent_style = space # 缩进风格，可选space｜tab
insert_final_newline = true # 设为true表示使文件以一个空白行结尾
trim_trailing_whitespace = true # 删除一行中的前后空格
[*.md] # 匹配全部 .md 文件
trim_trailing_whitespace = false

上面的配置可以规范本项目中文件的缩进风格，和缩进空格数等，会覆盖 vscode 的配置，来达到不同 编辑器中代码默认行为一致的作用。

VS Code 的 EditorConfig 目前支持下列属性：

• indent_style
• indent_size
• tab_width
• end_of_line (on save)
• insert_final_newline (on save)
• trim_trailing_whitespace (on save)

prettier

每个人写代码的风格习惯不一样，比如代码换行，结尾是否带分号，单双引号，缩进等，而且不能只靠口头规范来约束，项目紧急的时候可能会不太注意代码格式，这时候需要有工具来帮我们自动格式化代 码，而prettier就是帮我们做这件事的。

安装 VS Code 插件和 prettier

安装 prettier ：

pnpm i prettier -D

 新建 .prettierrc.js

在根目录下新建 .prettierrc.js 和 .prettierignore 文件：

// .prettierrc.js
module.exports = {
tabWidth: 2, // 一个tab代表几个空格数，默认就是2
useTabs: false, // 是否启用tab取代空格符缩进，.editorconfig设置空格缩进，所以设置为
false
printWidth: 100, // 一行的字符数，如果超过会进行换行
semi: false, // 行尾是否使用分号，默认为true
singleQuote: true, // 字符串是否使用单引号
trailingComma: 'all', // 对象或数组末尾是否添加逗号 none| es5| all
jsxSingleQuote: true, // 在jsx里是否使用单引号，你看着办
bracketSpacing: true, // 对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
arrowParens: 'avoid' // 箭头函数如果只有一个参数则省略括号
}
// .prettierignore
node_modules
dist
env
.gitignore
pnpm-lock.yaml
README.md
src/assets/*
.vscode
public
.github
.husky

配置 .vscode/settings.json

配置前两步后，虽然已经配置 prettier 格式化规则，但还需要让 vscode 来支持保存后触发格式化， 在项目根目录新建 .vscode 文件夹，内部新建 settings.json 文件配置文件，代码如下：

{
"search.exclude": {
"/node_modules": true,
"dist": true,
"pnpm-lock.yaml": true
},
"files.autoSave": "onFocusChange",
"editor.formatOnSave": true,
"editor.formatOnType": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[markdown]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"javascript.validate.enable": false,
}

• 若配置 "prettier.requireConfig": true 则要求根目录下有 Prettier 的配置文件，它会覆
  盖 Prettier 扩展 中的默认配置， 否则保存时不会自动格式化 。
• 若配置 "prettier.requireConfig": false 则不要求根目录下有配置文件，若有的话也会被感

  知到并以配置文件的内容为准。

这些代码的作用是：在编辑后保存 [xxx] 文件时，自动应用 Prettier 进行格式化，以确保代码

风格的一致性。

先配置了忽略哪些文件不进行格式化，又添加了保存代码后触发格式化代码配置，以及各类型文件格式化使用的格式。这一步配置完成后，修改项目代码，把格式打乱，点击保存时就会看到编辑器自动把代 码格式规范化了。

若设置需要配置文件，则必须要求根目录下有配置文件 .prettierrc.js 或 .editorconfig 中的一个

或者两个同时存在，否则代码保存不会进行格式化。

可能你会对上面 .editorconfig 文件作为 Prettier 的配置文件感到疑惑， vscode 的 Prettier 插

件中有关配置文件有这样的一段描述，

• 可以看出Prettier插件获取配置文件有一个优先级： .prettierrc > .editorconfig > vscode默 认配置 。

• 上面的前两者并不是说 .prettierrc 和 .editorconfig 同时存在时，后者的配置内容就被忽
  略，实际的表现：
• .prettierrc.js 和 .editorconfig 同时存在时，二者内容会进行合并，若配置项有冲突，这

  .prettierrc 的优先级更高。

脚本命令检查和修复格式

在 package.json 的 "scripts" 中加入以下脚本命令：

"lint:prettier": "prettier --write --loglevel warn \"src/**/*.
{js,ts,json,tsx,css,less,scss,stylus,html,md}\""

 这段代码是一个脚本命令，用于运行 Prettier <