Prettier

特点

1. 多语言支持： 支持 JavaScript、TypeScript、CSS、HTML、JSON、Markdown、YAML 等多种编程语言和标记语言。
2. 一致性： 通过自动格式化代码，确保团队中所有成员使用相同的代码风格。
3. 集成编辑器： 提供多种编辑器插件，如 VS Code、Sublime Text、Atom、Vim 等。
4. CLI 工具： 提供命令行工具，可以在项目中批量格式化代码。
5. 配置文件： 支持使用 .prettierrc 文件配置格式化规则，方便项目统一管理。
6. 自动检测： 自动检测文件类型和相应的格式化规则。
7. 代码格式化钩子： 可以与 Git 钩子集成，在提交代码前自动格式化。
8. 格式化忽略： 支持在代码中使用特殊注释忽略某些部分的格式化。
9. 插件扩展： 支持通过插件扩展功能，增加对更多语言和框架的支持。
10. 开源免费： Prettier 是一个开源工具，可以自由使用和贡献。

安装和使用

安装

你可以通过 npm 或 yarn 安装 Prettier：

npm install --save-dev prettier
# 或者使用 yarn
yarn add --dev prettier

基本使用

1. 初始化项目

   在项目根目录下创建一个 .prettierrc 配置文件：

   {
     "semi": true,
     "singleQuote": true,
     "trailingComma": "es5"
   }
   

2. 格式化文件

   通过命令行格式化文件：

   npx prettier --write src/index.js
   # 或者使用 yarn
   yarn prettier --write src/index.js
   

配置文件

Prettier 支持多种配置文件格式，包括 JSON、YAML 和 JavaScript。可以在项目根目录创建 .prettierrc 文件来配置 Prettier：

JSON 格式

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "tabWidth": 2,
  "useTabs": false,
  "printWidth": 80,
  "bracketSpacing": true,
  "jsxSingleQuote": false,
  "arrowParens": "avoid"
}

YAML 格式

semi: true
singleQuote: true
trailingComma: es5
tabWidth: 2
useTabs: false
printWidth: 80
bracketSpacing: true
jsxSingleQuote: false
arrowParens: avoid

JavaScript 格式

module.exports = {
  semi: true,
  singleQuote: true,
  trailingComma: 'es5',
  tabWidth: 2,
  useTabs: false,
  printWidth: 80,
  bracketSpacing: true,
  jsxSingleQuote: false,
  arrowParens: 'avoid',
};

集成到编辑器

VS Code

1. 安装 Prettier 插件：在 VS Code 中搜索并安装 Prettier 插件。

2. 配置自动格式化：在 settings.json 中添加以下配置：

   {
     "editor.formatOnSave": true,
     "prettier.singleQuote": true,
     "prettier.semi": true
   }
   

Sublime Text

1. 安装 Package Control：确保已安装 Package Control 插件。
2. 安装 Prettier：通过 Package Control 安装 Prettier 插件。
3. 配置自动格式化：在 Preferences > Package Settings > Prettier 中进行配置。

Atom

1. 安装 Prettier 插件：在 Atom 中搜索并安装 prettier-atom 插件。
2. 配置自动格式化：在插件设置中启用 Format On Save 选项。

Vim

1. 安装 Prettier 插件：使用 Vim 插件管理工具（如 vim-plug）安装 Prettier 插件。
2. 配置自动格式化：在 .vimrc 文件中添加相关配置。

示例配置

以下是一个更复杂的示例配置，包含多种格式化选项：

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "all",
  "tabWidth": 4,
  "useTabs": false,
  "printWidth": 100,
  "bracketSpacing": true,
  "jsxSingleQuote": true,
  "arrowParens": "always"
}

配置参数说明

好的，这是Prettier所有参数配置的详细说明表格：

参数名称	类型	默认值	描述
printWidth	数字	80	每行最大长度。
tabWidth	数字	2	一个tab相当于的空格数。
useTabs	布尔值	false	是否使用tab代替空格。
semi	布尔值	true	行尾是否加分号。
singleQuote	布尔值	false	使用单引号代替双引号。
quoteProps	字符串	as-needed	对象属性的引号使用策略：as-needed、consistent、preserve。
jsxSingleQuote	布尔值	false	在JSX中使用单引号代替双引号。
trailingComma	字符串	es5	尾随逗号：none、es5、all。
bracketSpacing	布尔值	true	对象文字中括号内前后是否加空格。
jsxBracketSameLine	布尔值	false	在多行JSX元素的最后一个属性之后是否将闭合括号放在同一行。
arrowParens	字符串	always	箭头函数参数使用圆括号：always、avoid。
rangeStart	数字	0	格式化文件时，文件的起始位置。
rangeEnd	数字	Infinity	格式化文件时，文件的结束位置。
parser	字符串	自动检测	指定使用的解析器。
filePath	字符串	none	指定输入文件路径，这将影响解析器推断。
requirePragma	布尔值	false	格式化时是否需要文件顶部的特殊注释。
insertPragma	布尔值	false	是否在文件顶部插入格式化信息的特殊注释。
proseWrap	字符串	preserve	控制Markdown文本的换行方式：always、never、preserve。
htmlWhitespaceSensitivity	字符串	css	HTML文件中空白的敏感度：css、strict、ignore。
vueIndentScriptAndStyle	布尔值	false	是否缩进Vue文件中的script和style标签内容。
endOfLine	字符串	lf	换行符：lf、crlf、cr、auto。
embeddedLanguageFormatting	字符串	auto	控制在Markdown文件中是否格式化嵌入的代码块。

忽略文件或代码块

.prettierignore

你可以在项目根目录创建 .prettierignore 文件，指定不需要格式化的文件或目录。其语法与 .gitignore 类似。

示例：

node_modules/
dist/
build/
*.min.js

特殊注释

你可以在代码中使用特殊注释来忽略特定代码块的格式化。

忽略代码块

// prettier-ignore
const example = {unformatted: true};

Git 钩子集成

可以使用 husky 和 lint-staged 在提交代码前自动格式化：

1. 安装依赖：

   npm install --save-dev husky lint-staged
   

2. 配置 package.json：

   {
     "husky": {
       "hooks": {
         "pre-commit": "lint-staged"
       }
     },
     "lint-staged": {
       "src/**/*.{js,jsx,ts,tsx}": ["prettier --write"]
     }
   }