安装prettier

  1. 编辑器中安装插件

    1. vscode: Ctrl+Shift+X -> 搜索’Prettier’ -> 安装
    2. webstorm: Settings -> Plugins -> 搜索’Prettier’ -> 安装

  2. 编辑器中配置prettier为默认格式化工具

    1. vscode: Ctrl+Shift+P -> 搜索选择’Format Document With’ ->选择’Configure Default Formatter’->选择’Prettier’
    2. webstorm: 点击访问相关文献

  3. 一般使用快捷键手动格式化，或者配置保存自动格式化formatOnSave,

    1. vscode: 在 .vscode/settings.json 文件中添加”editor.formatOnSave”: true
    2. webstorm:
      1. 打开 WebStorm，并在菜单栏中选择「Preferences」（Mac）或「Settings」（Windows / Linux）
      2. 搜索「File Watchers」并选择该选项，在 File Watchers 面板中单击「+」按钮选择「Prettier」。
      3. 在「Program」字段中输入 prettier 的命令路径，通常情况下，你可以输入「prettier」，或者你也可以输入全局安装路径。在「Arguments」字段中写入选项「${file}」，它会将保存的文件传递给 prettier 命令。
      4. 在「Advanced Options」中，将「Auto-save edited files to trigger the watcher」选项打开。

  4. 安装代码依赖

    1
    npm install prettier --save-dev

  5. 简单运行命令，此命令会全局去执行格式化，相当于1,2,3

    1
    npx prettier --write .

  6. package.json中加入通用命令，如果存在第7步就不需要添加此命令

    1
    2
    3
    4
    "scripts": {
      "lint:prettier": "prettier --check  ./src",
      "lint-fix:prettier": "prettier --write  ./src",
    }

  7. 与Linters集成，Linter 通常不仅包含代码质量规则，还包含文体规则。大多数文体规则在使用 Prettier 时都是不必要的，但更糟糕的是——它们可能会与 Prettier 发生冲突，参考 相关文献

    1. 与eslint结合，需要集成eslint-plugin-prettier 和 eslint-config-prettier
      • eslint-config-prettier：把Eslint里和Prettier有冲突的规则关掉
      • eslint-plugin-prettier：会将Prettier里的规则设置到Eslint里面

通过这两个插件的配合，就完成了Eslint和Prettier规则的合并，其中冲突的规则以Prettier里的规则为准。

  1. 与stylelint结合，需要集成stylelint-prettier 和 stylelint-config-prettier
  2. 集成完后配合编辑器的格式化以及eslint的默认行为就能正常使用了，未通过时eslint会报错

配置文件约定

配置文件需要手动添加.prettierrc.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
module.exports = {
  // tab缩进大小,默认为2
  tabWidth: 2,
  // 使用tab缩进，默认false
  useTabs: false,
  // 使用分号, 默认true
  semi: false,
  // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
  singleQuote: true,
  // 行尾逗号,默认none,可选 none|es5|all
  // es5 包括es5中的数组、对象
  // all 包括函数对象等所有可选
  trailingComma: 'es5',
  // 对象中的空格 默认true
  // true: { foo: bar }
  // false: {foo: bar}
  bracketSpacing: true,
  endOfLine: 'auto',
  // 标签闭合位置 默认false
  // false: <div
  //          className=""
  //          style={{}}
  //       >
  // true: <div
  //          className=""
  //          style={{}} >
  bracketSameLine: false,
  // 箭头函数参数括号 默认avoid 可选 avoid| always
  // avoid 能省略括号的时候就省略 例如x => x
  // always 总是有括号
  arrowParens: 'always',
  // JSX中的属性引号
  jsxSingleQuote: true,
  // 是否将html标签的折行标签视为一行
  htmlWhitespaceSensitivity: 'css',
  // 指定自动换行的行长，默认值80。
  printWidth: 100,
  // 对象字面量中属性是否需要添加引号 默认as-needed
  // as-needed:
  // const obj = {
  //   name: 'Alice',
  //   age: 20,
  //   'likes-coffee': true
  // };
  // consistent:
  // const obj = {
  //   'name': 'Alice',
  //   'age': 20,
  //   'likes-coffee': true
  // };
  // preserve 原来是什么就是什么
  quoteProps: 'as-needed',
  // Vue 单文件组件中 <script> 和 <style> 标签中代码缩进方式的一个选项。
  vueIndentScriptAndStyle: true,
}