prettier

基础使用

安装

# 本体
npm i prettier -D
# or 
npm i prettier -g


# 如果配合 eslint
eslint-config-prettier eslint-plugin-prettier -D

初始化

// .prettierrc
{
  "semi": false,
  "tabWidth": 2,
  "trailingComma": "none",
  "singleQuote": true,
  "arrowParens": "avoid"
}

配置文件机制

以下按照优先等级列出配置文件的读取机制：

• 最优先：`package.json文件中添加的"prettier"字段
• 使用JSON或者YAML格式编写的.prettierrc文件
• 使用明确后缀名称
  • .prettierrc.json
  • .prettierrc.yml
  • .prettierrc.yaml
  • .prettierrc.json5
• 使用使用对象形式的配置文件
  • .prettierrc.js、prettier.config.js - 使用：module.exports
  • .prettierrc.mjs、prettier.config.mjs - 使用：export default
  • .prettierrc.cjs、prettier.config.cjs - 使用：module.exports
• .prettierrc.toml配置文件

配合 ESlint

// .eslintrc.js
{
    // 因为安装了 eslint-config-prettier，所以只需填"prettierr"
    extend:"prettierr" 
}

配合Git hooks 格式化代码

如果有些团队成员并没有配置好代码自动格式化的流程，那么未经格式化的代码就会提交到仓库中，因此我们可以通过 git hooks ，在提交时对要提交的代码进行格式化。

安装 husky 和 lint-staged

# 安装依赖
npm install --save-dev husky lint-staged
npx husky install

配置 husky

在 package.json 增加 prepare 脚本：

{
  "scripts": {
+    "prepare": "husky install"
  }
}

然后添加 pre-commit 钩子处理器：

npx husky add .husky/pre-commit "npx lint-staged"

这样在使用 git commit 的时候，就会执行 lint-staged 命令。

配置 lint-staged

lint-staged 这个库可以针对处于 staged 状态的文件执行一些命令。我们在 package.json 中增加以下内容：

{
+    "lint-staged": {
+        "**/*": "prettier --write --ignore-unknown"
+    }
}

这样在执行 npx lint-staged 命令时，lint-staged 就会执行我们设置的 prettier --write --ignore-unknown 命令，对代码进行格式化。

• Prettier 是一个格式化代码的工具，使用它我们就不用花费更多精力去选择什么样的代码风格，只需要按照 Prettier 的规则来就好。
• 只要代码整齐、整洁、可读性好就够了，没有必要纠结于使用何种代码风格。
• 使用 eslint-config-prettier 时配置非常简单，同时比 eslint-plugin-prettier 性能更好。

配置文件

# .prettierrc.yml

# 行的最大字符数
printWidth: 80

# 缩进的空格数
tabWidth: 2

# 使用制表符而不是空格缩进
useTabs: false

# 在语句末尾添加分号
semi: true

# 使用单引号而不是双引号
singleQuote: false

# 行末采用的结束符号
endOfLine: "lf"

# JSX 语法使用单引号
jsxSingleQuote: false

# 组件文件内的 '>' 是否放在结尾还是新建一行
jsxBracketSameLine: true

# 对象的属性是否采用引号括起来
quoteProps: "consistent"

# 数组，对象等尾巴是否添加逗号结尾
trailingComma: "es5"

# 大括号内是否添加空格分离
bracketSpacing: true

# 箭头函数单参数的时候是否添加括号
arrowParens: "avoid"

# 使用的解释器
parser: "babel"

# 注释的头部使用 @prettier/@format
requirePragma: false

# 配合上面使用
insertPragma: false

# 是否缩进 vue 等 <script> and <style> 标签内的代码
vueIndentScriptAndStyle: true

# HTML 空格敏感度
htmlWhitespaceSensitivity: "css"

# 是否开启自动处理内嵌其他语法格式化
embeddedLanguageFormatting: "auto"

# 在数组、对象等结构的最后一个元素或属性之后添加逗号
trailingComma: "all"