代码格式化神器Prettier!

官网

Prettier · Opinionated Code Formatter Opinionated Code Formatter https://prettier.io/

1.安装Prettier依赖

1.1 全局安装

配置简单,使用方便,然而每个人可能使用不同的编辑器,版本、配置不好统一,很难预设一份配置表给所有人共享。所以个人使用没问题,团队推广不太适合。

bash 复制代码
npm install -g prettier

1.2 项目级别安装(推荐)

Prettier作为开发依赖记录在package.json里,跟着项目走,版本统一,既可以使用官方的默认配置,也可以指定一套内容的配置项。适合团队协作。

bash 复制代码
# 在项目根目录下执行安装命令
npm install -D prettier

2.VsCode配置方式

2.1 安装插件

2.2 直接使用

右键,选择第二个格式化文档(用来选择格式化方式)

选择Prettier方式格式化(或配置默认格式化程序,之后即可右键直接点击第一个格式化文档,不用选择方式了)

2.3 配置Prettier

每次都需要手动格式格式化比较麻烦,所以可以配置保存时格式化

2.3.1 配置默认格式化方式

保存时格式化使用的是默认格式化方式,需要先配置默认格式化文档方式为Prettier

右键选择第二个格式化文档

选择配置默认格式化文档方式

选择Prettier

2.3.2 设置保存时格式化

ctrl/command + ,打开设置页面,输入edit.formatOnSave,进行勾选

3.WebStorm配置方式

3.1 安装插件

插件市场搜索Prettier进行安装

3.2 直接使用

快捷键:ctrl/command + alt/option + shift + p

3.3 配置Prettier

4.Prettier配置文件

根目录下创建文件.prettierrc,写json格式的配置

配置文件还可以有很多种格式,配置项也有很多,具体可以参考官方配置文件文档: Configuration File · Prettier 中文网 Prettier uses [cosmiconfig](https://github.com/davidtheclark/cosmiconfig) for configuration file support. This means you can configure Prettier via (in order of precedence): https://www.prettier.cn/docs/configuration.html

相关推荐
晴殇i10 分钟前
CSS 相对颜色:告别 180 个颜色变量的设计系统噩梦
前端·css
MegatronKing11 分钟前
Reqable 3.0版本云同步的实践过程
前端·后端·测试
李剑一12 分钟前
我用Trae生成了一个Echarts 3D柱状图的Demo
前端·vue.js·trae
Crystal32813 分钟前
3D实战案例(飞行的火箭/创建3D导航/翻书效果/创建长方体/环环相扣效果)
前端·css
6***x54513 分钟前
前端组件库发展趋势,原子化CSS会成为主流吗
前端·css
00后程序员张13 分钟前
接口调试从入门到精通,Fiddler抓包工具、代理配置与HTTPS抓包实战技巧
前端·ios·小程序·https·fiddler·uni-app·webview
快手技术16 分钟前
闪耀NeurIPS 2025!快手13篇论文入选,Spotlight 成果跻身前三!
前端·后端
Starduster17 分钟前
一次数据库权限小改动,如何拖垮半个互联网?——Cloudflare 2025-11-18 大故障复盘
数据库·后端·架构
一 乐23 分钟前
宠物猫店管理|宠物店管理|基于Java+vue的宠物猫店管理管理系统(源码+数据库+文档)
java·前端·数据库·vue.js·后端·宠物管理
r***998225 分钟前
在2023idea中如何创建SpringBoot
java·spring boot·后端