到底如何配置，才能在 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 两个包后，再配合两者一起使用。