Prettier配置指南

文章简介

本文主要介绍Prettier（一种代码格式化插件）的基本配置，读者可以拿来即用，也可以根据自己的风格自行调整。prettier共有23个配置，我只列举了其中常用的13个(项目基本够用)，大家感兴趣可以查看prettier官网完整配置

1.新建.prettierrc.json文件

2.prettier 配置

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": true,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "bracketSameLine": true,
  "arrowParens": "always",
  "htmlWhitespaceSensitivity": "ignore",
  "vueIndentScriptAndStyle": false,
  "endOfLine": "auto",
  "singleAttributePerLine": false
}

3.prettier 配置详解

{
  "printWidth": 80,	//每行最多显示的字符数
  "tabWidth": 2,//tab的宽度 2个字符
  "useTabs": true,//使用tab代替空格
  "semi": true,//结尾使用分号
  "singleQuote": true,//使用单引号代替双引号
  "trailingComma": "none",//结尾是否添加逗号
  "bracketSpacing": true,//对象括号俩边是否用空格隔开
  "bracketSameLine": true,;//组件最后的尖括号不另起一行
  "arrowParens": "always",//箭头函数参数始终添加括号
  "htmlWhitespaceSensitivity": "ignore",//html存在空格是不敏感的
  "vueIndentScriptAndStyle": false,//vue 的script和style的内容是否缩进
  "endOfLine": "auto",//行结尾形式 mac和linux是\n  windows是\r\n 
  "singleAttributePerLine": false //组件或者标签的属性是否控制一行只显示一个属性
}

4.结语

由于JSON文件不支持注释，为了方便大家复制即可使用，我单独又写了一份注释代码段。我一共列举了13个常用的配置，大家可以根据自己的风格继续改造，剩下的10个项目根本不常用，感兴趣的可以去官网深入了解