VSCode Prettier - Code formatter 代码格式化

news2024/11/20 1:24:42

格式化代码是一个挑战,但现代开发工具可以自动保持团队代码库的一致性。

在本文中,您将设置 Prettier 以自动格式化 Visual Studio Code(也称为 VS Code)中的代码。

1. 安装插件

2. 定义代码风格

  • 在项目根目录下创建一个prettier配置方案文件,一般命名为.prettierrc,这里我就创建一个.prettierrc.js文件;
  • 然后在这个.prettierrc.js文件中配置规则,相关配置如下:
module.exports = {
  useTabs: false, // 采用tab缩进还是空白缩进
  tabWidth: 2, // Tab键宽度
  printWidth: 80, // 宽度限制 
  singleQuote: false, //字符串是否使用单引号
  semi: false, //行位是否使用分号
  trailingComma: "none", //是否使用尾逗号
  bracketSpacing: true, // 是否保留括号中的空格 默认true
}

说明: 这里的配置是自定义的,个人项目根据自己的喜好就好,团队项目需要根据团队规范配置相应规则。

3. 通过命令一键格式化代码

  • 首先需要通过npm或者其他包管理工具安装prettier这个包,命令如下:
npm i prettier -D
  • 然后在package.json文件中的scripts中配置命令,如下:
"prettier": "prettier --write ."
  • 然后通过命令npm run prettier就可以一键格式化所有文件了
  • 但是有时候我们并不需要格式化所有的文件,比如node_modules文件夹下的文件我们并不需要格式化(举个例子,node_modules默认会被忽略,所以不需要配置),那么这个时候我们就可以在项目根目录下新建一个.prettierignore文件,配置如下:
/build/*
/dist/*
/public/*

**/*.svg

参考文献

vscode Prettier - Code formatter 代码格式化 - 知乎

使用prettier工具规范代码 - 简书

How To Format Code with Prettier in Visual Studio Code | DigitalOcean

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

SpringBoot HelloWorld 之 实现注册功能

