prettier

# 基本使用

# 安装

yarn add --dev --exact prettier

# 创建配置文件

让编辑器和其他工具知道您正在使用 Prettier

echo {}> .prettierrc.json

{
    "printWidth": 100,
    "semi": true,
    "vueIndentScriptAndStyle": true,
    "singleQuote": true,
    "trailingComma": "all",
    "proseWrap": "never",
    "htmlWhitespaceSensitivity": "strict",
    "endOfLine": "auto"
}

1
2
3
4
5
6
7
8
9
10
11

# 创建忽略文件

让 Prettier CLI 和编辑器知道哪些文件不能格式化

.prettierignore建立在你的 .gitignore 和 .eslintignore上的

# Ignore artifacts:
build
coverage

/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

1
2
3
4
5
6
7
8
9
10
11
12
13

# 脚本命令

npx不明白的可以看我另一篇文章

格式化: npx prettier --write .(会格式化我们所有的文件,出prettierignore gitignore和eslintignore中的)

我们可以命令加入到script中

// package.json
{
  "script": {
    "lint:prettier": "prettier --write  \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
  }
}

1
2
3
4
5
6

检查: npx prettier --check .(命令行中提示出不合格的文件)

# 进阶使用

# 搭配编辑器使用

以vscode为例

名称: Prettier - Code formatter
ID: esbenp.prettier-vscode
说明: Code formatter using prettier
版本: 9.5.0
发布者: Prettier
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

1
2
3
4
5
6

仓库地址: https://github.com/prettier/prettier-vscode

# 搭配eslint使用

eslint不明白的可以看我另外一篇文章

eslint-plugin-prettier

将 Prettier 作为 ES Lint 规则运行，并将差异报告为单个 ES Lint 问题。

安装:

npm install --save-dev eslint-plugin-prettier
npm install --save-dev --save-exact prettier

1
2

eslint-config-prettier禁用所有与格式化相关的ESLint规则

安装:yarn add eslint-config-prettier -D

配置:

// .eslintrc .eslint.json
{
  "plugins": ["prettier"],
  "extends": ["plugin:prettier/recommended"]
}

1
2
3
4
5

如果不想通过 ES Lint 配置文件将选项传递给 Prettier,你可以单独设置.prettierrc文件, vscode会自动读取

# 结合Git Hooks 使用

githooks不明白的可以看我另外一篇文章

这个功能点就是在代码提交之前重新格式化一遍

安装:npx mrm@2 lint-staged此命令将安装和配置 husky 和 lint -staged 根据项目的 package.json 依赖项中的代码质量工具暂存

{
 "lint-staged": {
      "*.{js,jsx,ts,tsx}": [
          "eslint --fix",
          "prettier --write"
      ],
      "{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": [
          "prettier --write--parser json"
      ],
      "package.json": [
          "prettier --write"
      ]
  } 
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

上次更新: 2022/07/03, 15:02:21

← eslint lint-staged→