语言►nodejs►库►eslint

ESLint中的eslint-config-prettier

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/10/09/ESLint%E4%B8%AD%E7%9A%84eslint-config-prettier/

摘要

本文主要讲述了：

  1. 背景
  2. 作用
  3. 安装
  4. 示例
  5. 备注

正文

背景

考虑这样一种场景

learn_eslint/.prettierrc.yaml

1
useTabs: true

learn_eslint/.eslintrc.yaml

1
2
3
root: true
rules:
  no-tabs: error

若使用Prettier格式化index.js，那么所有的空格缩进都会被替换成tab缩进。但接下来使用ESLint检查index.js时，由于ESLint禁止了tab的使用，因此会报错。

综上所述，必须统一Prettier和ESLint的规则。

作用

关闭 ESLint 中所有可能与 Prettier 冲突的规则。

推荐搭配eslint-plugin-prettier使用。

安装

1
2
3
#!/usr/bin/env bash

npm install --save-dev eslint-config-prettier

示例

learn_eslint/.eslintrc.yaml

1
2
3
root: true
extends:
  - prettier

注意：务必将eslint-config-prettier置于最后

备注

第三方插件

eslint-config-prettier还支持关闭以下的 ESLint 插件中所有可能与 Prettier 冲突的规则：

  • eslint-plugin-react
  • eslint-plugin-vue
  • …

示例：

learn_eslint/.eslintrc.yaml

1
2
3
4
5
6
7
8
9
root: true
extends:
  - plugin:vue/recommended
  - prettier
  - prettier/vue
plugins:
  - prettier
rules:
  prettier/prettier: error

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/10/09/ESLint%E4%B8%AD%E7%9A%84eslint-config-prettier/

本文对你有帮助？请支持我

支付宝
微信