代码规范配置未生效，解决思路（涵盖 .eslintrc + .prettierrc + settings.json + .editorconfig）

关于代码规范的配置教程，网上已经有很多了，这里主要说一下配置过程中容易踩的坑。

与代码规范相关的配置，总共有四种。除了我们最熟知的 .eslintrc 和 .prettierrc，还有两个鲜少提及：IDE 的 settings.json 和 .editorconfig。通常，配置文件没有生效，就是因为这四种配置互相冲突造成的。

太长不看版

配置文件优先级：.editorconfig > settings.json (Workspace) > settings.json (User) > .eslintrc 和 .prettierrc

详解

一、最常见的 eslint 和 prettier 冲突

eslint 侧重于代码规范，而 prettier 是满足代码规范前提下的格式优化。如果两者冲突，首先肯定是符合规范的，我们只需要让 eslint 对格式的要求按照 prettier 的来就行。
plugin:prettier/recommended 源码

注意：

1. plugin:prettier/recommended 一定要置于 extends 的最后，才不会被其他扩展覆盖。
2. 优先级 rules > extends

.eslintrc.js

module.exports = {
  rules: {},
  extends: [ 
  	// ...
    'plugin:prettier/recommended'
  ], 
};
1
2
3
4
5
6
7

二、prettier 的编辑器配置（以 vscode 为例）

实现编辑器自动整理格式的前提，其一是编辑器安装了 Prettier - Code formatter 插件，其二是编辑器 settings.json 读取了 prettier 配置文件。

1. 编辑器插件【Prettier - Code formatter】

2. 编辑器配置文件【settings.json】

第 3 个红框，User标签下的配置代表对用户（也就是你）的所有项目都生效，Workspace 标签下的配置仅对当前项目生效。

• 建议选择 Workspace，会在项目根目录自动创建 .vscode/settings.json，当然也可以自己手动创建。Workspace 的优先级比 User 高，可以覆盖 User 的同属性配置。
• 同时建议清空 User 标签下的 .vscode/settings.json。对于 Workspace 未定义的配置，会向上查找到 User ，在多人开发的项目里经常会造成每个成员代码格式不一致的困惑。所以要抹平每个人编辑器配置的差异。

以下代码表示，在每次编辑器窗口失焦时自动保存，并使用 esbenp.prettier-vscode 插件整理 .ts .json .js 文件的格式。项目根目录的.prettierrc 即是对 esbenp.prettier-vscode 插件的配置文件。

.vscode\settings.json

{
  "files.autoSave": "onFocusChange",
  "editor.formatOnSave": true,
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode" 
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13

3. prettier 配置文件【.prettierrc】

1. 安装 prettier

   npm install --save-dev --save-exact prettier
   1

2. 项目根目录新建 .prettierrc 文件，编写格式规则。

三、【.editorconfig】

.editorconfig 配置文件用于抹平不同编辑器或系统之间的编码差异，放在项目根目录。最常见的配置之一是 end_of_line = lf，如果用 Windows 和 Mac 混合开发，不统一行尾符会造成 eslint 爆红。

.editorconfig

root = true

[*]
charset = utf-8
end_of_line = lf
indent_size = 4
1
2
3
4
5
6

和 prettier 一样，editorconfig 也需要安装IDE插件，还是以 vscode 为例：
EditorConfig for VS Code

官方文档

本文主要介绍了 Eslint 、Prettier、 IDE settings 、 IDE EditorConfig 四个维度对代码规范配置的影响，和配置冲突的解决思路。每种配置文件的具体写法就不再展开讲了，文档有详细的说明，附送链接：

Eslint
Prettier
Vscode Settings
EditorConfifg

花絮

prettier 和 eslint 的绝大部分冲突，都可以通过以上方式完美解决，除了一条规则：函数声明时，函数名后是否空格。

// eslint: helloWorld 后有空格
function helloWorld (name){
	console.log(`Hello World, my name is ${name}`.)
}
1
2
3
4

// prettier: helloWorld 后无空格
function helloWorld(name){
	console.log(`Hello World, my name is ${name}`.)
}
1
2
3
4

关于这个问题，多年以来 github/prettier 展开过数次激烈交锋，相关 issue 被反复提出又关闭，社区始终没能达成共识。代码要写，瓜也要吃，传送门：
Space after function keyword - MOVED to #3847! #1139
Space after function keyword in anonymous functions #3847
Always add a space after the function keyword #3903