vscode Prettier配置

常用配置项:

.prettierrc.json 是 Prettier 格式化工具的配置文件

{
  "printWidth": 200, // 指定行的最大长度
  "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
      }
    }
  ]
}

Prettier 安装配置方法

在这里插入图片描述
1.安装插件,并右击选择扩展设置
在这里插入图片描述
2.在箭头指向选项处设置,配置文件路径,一般配置文件放在项目根目录下,配置就如图所示;(注意,路径有误的话,格式化工具将会不起作用)
在这里插入图片描述
3.去设置中,找到第五步指向设置项,勾选;(作用:当你保存编辑的文件时,会触发格式化插件)
在这里插入图片描述
4.完成上述后,可以在需要格式化的文件上右击,并选择"使用…格式化文档";(设置第三步后,可以不用操作这一步)
在这里插入图片描述
5.第四步完成后,出现这个弹框,选择Prettier格式化插件;
6.当页面代码布局和排版出现配置中的变化时,即格式化工具成功配置;

注意

vscode 中有默认的格式化配置属性;如何有相同的会以vscode 默认配置属性为主

例如:格式化 控制一行代码显示字数,如果格式化插件配置文件不同于vscode 的设置,那么就将会以格式化插件为主;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/153565.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Behave介绍和快速示例

Behave是一个用于行为驱动开发 (Behavior-Driven Development, BDD) 的 Python 库。使用 Behave&#xff0c;可以编写自然语言格式的使用场景来描述软件的行为&#xff0c;然后用 Python 实现这些场景下的步骤&#xff0c;形成可直接运行的测试。 Behave的目标是帮助用户、开发…

RT-DETR算法优化改进:自研独家创新BSAM注意力 ,基于CBAM升级 | 注意力机制大作战

💡💡💡本文全网首发独家改进:提出新颖的注意力BSAM(BiLevel Spatial Attention Module),创新度极佳,适合科研创新,效果秒杀CBAM,Channel Attention+Spartial Attention升级为新颖的 BiLevel Attention+Spartial Attention 1)作为注意力BSAM使用; 推荐指数:…

B/S麻醉临床信息系统(手麻系统)源码

手术麻醉系统是一套以数字形式与医院信息系统&#xff08;如HIS、EMR、LIS、PACS等&#xff09;和医疗设备等软、硬件集成并获取围手术期相关信息的计算机系统&#xff0c;其核心是对围手术期患者信息自动采集、储存、分析并呈现。该系统通过整合围手术期中病人信息、人员信息、…

DBeaver还原mysql数据库

DBeaver还原mysql数据库 DBEaver还原mysql数据库新建一个要还原的数据库选择工具》恢复数据库 DBEaver还原mysql数据库 新建一个要还原的数据库 选中数据库,右键新建一个数据库&#xff0c;字符集和排序规则默认的即可 选择工具》恢复数据库 选中刚刚创建好的数据库&#x…

springboot326校园体育场馆(设施)使用管理网站

交流学习&#xff1a; 更多项目&#xff1a; 全网最全的Java成品项目列表 https://docs.qq.com/doc/DUXdsVlhIdVlsemdX 演示 项目功能演示&#xff1a; ————————————————

Garmin佳明发布quatix 7 Pro航海商务智能腕表,于陆地之外乘风破浪

全新航海商务智能腕表&#xff0c;专为水上活动爱好者设计 搭载1.3英寸AMOLED屏幕&#xff0c;内置LED手电筒&#xff0c;长达16天电池续航 【2023年11月16日】今日&#xff0c;专业运动智能可穿戴设备及创新航海设备品牌佳明&#xff08;纽交所代码&#xff1a;GRMN&#xff…

Linux/麒麟系统上部署Vue+SpringBoot前后端分离项目

目录 1. 前端准备工作 1.1 在项目根目录创建两份环境配置文件 1.2 环境配置 2. 后端准备工作 2.1 在项目resources目录创建两份环境配置文件 2.2 环境配置 3. 前后端打包 3.1 前端打包 3.2 后端打包 4、服务器前后端配置及部署 4.1 下载、安装、启动Nginx 4.2 前端项目部署…

学而优则“创”西电学子助力openGauss教学“破圈”,一举斩获金奖

在你的大学生涯&#xff0c;是否有过发现某本教材作者就是本校老师的经历&#xff1f;是否曾经为在课堂上见到作者本人而感到些许骄傲&#xff1f;实际上&#xff0c;这样的巧合在很多专业领域常有发生&#xff0c;因为一线教师往往既是知识的传道者&#xff0c;也是知识的生产…

