乐趣区

关于visual-studio-code:VSCode-格式化哲学

jiezi

哲学

当咱们说「团队须要对立的代码款式」，大家都没有什么拥护意见；但当问题变为「对立成什么款式？」时，大家的声音就嘈杂了起来。

人们对于特定的编码方式很冲突，没有人喜爱花工夫这样写代码，没人违心承受他人的挑剔。我不心愿任何人再挑剔其他人。

我想写代码，但不想花工夫在格式化上

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",]
  }
退出移动版