前端统一团队编码风格之Prettier及配置方法

前言

Prettier是vscode中的一个插件格式化代码插件，之前鄙人有在vscode中配置过自己喜欢的编码风格，但同事拿到项目之后那个格式化乱的一批。最近也是接手了同事的项目，决定把编码风格统一下，在同事之间即使跨编辑器也能保持一样的编码风格。可能有些人不知道怎么去操作，就在这里写一下具体操作把，其实真的很简单

第一步

下载Prettier插件，当然了，你的同事也要下载

第二步

在根目录新建.prettierrc.js文件，并且配置格式化风格

// 参考配置
module.exports = {
    "arrowParens": "always",//箭头函数的参数无论有几个，都要括号包裹
    "bracketSameLine": true, //在多行元素的最后一行放置 > 符号，而不是单独一行
    "bracketSpacing": true, //在对象中的括号之间打印空格`{x: 1}` 格式化为 `{ x: 1 }`
    "embeddedLanguageFormatting": "auto",// 是否格式化一些文件中被嵌入的代码片段的风格，如果插件可以识别。
    "htmlWhitespaceSensitivity": "css",// 指定 HTML 文件的全局空白敏感度。影响空白字符是否影响布局。
    "insertPragma": false,// 在文件的顶部插入一个特殊的 @format 标记，指定文件格式需要被 Prettier 格式化。
    "jsxSingleQuote": false,//jsx 语法是否单引号
    "printWidth": 200,//单行代码最长字符长度，超过之后会自动格式化换行。
    "proseWrap": "preserve",// 指定如何处理 markdown 文本的换行。（always | never | preserve）
    "quoteProps": "as-needed",// 对象属性是否使用引号包裹。（as-needed | consistent | preserve）
    "requirePragma": false,// 只有在文件顶部包含了特殊的 @format 标记时，才格式化文件。
    "semi": true,//分号是否添加
    "singleAttributePerLine": false,// 是否将每个 JSX 属性放在单独的一行上。
    "singleQuote": false,//是否单引号
    "tabWidth": 4,// 指定每个缩进级别的空格数。
    "trailingComma": "none", //对象的最后一个属性末尾是否添加 `,`   
    "useTabs": true,// 是否使用制表符（tab）缩进。
    "vueIndentScriptAndStyle": false,// 是否缩进 Vue 文件中的代码<script>和<style>标签
    "endOfLine": "lf",// 与 `.editorconfig` 保持一致设置。指定换行符样式。（lf | crlf | cr | auto）
}

第三步

设置默认格式化插件，这一步很重要，要不然格式化半天格式化的工具都不对

选择配置默认格式化工具，然后选择Prettier

最后

每个人都需要把默认格式化工具设置为Prettier，这样才能保持统一的编码风格，然后commit 并且 push 你的代码吧，让你的同事拉下来

总结

Prettier可以在vscode中的setting.json中配置，好处就是不用每个项目都放一个.prettierrc.js文件，但同事之间的编码风格就会不统一，建议还是每个项目都放一个，麻烦是麻烦了点，但协作起来再也不用怕同事把你的代码格式化了。