到底如何配置，才能在 vscode 中正常使用 eslint 和 prettier？

缘起

心中一直有个疑惑，添加 --fix 参数后的 eslint 是否能替代 prettier 做为 JavaScript 格式化工具。

凑巧在网上看到一篇文章《到底如何配置，才能在vscode中正常使用eslint和prettier？》，聊了相似的问题。因而，顺着这个思路，我也来讲一说。

定位

• eslint

  The pluggable linting utility for JavaScript and JSX

• prettier

  Prettier is an opinionated code formatter

一个是 lint 工具，一个是格式化工具，二者本各司其职，相得益彰。但恰恰 eslint 有个附属功能也能干格式化的活，因而问题随之而来——同干一件事，规则冲突时，到底该听谁的呢？

举个例子

demo

// .prettierrc
{
  "trailingComma": "all"
}

// code 
var a = [1, 2]

你会惊奇的发现，prettier 并无在数组最后一项以后添加逗号。其实，prettier 的这个配置等价于

.eslintrc.js

{
    rules: {
        'comma-dangle': [2, 'only-multiline'],
    }
}

若是你但愿老是显示尾部的逗号，按照下面配置，那么，冲突已发生

{
    rules: {
        'comma-dangle': [2, 'always'],
    }
}

prettier-eslint

vscode 插件 prettier-eslint 的出现，提供了一个思路：

Code ➡️ prettier ➡️ eslint --fix ➡️ Formatted Code

The eslintConfig and prettierOptions can each be provided as an argument. If
the eslintConfig is not provided, then prettier-eslint will look for them
based on the fileName (if no fileName is provided then it uses
process.cwd()). Once prettier-eslint has found the eslintConfig, the
prettierOptions are inferred from the eslintConfig. If some of the
prettierOptions have already been provided, then prettier-eslint will only
infer the remaining options. This inference happens in src/utils.js.

最终以 prettierOptions 的配置优先，所以，结果可能并不符合 eslint 配置的规则。

eslint 能替代 prettier 做为 JavaScript 格式化工具吗？

我认为是能够替代的，有如下几点理由：

1. eslint-config-prettier 与 eslint-plugin-prettier 两个包能够佐证。虽然 eslint-config-prettier 是这么介绍本身的：

   Turns off all rules that are unnecessary or might conflict with Prettier.

2. 另外，可参考 eslint 官方文档 Working with Custom Formatters。

二者都是基于 AST 工做的，因此 eslint 是能够替代 prettier 的。至于，格式化代码性能上表现，因为没有深刻研究，不做讨论。

该如何配置呢？

prettier 的优势也是其缺点——配置简单，而 eslint 的配置相对来讲更复杂。所以，要么单独配置 eslint 完成格式化功能，要么，添加 eslint-config-prettier 与 eslint-plugin-prettier 两个包后，再配合二者一块儿使用。