前言
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文件,但同事之间的编码风格就会不统一,建议还是每个项目都放一个,麻烦是麻烦了点,但协作起来再也不用怕同事把你的代码格式化了。