Prettier配置指南

白的夜gxw

已于 2023-07-12 18:00:19 修改

阅读量8.2k

点赞数 13

分类专栏： Vue 文章标签：前端 vue.js javascript

于 2023-06-14 18:29:50 首次发布

本文链接：https://blog.csdn.net/weixin_63228975/article/details/131213411

版权

Vue 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

本文介绍了Prettier插件的基础配置，包括创建.prettierrc.json文件并列举了13个常用配置项，如printWidth、tabWidth、singleQuote等，帮助开发者快速设置个人风格的代码格式。同时，建议对其他不常用的配置感兴趣的读者可以查阅官方文档进行深入学习。

摘要由CSDN通过智能技术生成

文章简介

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

1.新建.prettierrc.json文件

2.prettier 配置

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

3.prettier 配置详解

{
  "printWidth": 100,	//每行最多显示的字符数
  "tabWidth": 2,//tab的宽度 2个字符
  "useTabs": false,//禁止使用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 //组件或者标签的属性是否控制一行只显示一个属性
}