prettier

# 介绍

eslint主要解决的是代码质量问题，另外一类代码风格问题其实并没有完完全全做完。所以出现了Prettier，Prettier只针对代码格式。

# 安装

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

# 配合eslint使用

# 方式一 plugin+config

eslint-plugin-prettier、eslint-config-prettier一起用

使用eslint-plugin-prettier插件，该插件让prettier的规则加入到eslint中，这样执行eslint --fix时，eslint，prettier的工作都一块做了。
但这样有个问题，代码格式化部分如果prettier规范与eslint规范不一致，这样格式化时候就会有冲突了。这时候要么去改prettier的规则，要么改eslint规则，让两者保持统一，不冲突。
基于冲突的这个问题，prettier出了eslint-config-prettier，可以看下源码：

// /node_modules/eslint-config-prettier/index.js
module.exports = {
  rules: {
    // ...
    "curly": 0,
    "lines-around-comment": 0,
    "max-len": 0,
    "no-confusing-arrow": 0,
    // ...
    "@typescript-eslint/brace-style": "off",
    // ...
    "react/jsx-child-element-spacing": "off",
    // ...
    "standard/array-bracket-even-spacing": "off",
    "standard/computed-property-even-spacing": "off",
    "standard/object-curly-even-spacing": "off",
    // ...
    "vue/html-closing-bracket-newline": "off",
    "vue/html-closing-bracket-spacing": "off",
    // ...
  },
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

可以看到eslint-config-prettier实际就是把所有eslint跟格式相关的规范全部禁掉了，vue、react、typescript等格式相关的规则都包含在其中。
所以引入eslint-config-prettier时,要放在extends配置项最下面，否则起不到覆盖作用。因为我们要将报错来源都统一为eslint，只让prettier去格式化代码，但eslint-plugin-prettier插件内置也有检查逻辑，会配合prettier配置的规范去检查。这样报错来源就会是prettier。

上面这个错误来源于网图，但还不清楚为什么会报这样的错误，eslint-config-prettier中也没有prettier开头的rule，所以对上面的错误有以下猜想：

没有引入eslint-config-prettier或放的位置不对，导致没有覆盖eslint规范，与eslint起了冲突。
eslint-config-prettier之前有prettier开头的rule现在新版本没有了。总之，我们检查代码只需要eslint就够了，prettier只用来格式化，对代码进行美化，所以做以下配置即可：
"prettier/prettier": "error" 禁用掉所有的prettier检查

module.exports = {
  env: {
    // ...
  },
  extends: [
    'plugin:vue/essential',
    'standard',
    'prettier'
  ],
  plugins: [
    'prettier'
  ],
  rules: {
    "prettier/prettier": "error"
  }
}

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

上面是之前的写法，现在eslint-plugin-prettier中的configs中有了recommended规则集 20220831200142_kd6wQa
其实可以简化一下，直接 extend 一下 plugin:prettier/recommended,就相当于上面的写法了

module.exports = {
  env: {
    // ...
  },
  extends: [
    'plugin:vue/essential',
    'standard',
    'plugin:prettier/recommended' // 主要在这里,recommended
  ]
}

1
2
3
4
5
6
7
8
9
10

# 方式二 config

只使用eslint-config-prettier

module.exports = {
  env: {
    // ...
  },
  extends: [
    'plugin:vue/essential',
    'standard',
    'prettier' // 主要在这里,recommended
  ],
  plugins: [],
  rules: {}
}

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

这种方式prettier把eslint与格式相关的规则全部禁止掉了

eslint --fix 只负责检查代码质量
prettier --write 只负责美化代码进行格式化

# 对比

方式一：eslint-plugin-prettier、eslint-config-prettie一起用，将prettier、eslint都整合到了一起，只执行一个命令eslint --fix就可以。
方式二：只用eslint-config-prettier，eslint、prettier各司其职。
两种方式虽然都能达到效果，但个人感觉方式二各司其职要更清晰，方式一有点乱。目前开源社区也是采用方式二的项目，更多一些。

# 配置

创建.prettierrc配置,下面是element-plus配置

{
  "semi": false,
  "singleQuote": true,
  "overrides": [
    {
      "files": ".prettierrc",
      "options": {
        "parser": "json"
      }
    }
  ]
}

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

执行npx prettier --write src，无报错，配置成功

# 规则

官方 (opens new window)
20200714200503297_ouA6QQ 20200714200719391_aUjIqT

# 参考

搞懂 ESLint 和 Prettier (opens new window)

编辑

上次更新: 2022/09/04

← eslint lint-staged→