前端工程化系列之代码风格规范篇【prettier】代码格式化配置

导读：

通过配置 prettier ，可以为我们的前端工程化项目 提供统一的代码格式化风格，这看起来，是一个小功能的实现，但是对于一个完整的前端工程化项目这是必不可少的，他主要体现在多人协作时。去更好的统一约束编码风格，这无论是相对于项目维护维护，还是项目的持续迭代，都是发挥巨大作用的。

prettier官方文档

配置文件案例：

查看配置项详情

在项目根目录下创建 .prettierrc.json 文件，并搭配 Prettier - Code formatter IDE 插件进行代码格式化。同时在根目录下还可以创建一个 .prettierignore 文件来指定哪些文件是不需要被此规则格式化的。

{
	"$schema": "https://json.schemastore.org/prettierrc",
	
	"printWidth": 120,   //指定每行应该保持多少字符以内，超过后会进行换行。

	"tabWidth": 2,       //一个制表符等于的空格数。

	"useTabs": true,     //是否使用制表符进行缩进。

	"semi": true,        // 结尾是否使用分号

	"singleQuote": true,   //  是否使用单引号而不是双引号。

    "quoteProps": "as-needed",   //更改引用对象中的属性的时间。

	"jsxSingleQuote": false,    //在 JSX 中使用单引号而不是双引号。

	"trailingComma": "es5",    //尽可能在多行逗号分隔的句法结构中打印尾随逗号。（例如，单行数组永远不会出现尾随逗号。

	"bracketSpacing": true,    //在对象文本中打印括号之间的空格。

	"bracketSameLine": false, //将多行HTML（HTML、JSX、Vue、Angular 元素放在最后一行的末尾，而不是单独放在下一行，不适用于自闭合元素

	"arrowParens": "always",  //在唯一箭头函数参数周围包含括号。

	"requirePragma": false, //Prettier 可以将自己限制为仅格式化文件顶部包含特殊注释（称为杂注）的文件。这在逐渐将大型未格式化的代码库转换为 Prettier 时非常有用。

	"insertPragma": false,  //Prettier 可以在文件顶部插入一个特殊 @format 标记，指定文件已使用 Prettier 格式化。当与 --require-pragma 该选项一起使用时，这很有效。如果文件顶部已经有一个文档块，那么此选项将使用 @format 标记向其添加一个换行符。

	"proseWrap": "preserve",   //什么都不做，保持散文原样。
	
	"htmlWhitespaceSensitivity": "css",   //HTML 空格敏感度

	"vueIndentScriptAndStyle": true,  //为 <script> 和 <style> 标签内的内容添加缩进，以匹配父元素的缩进级别。

	"endOfLine": "lf",   //线路结束规则

	"embeddedLanguageFormatting": "auto", //嵌入式语言格式

	"singleAttributePerLine": true,   //是否强制在 HTML、Vue 和 JSX 中强制执行每行单个属性。 

}

---

🚵‍♂️ 博主座右铭：向阳而生，我还在路上！
——————————————————————————————
🚴博主想说：将持续性为社区输出自己的资源，同时也见证自己的进步！
——————————————————————————————
🤼‍♂️ 如果都看到这了，博主希望留下你的足迹！【📂收藏！👍点赞！✍️评论！】
——————————————————————————————