当前位置: 首页 > news >正文

VScode使用Prettier格式化代码

1、安装Prettier插件

在这里插入图片描述

2、扩展设置

在这里插入图片描述

3、设置.prettierrc.json配置文件路径

在这里插入图片描述

4、.prettierrc 配置文件

  .prettierrc.json 是 Prettier 格式化工具的配置文件,用于指定代码格式化的规则和风格。下面是一些可能的配置选项,请自行选择:

{"printWidth": 80, // 指定行的最大长度"tabWidth": 2, // 指定缩进的空格数"useTabs": false, // 是否使用制表符进行缩进,默认为 false"singleQuote": true, // 是否使用单引号,默认为 false"quoteProps": "as-needed", // 对象属性是否使用引号,默认为 "as-needed""trailingComma": "none", // 是否使用尾随逗号(末尾的逗号),可以是 "none"、"es5"、"all" 三个选项"bracketSpacing": true, // 对象字面量中的括号是否有空格,默认为 true"jsxBracketSameLine": false, // JSX 标签的右括号是否与前一行的末尾对齐,默认为 false"arrowParens": "always", // 箭头函数参数是否使用圆括号,默认为 "always""rangeStart": 0, // 指定格式化的范围的起始位置"rangeEnd": Infinity, // 指定格式化的范围的结束位置"requirePragma": false, // 是否需要在文件顶部添加特殊的注释才能进行格式化,默认为 false"insertPragma": false, // 是否在格式化后的文件顶部插入特殊的注释,默认为 false"proseWrap": "preserve", // 是否保留 markdown 文件中的换行符,默认为 "preserve""htmlWhitespaceSensitivity": "css", // 指定 HTML 文件中空格敏感度的配置选项,可以是 "css" 或 "strict" 两个选项"vueIndentScriptAndStyle": false, // 是否缩进 Vue 文件中的 <script> 和 <style> 标签,默认为 false"endOfLine": "auto", // 指定换行符的风格,可以是 "auto"、"lf"、"crlf"、"cr" 四个选项"semi": true, // 行末是否添加分号,默认为 true"usePrettierrc": true, // 是否使用项目根目录下的 .prettierrc 文件,默认为 true"overrides": [ // 针对特定文件或文件类型的格式化配置{"files": "*.json", // 匹配的文件或文件类型"options": {"tabWidth": 4 // 针对该文件类型的配置选项}},{"files": "*.md","options": {"printWidth": 100}}]
}

我是用的最简单的配置如下:

{"printWidth": 200,"tabWidth": 2,"singleQuote": true,"semi": true,"trailingComma": "none" 
}

5、设置Prettier

在这里插入图片描述

1.搜索 Default Formatter,设置为Prettier

在这里插入图片描述

2、搜索 Format On Save,打对勾选中,在保存时进行格式化

在这里插入图片描述


本文结束

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • Mysql的基本命令
  • C语言分支语句
  • 19.删除链表的倒数第N个节点
  • 国内:深圳交通流量数据集
  • PurpleKeep:提供Azure管道以创建基础设施并执行Atomic测试
  • 流行的API架构学习
  • Hive安装配置
  • HackTheBox-Mist
  • 数据结构面试题报错调试方法记录
  • 【QT+QGIS跨平台编译】056:【pdal_kazhdan+Qt跨平台编译】(一套代码、一套框架,跨平台编译)
  • Git的简单使用
  • Vue中watch与计算属性computed
  • IO流
  • pandas(day6 图表)
  • stm32f103c8t6学习笔记(学习B站up江科大自化协)-SPI
  • [译]如何构建服务器端web组件,为何要构建?
  • 【译】理解JavaScript:new 关键字
  • avalon2.2的VM生成过程
  • ECMAScript入门(七)--Module语法
  • Eureka 2.0 开源流产,真的对你影响很大吗?
  • EventListener原理
  • gitlab-ci配置详解(一)
  • HTML-表单
  • JavaScript 奇技淫巧
  • JavaScript学习总结——原型
  • JS创建对象模式及其对象原型链探究(一):Object模式
  • Linux gpio口使用方法
  • RxJS 实现摩斯密码(Morse) 【内附脑图】
  • vue从创建到完整的饿了么(11)组件的使用(svg图标及watch的简单使用)
  • vue数据传递--我有特殊的实现技巧
  • 更好理解的面向对象的Javascript 1 —— 动态类型和多态
  • 关于for循环的简单归纳
  • 回流、重绘及其优化
  • 聊聊sentinel的DegradeSlot
  • 判断客户端类型,Android,iOS,PC
  • 使用agvtool更改app version/build
  • 我的业余项目总结
  • 无服务器化是企业 IT 架构的未来吗?
  • 优化 Vue 项目编译文件大小
  • 终端用户监控:真实用户监控还是模拟监控?
  • ​ 无限可能性的探索:Amazon Lightsail轻量应用服务器引领数字化时代创新发展
  • ​520就是要宠粉,你的心头书我买单
  • ​补​充​经​纬​恒​润​一​面​
  • #define、const、typedef的差别
  • #laravel部署安装报错loadFactoriesFrom是undefined method #
  • #免费 苹果M系芯片Macbook电脑MacOS使用Bash脚本写入(读写)NTFS硬盘教程
  • #图像处理
  • (06)Hive——正则表达式
  • (10)STL算法之搜索(二) 二分查找
  • (11)MSP430F5529 定时器B
  • (4)logging(日志模块)
  • (arch)linux 转换文件编码格式
  • (delphi11最新学习资料) Object Pascal 学习笔记---第2章第五节(日期和时间)
  • (NO.00004)iOS实现打砖块游戏(九):游戏中小球与反弹棒的碰撞
  • (void) (_x == _y)的作用