使用Prettier统一团队代码

前言

问题：在日常团队维护中我们总会遇到 A 同事喜欢空格缩进 B 同事喜欢 tab 缩进。随着项目的庞大，代码风格的不统一终究会造成项目代码紊乱，难以维护的局面。

解决方案：针对每位同事的代码风格不一致，为了保证团队统一风格，借用统一的格式化工具 Prettier

插件Prettier

用来做代码格式化，有了Prettier之后，它能去掉原始的代码风格，确保团队的代码使用统一相同的格式，用官网的原话是"Building and enforcing a style guide"。它和Linter系列比如ESLint的区别在于Prettier是一个专注于代码格式化的工具，对代码不做质量检查。

安装使用步骤

第一步：vscode下载插件prettier

第二步：进入vscode的设置界面，mac快捷键shift+command+p，window快捷键shift+ctrl+p，输入open user settings，选择这个

第三步：在设置界面搜索，输入format on save，然后选择format on save

第四步：再设置界面搜索，输入default formatter，选择prettier-vscode

问题：

如果没有esbenp.prettier-vscode 这个下拉选项怎么办？

解决方案：

手动打开setting.json文件

在json中添加以下代码：

  // 使能每一种语言默认格式化规则
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

第五步: 配置.prettierrc.json 在项目根目录下建立 .prettierrc.json 并将以下代码填入

.prettierrc.json

{
    "printWidth": 100, 
    "tabWidth": 2,
    "singleQuote": true, 
    "trailingComma": "none",
    "bracketSpacing": true, 
    "jsxBracketSameLine": true, 
    "parser": "babel", 
    "semi": true, 
    "useTabs": true, 
    "arrowParens": "avoid", 
    "jsxSingleQuote": true,
    "htmlWhitespaceSensitivity": "ignore",
    "quoteProps": "as-needed" 
}

经过上述配置，就可以愉快的玩耍了，保存自动格式化代码

配置参考

大家可能对详细的配置还不是特别了解，或者需要自己按需配置一些东西，下面我给大家整理了常见的配置项和意义

配置项	意义	配置值说明
Print Width	换行的宽度，其实对于现在普遍的宽屏显示器可以适当调高。	80
Tab Width	Tab字符的空格宽度。	2
Tabs	缩进用Tab还是用空格。	false
Semicolons	是否行尾自动加上分号。	true
Quotes	是否用单引号替代双引号，JSX会忽略这个配置。	false
Quote Props	对象里的key要不要用引号包裹。	<as-needed\consistent\preserve>
JSX Quotes	JSX里用单引号替代双引号。	false
Trailing Commas	多行情况下，是否加上最后元素的逗号。	<es5\none\all>
Bracket Spacing	对象直接量括号之间是否有空格。	true
JSX Brackets	JSX里多行元素的>是否出现在新的一行。	false
Arrow Function Parentheses	箭头函数的单参数是否用括号包裹。	<always\void>
Range	文件格式化的范围。	0
Parser	指定哪种解析器。	babel、babel-flow...

更多请参考官方API