VSCode 格式化哲学

哲学

当我们说「团队需要统一的代码样式」，大家都没有什么反对意见；但当问题变为「统一成什么样式？」时，大家的声音就嘈杂了起来。

人们对于特定的编码方式很抵触，没有人喜欢花时间这样写代码，没人愿意接受别人的挑剔。我不希望任何人再挑剔其他人。

我想写代码，但不想花时间在格式化上

prettier 的哲学就是，我提出一个方案，大家不要讨论了，就按这个来；opinionated！

关于 eslint 也能格式化代码 ，让我们把 eslint 的规则分为两类：格式规则与代码质量规则：
格式规则例如：要不要加末尾分号，单引号还是双引号、缩进两格还是四格，空格还是 tab 等等
代码质量规则例如：要不要禁用 var、禁止全局变量，以及prefer-promise-reject-errors等等

prettier 只专注于格式规则，而另一部分则需要 eslint 帮助检查
结论：我们采用这样的共识「prettier 负责修代码格式，eslint 负责代码潜在质量问题」。

更多关于为什么使用 prettier ，官网上的 Why Prettier?很值得一看。

实操

正如上文讲到的，请使用 Prettier 格式化代码，使用 eslint 捕获错误！
我们应该把 IDE 的自动修复格式的任务交给 prettier 而不是 eslint，基于这一点，我们应该做两件事：引入并使用 prettier ，禁止 eslint 的格式化（如果有）。

PS： 文本重点是使用 prettier 格式化代码， 而不是使用 eslint 捕获错误，所以不会在后者上多着笔墨。

引入并使用 prettier

安装 vscode 插件

首先，在 vscode 上安装 prettier-vscode，（其他 IDE ，可以查看这篇文档）

设置 prettier 配置文件

在项目根目录下新建 .prettierrc 文件 和 .prettierignore 文件
.prettierignore 文件里写上不需要格式化的文件路径即可
.prettierrc 文件写上配置，

{
  "printWidth": 100,
  "useTabs": false,
  "tabWidth": 2,
  "singleQuote": true,
  "semi": false,
  "trailingComma": "none"
}

全部配置可以在官网看到

常用 prettier 配置

比较常用的配置如下：

• printWidth 编辑器每行的长度，默认80
• tabWidth 制表符tab的宽度，默认值是2
• useTabs 代码缩进是否用制表符tab，默认false
• semi 是否使用分号，默认true，使用分号
• singleQuote 是否使用单引号替代双引号，默认为false

• quoteProps 对象属性的引号使用 默认 as-needed

  • as-needed 仅在需要的时候使用
  • consistent 有一个属性需要引号，就都需要引号
  • preserve 保留用户输入的情况

• JSX Quotes jsx 中使用单引号 默认 false

• trailingComma 末尾逗号 默认 es5

  • none 末尾没有逗号
  • es5 es5有效的地方保留
  • all 在可能的地方都加上逗号

• bracketSpacing 字面量对象括号中的空格，默认true

  • true - Example: { foo: bar }.
  • false - Example: {foo: bar}.

• arrowParens 箭头函数中的括号 默认 always

  • “avoid” -一个参数时，忽略括号. Example: x => x
  • “always” - 一直使用. Example: (x) => x

修改 vscode 工作区设置

.vscode 文件夹下新建 setting.json 文件，写入如下内容（如果文件已存在，新增配置项即可）

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
}

"editor.formatOnSave": true, //开启「保存时格式化代码」
"editor.defaultFormatter": "esbenp.prettier-vscode" 将「默认格式化工具」设置为 prettier；

设置好后，就可以去代码里保存一下，看看代码有没有根据 .prettierrc 的设置完成格式化。

建议团队共享 vscode 的配置文件，所以如果 .gitignore 了这个文件，建议删去 .gitignore 中的 .vscode

可能遇到的的意外

设置完成后，save code 发现未格式化
查看输出面板，看看有没有什么报错，例如
prettier.enable 被设置为了 false

设置完成后，save code 发现格式化的和预期不一致
建议关注是否存在针对某类文件单独设置了格式化工具，如果有的话， 删掉就可以了，例如下面的例子，对 ts 文件使用了其他的格式化工具

 "[typescriptreact]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },

避免 eslint 的格式化冲突（如果同时开启了 eslint 格式化）

请注意： eslint 的格式化会早于 prettier 的格式化！
如果你已经设置了 prettier 的完整配置，需要关闭和 prettier冲突的配置，否则你会在保存时，看到页面鬼畜地闪动，那是因为 eslint 格式化后又被 prettier 格式了回来。

如果存在 eslint 有，但是 prettier 没有的格式化规则，仍可保留 eslint 的格式化

"editor.formatOnSave": true,  //开启「保存时格式化代码」
"editor.defaultFormatter": "esbenp.prettier-vscode" 将「默认格式化工具」设置为 prettier；

// eslint 的格式化会早于 prettier
// 如果有 eslint 独有的规则，仍可保留 eslint 对代码的格式化
 "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

还记得「格式规则例」和「代码质量规则例」吗？
如果eslint 也配置了和 prettier 冲突的格式化规则，请记得关闭 prettier 冲突的。

关闭 eslint 和 prettier 的规则

除了手动关闭冲突的规则外，还可以使用 「eslint-config-prettier」 来避免规则冲突，这一过程中可能会有一些其他问题，所以同时也引入 「eslint-plugin-prettier 」
使用 eslint-plugin-prettier 的原因：感兴趣的同学可以看下文档

注意，eslint-config-prettier 与 eslint-plugin-prettier 对 eslint 的版本有要求，安装的时候会有提示，注意版本兼容问题

yarn add -D --exact prettier
yarn add -D eslint-config-prettier
yarn add -D eslint-plugin-prettier

把 plugin:prettier/recommended 放在 eslintrc 中 extends 数组的最后一位， 这样它能覆盖其他配置。

{
  "extends": ["plugin:prettier/recommended"]
}

注意， rules 的优先级总是高于 extends 的，所以冲突了的 rule 建议删除掉

整合入Git 流程

安装

如果之前「关闭 eslint 和 prettier 的规则」步骤中，你选择手动关闭冲突规则，那么我们还并没有安装过 pretteri 的 npm 包， 因为所有的行为都是插件做的，用不着我们执行 pretteri --write来格式化代码；
但是接下来需要在 git hook 中执行这一命令，所以就需要安装 pretteri 啦。

yarn add -D --exact prettier

此时就可以运行
npx prettier --check .来查看所有的格式问题
npx prettier --write . 来修正所有的格式问题了
然后安装 husky 和 lint-staged

npx mrm@2 lint-staged

mrm 是一个自动化工具。它将根据 package.json 依赖项中的代码质量工具来安装和配置 husky 和 lint-staged
运行完上面的命令后，只需要观察并修改 package.json 里的 lint-staged 即可

"lint-staged": {
    "*.{js,ts,css,vue,json,md}": [
      "prettier --write",
    ]
  }