setting.json、.eslintrc.json和.prettier.js区分和配置

背景介绍

不知道大家平常有没有遇到过这样的问题，当我们用编辑器的快捷键格式化代码的时候，会导致改变原来项目代码的格式，致使一些格式化的检测发出报错提醒；不得已，我们会去百度，有的让安装插件，有的让在setting.json配置一些东西，还有的会让你在eslinttrc文件中改一改或者更改prettier来解决，虽然最后的结果都是好的，确实解决了问题，但是最后导致的问题就是配置了一些乱七八糟的东西，对于菜鸟来说着实有些迷糊，特此记录一下。

问题

• 快捷键格式化的代码是根据什么来的？
• 编辑器的setting.json中的配置对代码有什么作用？
• editorconfig是什么？它为什么也可以配置代码的格式？
• prettier也可以格式化代码，大家为什么都用它呢，直接setting.json配置不就行了？
• eslint是干什么的？和prettier总是相互冲突，百度完eslint，百度prettier，烦死了。
• 项目中有prettier文件了，那vscode中的prettier-code formatter 又是什么鬼？

区分

总之，对于代码质量及美观，我们会涉及到以下的一些东西：

• 编辑器中的 setting.json 文件
• 项目根目录中的 .editorConfig 文件
• 项目根目录中的 .prettier.js 文件
• 项目根目录中的 .eslintrc.json 文件
• 编辑器中的 prettier 插件

ESLint，Prettier，setting.json 和 EditorConfig 的区别

ESLint： 它会检测你的代码格式和代码质量；但是，eslint最专业的是它的代码质量检测而不是代码格式，虽然它可以进行代码格式的检测。

Prettier： 格式化 代码功能与 ESLint 很像，但它不检查你的代码质量。它在代码格式方面是专业的。

EditorConfig：还记得文章开头的问题嘛？我们的快捷键格式化的代码是根据setting.json 来确定,但是如果项目中配置了editorConfig文件，则会覆盖setting.json的配置。

setting.json：编译器级别的文件，可以在这里配置代码的格式，你的快捷键格式化代码的依据就是这个文件。

娱乐圈般的文件关系

• setting.json 和 editorConfig的关系

快捷键格式化代码就是以 setting.json 的配置为依据的，但是当项目中含有 editorConfig 文件时，会优先依据 editorConfig 的配置来格式化代码

• 编辑器中的 prettier 插件 和 setting.json的关系

这个插件其实就是帮助我们按照prettier配置setting.json的，也就不需要我们一点一点的去配置了，当我们快捷键格式化代码的时候就会按照这个插件prettier规则来进行格式化。

所以，个人觉得格式化代码在setting.json中完全不需要配置

• 编辑器中的 prettier 插件 和 项目根目录中的.prettier.js 文件的关系

编辑器中的 prettier 插件：这个插件其实就是帮助我们把prettier规则配置到setting.json的，也就不需要我们一点一点的去配置了，当我们快捷键格式化代码的时候就会按照这个插件prettier规则来进行格式化。所以，个人觉得格式化代码在setting.json中完全不需要配置，安装这个插件就行了。

.prettier.js：其实它和插件的prettier是一样的，只不过.prettier.js文件是校验检查你代码写的是否符合规范，需要执行命令才能检测。

所以，用快捷键格式化代码之后，就完全符合了.prettier.js的规则，当使用.prettier.js校验的时候就不需要一个一个的去修改了。

• 项目根目录中的.editorConfig 文件 和 项目根目录中的.prettier.js 文件的关系

editorConfig 是编辑器级别，优先级最高的，完全可以设置代码格式，但是我们有了更专业的prettier,个人觉得.editorConfig作用不大，可以设置简单的，通用的即可。

• 项目根目录中的.eslintrc.json 文件 和 项目根目录中的.prettier.js 文件的关系

eslint：专业是代码质量检测，格式是辅助;

.prettier.js：专业是代码格式，不会进行代码质量检测；

所以，我们需要将这两个工具共同使用才能发挥最大的益处。

总结

1. eslint是代码质量检测，虽然支持代码格式检测，但是不专业；防止和prettier冲突，可以通过配置关闭eslint的代码格式检测
2. .prettier.js专业的代码格式检测,代码格式检测可以完全交给它
3. 为了防止我们在运行.prettier.js进行检测的时候出现过多的错误，我们可以在vscode安装prettier插件，对代码进行格式化，这样在进行.prettier.js检测时防止出现错误。
4. 个人觉得：settin.json不需要手动设置格式限制，完全交由prettier插件，editorConfig也不需要设置，只设置几个固定的格式来抹平个编辑器的差距即可。

结尾

这篇文章主要是对项目中几种文件的介绍和区分，后续第二篇会进行简单配置，加深对这几种文件的理解。

能力有限，只能理解到这种程度，如有错误，请大佬多多指正。

参考

setting.json銆�.editorconfig銆�.eslintrc.json鍜�.prettier.js鍖哄垎鍜岄厤缃紙涓€锛� - 鎺橀噾