介绍 16 个让你的代码变漂亮的属性

大家好，我是小鑫同学。一位从事过 Android 开发、混合开发，现在长期从事前端开发的编程爱好者，我觉得在编程之路上最重要的是知识的分享，所谓三人行必有我师。所以我开始在社区持续输出我所了解到、学习到、工作中遇到的各种编程知识，欢迎有想法、有同感的伙伴加我 fe-xiaoxin 微信交流~

写作背景：

     做前端开发很久了，但是每次都依赖脚手架或开源的代码模版的统一风格来编写代码，碰上不喜欢的又搞不清楚怎么调整，百度几下都没搞好，只能将就着写，这次就专门扒拉一下 Prettier 的选项，一次性搞懂这个在代码格式化场景使用量相当大（20,533,053 安装量）的工具。

Prettier 介绍和使用配置：

     Prettier 是一款以较少的配置来支持多种编程语言进行代码格式化的工具，并且在大多数常用的编辑器都有集成和提供的插件。

     我们在 VSCode 中通过文末提供的插件地址或在商店搜索即可，找下载量最大的就对了。安装完插件后我们可以通过在项目根目录配置.prettierrc文件来配置一份符合我们自定义的风格，文件内容推荐使用 JSON 格式组合。当然也支持其他的一个配置文件命名和书写方式，文末也提供了原文档对应的地址，记得要将默认的格式化程序选择为 Prettier。

     在这还推荐在项目下配置 VSCode 中保存时格式化代码，并在窗口状态变化是自动保存，因为过多的保存可能会造成不必要的麻烦。

属性介绍：

Print Width：

• 介绍和说明：代码行的宽度，通用建议每行最大长度建议为 100/120，但最好不超过这两个数。

• API：printWidth
  

• 参数类型：int

• 默认值：80

Tab Width：

• 介绍和说明：指定每次缩进的空格数。

• API：tabWidth
  

• 参数类型：int

• 默认值：2

Tabs：

• 介绍和说明：是否用制表符代替空格执行缩进。

• API：useTabs
  

• 参数类型：bool

• 默认值：false

Semicolons：

• 介绍和说明：是否在代码语句结尾添加分号。

• API：semi
  

• 参数类型：bool

• 默认值：true

Quotes

• 介绍和说明：是否使用单引号，JSX 单独设置。

• API：singleQuote
  

• 参数类型：bool

• 默认值：false

JSX Quotes

• 介绍和说明：是否在 JSX 中使用单引号。

• API：jsxSingleQuote
  

• 参数类型：bool

• 默认值：false

Trailing Commas

• 介绍和说明：在多行以逗号分割的句法中尽可能补充尾行逗号。

• API：trailingComma
  

• 参数类型：es5 / none / all

• 默认值：es5| value | desc || --- | --- || es5 | 在 ES5 中进行补充，如（对象，数组） || none | 不进行补充 || all | 尽可能补充，包括函数参数、函数调用，支持 TS |

Bracket Spacing

• 介绍和说明：是否在对象属性与大括号之间填充空格。

• API：bracketSpacing
  

• 参数类型：bool

• 默认值：true

Bracket Line

• 介绍和说明：开始标签的右尖括号是否跟随在最后一行属性末尾。

• 前提：非自结束标签、HTML 多行属性（HTML, JSX, Vue, Angular）

• API：bracketSameLine
  

• 参数类型：bool

• 默认值：false

Arrow Function Parentheses

• 介绍和说明：单个参数的箭头函数使用括号。

• API：arrowParens
  

• 参数类型：always / avoid

• 默认值：always

Require Pragma

• 介绍和说明：是否仅格式化文件开始位置存在特殊注释的代码。

• API：requirePragma
  

• 参数类型：bool

• 默认值：false

/** * @prettier */ or/** * @format */

Insert Pragma

• 介绍和说明：是否在文件插入标记表明该文件已被格式化处理过了。

• API：insertPragma
  

• 参数类型：bool

• 默认值：false

Vue files script and style tags indentation

• 介绍和说明：是否在 Vue 文件中对代码和标签进行缩进，script 和 style 部分。

• API：vueIndentScriptAndStyle
  

• 参数类型：bool

• 默认值：false

End of Line

• 介绍和说明：设置换行风格，避免不同操作系统造成的大量代码 diff。

• API：endOfLine
  

• 参数类型：lf / crlf / cr / auto

• 默认值：lf

Embedded Language Formatting

• 介绍和说明：是否格式化一些文件中被嵌入的代码片段的风格，如果插件可以识别。

• API：embeddedLanguageFormatting
  

• 参数类型：off / auto

• 默认值：auto

Single Attribute Per Line

• 介绍和说明：在 Html，Vue，JSX 中是否强制每条属性占用一行。

• API：singleAttributePerLine
  

• 参数类型：bool

• 默认值：false

写在最后：

整理完了，抓紧收藏起来吧，下次忘了属性怎么用的时候就翻这篇文章就好了，到此 4 月份的更文挑战也暂告一段落，感谢 jym 点赞鼓励。

链接整理：

1. Prettier
   

2. Prettier（vscode插件）
   

3. 配置文件
   

4. 在线调试
   

如果看完觉得有收获，欢迎点赞、评论、分享支持一下。你的支持和肯定，是我坚持写作的动力~

最后可以关注我 @小鑫同学，共同进步（还可以帮你 fix🐛）~