SpringBoot HelloWorld 之 实现注册功能 一.配置 创建数据库big_event CREATE TABLE user (id int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT ID,username varchar(20) COLLATE utf8_unicode_ci NOT NULL COMMENT 用户名,password varchar(32) COLLATE utf8_unicode_ci …

海外动态IP代理可以用来批量注册邮箱吗?

无论是个人还是企业,都需要使用邮箱进行沟通、注册账号、接收通知等多种用途。然而,由于互联网服务商为了防止滥用和垃圾邮件的传播,通常对注册邮箱设置了一定的限制,如IP限制、验证码验证等。为了解决这些问题,海外动…

儿童节快乐!探索图形化编程桌面的“童年”成长之路

在这个充满童真与快乐的儿童节,我要向在CSDN平台上努力拼搏的每一位朋友,送上我最热切、最深情的祝福!愿你们心中那份孩童般的纯真与对世界无尽的好奇永不褪色,愿你们的人生道路如同这个美好的节日,流光溢彩、欢乐永恒…

提示工程(Prompt Engineering)和代码生成

文心一言 提示工程(Prompt Engineering)和代码生成之间的关系主要体现在如何通过精心设计的提示来指导或优化代码生成的过程。以下是关于提示工程和代码生成的详细解释: 一、提示工程(Prompt Engineering) 提示工程…

Centos给普通用户添加sudo命令权限

打开sudoers文件 sudo visudo 修改sudoers文件 找到root ALL(ALL) ALL这一行,即如下图标出红线的一行 在此行下新增如下内容: lbs为用给予sudo执行权限的用户名 # 执行sudo命令,需要输入命令 lbs ALL(ALL) ALL 或 # 执行sudo命令,…

【Python】如何使用 Python 自动发送每日电子邮件报告

人不走空 🌈个人主页:人不走空 💖系列专栏:算法专题 ⏰诗词歌赋:斯是陋室,惟吾德馨 目录 🌈个人主页:人不走空 💖系列专栏:算法专题 ⏰诗词歌…

数组中的第K个最大元素,力扣

目录 题目地址: 我们直接看题解吧: 快速理解解题思路小建议: 审题目事例提示: 解题方法: 解题分析: 解题思路: 题目地址: 215. 数组中的第K个最大元素 - 力扣(LeetCode&a…

如何在 llama.cpp 服务器中实现用户登录功能的优化方案?(语言-c++)

🏆本文收录于「Bug调优」专栏,主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案,希望能够助你一臂之力,帮你早日登顶实现财富自由🚀;同时,欢迎大家关注&&收藏&&…

寺庙小程序-H5网页开发

大家好,我是程序员小孟。 现在有很多的产品或者工具都开始信息话了,寺庙或者佛教也需要小程序吗? 当然了! 前面我们还开发了很多寺庙相关的小程序。 今天要介绍的是一款寺庙系统,该系统可以作为小程序、H5网页、安…

自用了很久的一款强制卸载软件,超级好用!!!

Ashampoo UnInstaller是一款由Ashampoo公司开发的专业卸载工具,它提供了比Windows自带卸载功能更为彻底的程序卸载解决方案。是一款功能强大的卸载工具,旨在帮助用户彻底删除不需要的程序和应用,卸载难以卸载的软件工具,此外他还有…

【SQL学习进阶】从入门到高级应用(九)

文章目录 子查询什么是子查询where后面使用子查询from后面使用子查询select后面使用子查询exists、not existsin和exists区别 union&union alllimit 🌈你好呀!我是 山顶风景独好 💕欢迎来到我的博客,很高兴能够在这里和您见面…

Python代码优化工具memory_profiler

1. 工具介绍 memory_profiler是Python的一个第三方库,其功能时基于函数的逐行代码分析工具。通过该库,可以对目标函数(允许分析多个函数)进行内存消耗分析,便于代码调优。 2. 安装 pip install memory_profiler 3. 使用 from memory_pro…

[香橙派 AIpro] 性能强劲的昇腾AI开发板,应用广泛,性能出众,遥遥领先!

[香橙派 AIpro] 性能强劲的昇腾AI开发板,应用广泛,性能出众,遥遥领先! 开发板简介 香橙派AIpro开发板凭借华为昇腾AI芯片的强大算力、丰富的接口、完善的开发工具等优势,在AI开发板市场具有很高的竞争力,可…

wpf listbox实现选中动画

效果如下&#xff1a; 参考&#xff1a;https://github.com/WPFDevelopersOrg/WPFDevelopers/blob/master/src/WPFDevelopers.Samples.Shared/Controls/NavigateMenu/NavigateMenu.xaml 实现上述效果的前台代码&#xff1a; <Windowx:Class"ListBox.MainWindow"…

Blender 学习笔记(二)游标与原点

1. 游标 游标是界面中的红色圆圈&#xff1a; 1.1 移动游标 我们可以通过点击工具栏中的游标按钮&#xff0c;来移动游标&#xff0c;或者通过快捷键 shift右键 移动。若想要重置复游标位置&#xff0c;可以用 shiftc 恢复&#xff0c;或则通过 shifts 点击 游标->世界原…

Linux系统编程——动静态库

目录 一&#xff0c;关于动静态库 1.1 什么是库&#xff1f; 1.2 认识动静态库 1.3 动静态库特征 二&#xff0c;静态库 2.1 制作静态库 2.2 使用静态库 三&#xff0c;动态库 3.1 制作动态库 3.2 使用动态库一些问题 3.3 正确使用动态库三种方法 3.3.1 方法一&…

找回xmind文件办法:一切意外均可找回(误删/重启关机等)

我周三编辑完&#xff0c;周四下午评审完用例忘记保存 结果到了快乐星期五&#xff0c;由于是周五我太开心了...早上到公司后觉得电脑卡&#xff0c;直接点了重启啥都没保存啊啊啊啊啊 准备上传测试用例时才想起来我的用例找不见了&#xff01;&#xff01;&#xff01;&…

docker 快速搭建django项目环境(DockerFile)文件基础搭建

首先需要搭建好docker环境&#xff0c;docker环境就不在这里叙述&#xff0c;如果想学在评论区留言小编后期更新由linux系统到docker的安装做一个详细的教程。 下面我们开始今天的重点&#xff1a; 1、第一步&#xff1a;我们在任意&#xff08;linux&#xff09;路径下创建Do…

ARC学习(2)基本编程模型认识(二)

笔者继续来学习一下arc的编程模型的寄存器信息。 1、core寄存器深入 参数寄存器&#xff1a;r0-r7&#xff0c;8个参数&#xff0c;暂存器&#xff1a;r10-r15保存寄存器&#xff1a;r16-r25 调用函数需要保存的寄存器指针寄存器&#xff1a;gp&#xff08;全局指针&#xff09…

HackTheBox-Machines--Nineveh

Nineveh测试过程 1 信息收集 NMAP 端口扫描 80 端口 80端口是服务器的默认页面&#xff0c;无可利用功能点&#xff0c;源代码没有可利用的敏感信息 目录扫描 1.http://10.129.25.123/department 访问/department目录跳转到登录页面&#xff0c;尝试暴力破解&#xff0c;获取…