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

javascript/jquery

浏览数:240

2019-6-29

AD:资源代下载服务

缘起

心中一直有个疑惑,添加 –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

最终结果以 prettier 的为准,但这个结果可能并不符合 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 两个包后,再配合两者一起使用。

作者:siwuxie