乐趣区

关于visual-studio-code: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",]
  }
退出移动版