EditorConfig 和 Prettier 都是用于代码格式化和风格一致性的工具,但它们有不同的用途和功能。
一、EditorConfig
1.1 用途
EditorConfig 是一个帮助开发者在不同的编辑器和 IDE 之间保持一致的编码风格的工具。它通过一个配置文件 .editorconfig
来定义项目的编码风格规则,例如缩进、换行符、字符集等。
1.2 功能
- 缩进风格: 设置缩进类型(空格或 tab)和宽度。
- 换行符: 定义换行符类型(LF、CRLF、CR)。
- 字符集: 设置文件的字符编码(如 utf-8)。
- 文件末尾的空行: 确保文件末尾有或没有空行。
- 尾随空白: 删除或保留行尾的空白字符。
1.3 配置文件
# 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
二、Prettier
1.1 用途
Prettier 是一个代码格式化工具,专注于自动化代码格式化。它支持多种编程语言,并且可以与各种编辑器和工具集成。Prettier 的主要目的是通过自动格式化代码来确保代码风格的一致性,减少代码审查中的风格争论。
2.2 功能
- 代码格式化: 自动格式化代码,使其符合预定义的风格。
- 支持多种语言: 支持 JavaScript、TypeScript、CSS、HTML、Markdown 等多种语言。
- 可配置性: 可以通过配置文件(如
.prettierrc
)来定制格式化规则。 - 集成: 可以与各种编辑器(如 VSCode、Sublime Text)和构建工具(如 ESLint、Webpack)集成。
2.3 配置文件
- useTabs:使用tab缩进还是空格缩进,选择false;
- tabWidth:tab是空格的情况下,是几个空格,选择2个;
- printWidth:当行字符的长度,推荐80,也有人喜欢100或者120;
- singleQuote:使用单引号还是双引号,选择true,使用单引号;
- trailingComma:在多行输入的尾逗号是否添加,设置为
none
; - semi:语句末尾是否要加分号,默认值true,选择false表示不加;
{
"useTabs": false,
"tabWidth": 2,
"printWidth": 80,
"singleQuote": true,
"trailingComma": "none",
"semi": false
}
2.4 配置忽略
创建.prettierignore
忽略文件:
/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*
三、小结
- EditorConfig: 主要用于在不同的编辑器和 IDE 之间保持一致的基本编码风格(如缩进、换行符)。
- Prettier: 主要用于自动格式化代码,以确保代码风格的一致性,并支持多种编程语言和集成。
- 当同时使用这两个工具时,Prettier 的配置通常会覆盖 EditorConfig 中的相关设置,特别是在代码格式化方面。因此,确保两者的配置一致可以避免潜在的冲突。