Kafka 集群如何实现数据同步?

哈喽大家好&#xff0c;我是咸鱼 最近这段时间比较忙&#xff0c;将近一周没更新文章&#xff0c;再不更新我那为数不多的粉丝量就要库库往下掉了 T﹏T 刚好最近在学 Kafka&#xff0c;于是决定写篇跟 Kafka 相关的文章&#xff08;文中有不对的地方欢迎大家指出&#xff09;…

简单高效的定制移动固态硬盘,稳定易用的办公小助手

我在平时的工作中&#xff0c;常常需要处理各种大文件和数据&#xff0c;如果硬盘速度跟不上&#xff0c;那工作效率就会大幅降低。今年固态硬盘的价格大幅下降&#xff0c;有很多国产品牌加入其中&#xff0c;很容易找到一款性价比高的固态硬盘&#xff0c;搭配硬盘盒使用&…

EV代码签名证书

为了增强软件的安全性和可信度&#xff0c;EV代码签名证书&#xff08;Extended Validation Code Signing Certificate&#xff09;成为了一种具有最高级别保障的关键工具。 EV代码签名证书是一种由受信任的证书颁发机构&#xff08;CA&#xff09;或证书供应商提供的高级别代…

免费最强下载工具IDM,没有之一

IDM(Internet Download Manager)下载工具是我见过的最强下载工具&#xff0c;没有之一。主要以下特点&#xff1a; 下载程度超快实时检测下载行为下载任何文件探测视频下载地址&#xff0c;几分钟下载高清视频可多进程下载&#xff0c;可多线程下载 IDM官网地址&#xff1a;下…

性能测试知多少---系统架构分析

之前有对性能需求进行过分析&#xff0c;那篇主要从项目业务、背景等角度如何抽丝剥茧的将项目的需求抽离出来。在我们进行需求的时候也需要对被测项目的架构有一定的认识&#xff0c;如果不了解被测系统的架构&#xff0c;那么在后期的性能分析与调优阶段将无从下手。 简单系…

八股文-TCP的三次握手

TCP协议是一种面向连接、可靠传输的协议&#xff0c;而建立连接的过程就是著名的三次握手。这个过程保证了通信的双方能够同步信息&#xff0c;确保后续的数据传输是可靠和有序的。本文将深入解析TCP三次握手的步骤及其意义。 漫画TCP的三次握手 TCP连接的建立采用了三次握手的…

Ubuntu16.04上安装Docker

Ubuntu16.04上安装Docker 更新 apt 包索引: sudo apt-get update安装依赖包,以便使用 HTTPS 仓库 sudo apt-get install apt-transport-https ca-certificates curl software-properties-common添加 Docker GPG 密钥 curl -fsSL https://download.docker.com/linux/ubuntu…

[Mac软件]Infuse 7 PRO v7.6.3 一个强大的视频播放器(激活版)

使用Infuse制作您的视频内容&#xff0c;这是在iPhone、iPad、Apple TV和Mac上观看几乎任何格式的视频的好方法。无需转换文件&#xff01;Infuse针对macOS 12进行了优化&#xff0c;具有强大的流媒体选项、Trakt同步以及对AirPlay和字幕的无与伦比的支持。华丽的界面。精确控制…

元组(Tuple)操作的经验分享

一、创建元组 复制代码 代码如下: tup1 (physics, chemistry, 1997, 2000); tup2 (1, 2, 3, 4, 5 ); tup3 "a", "b", "c", "d"; 创建空元组 复制代码 代码如下: tup1 (); 元组中只包含一个元素时&#xff0c;需要在元素后面添…

webpack系列之:手把手教你 打包和使用js文件

项目初始化 mkdir demo1 cd demo1 npm init // 一路回车 创建一个package.json文件webpack安装 npm install --save-dev webpackJs文件打包 可以先看一下最后的项目情况&#xff0c;然后我们再开始一步步操作 创建需要打包的js文件 创建文件夹用于存放js文件 // 创建文…

Win10开启FTP与配置

#1.控制面板>程序>启用或关闭Windows功能> (控制面板可在 桌面右键>个性化>主题>桌面图标设置>勾选控制面板>确定) Internet Information Services---勾選FTP服務器&#xff0c;IIS管理控制台 #2.win鍵輸入IIS打开IIS #3.右击网站添加FTP站点 #4.输入…
最新文章