vscode里利用prettier插件实现ant-design-pro架构代码的格式化

最新推荐文章于 2025-04-10 10:24:58 发布
最新推荐文章于 2025-04-10 10:24:58 发布
阅读量7.1k 收藏 2
点赞数 2
分类专栏： 前端博客
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40766882/article/details/90168517
版权
本文介绍了如何在Visual Studio Code (VSCode) 中安装并配置Prettier插件，以实现Ant Design Pro项目代码的格式化。通过安装Prettier插件，设置IDE配置，特别是更改JavaScript文件类型为JavaScript React，可以确保在保存时自动格式化代码，解决格式混乱问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

vscode里利用prettier插件实现ant-design-pro架构代码的格式化

一、给vscode编辑器安装prettier插件。

打开IDE，即点开编辑器程序，在编辑器主界面找一个双正方形的按钮（Extensions）,如下图所示。
在这里插入图片描述
点击后会出现搜索插件的界面，如下图所示：
在这里插入图片描述
在搜索栏里输入prettier，会出现很多插件，在其中选择一款叫做Prettier-Code formatter 的插件。点击它，安装，就好。具体如下图所示：
在这里插入图片描述
安装好了之后就需要我们去配置一些东西了。

二、配置IDE编辑器的配置。

在编辑器中进入到设置setting的界面。步骤是这样的File=>Preferences=>setting
在这里插入图片描述
点击setting后会出现如下的图片，我们需要点击图片中的Edit in settings.json

最低0.47元/天 解锁文章
VS Code 配置 prettier
K_H_S_D_S_N的博客
03-08 2471
一，在 VS Code 中安装 Prettier - Code formatter 二，在 file => preferences =>settings 中搜索 save ，勾选 Editor: Format On Save // 在保存时格式化 三，在需要格式化的文件上单击右键，选择 Format Document With => 选择Prettier - Code formatter 四，设置配置方法，可以直接在 settings.json 中直接配置在编辑器中。也可以 在当..
ant-design-pro插件分析（packag.json）
Cvory
11-14 1696
{ "name": "ant-design-pro", "version": "1.0.0", "private": true, "description": "An out-of-box UI solution for enterprise applications", "scripts": { "analyze": "cross-env ANALYZE=1 umi ...
vscode 配置prettier 代码自动格式化
jhgj56的博客
10-16 5065
vscode 配置prettier
VS Code配合Prettier自动格式化代码
最新发布
分享技术，分享经验
04-10 2893
每次修改 .prettierrc.cjs 配置文件后，如果发现保存代码时格式化没有生效，可能是 VS Code 插件缓存未及时刷新。建议此时重启 VS Code，确保新的配置被正确加载并生效。
VScode使用Prettier格式化代码
扛麻袋的少年的博客
04-01 5931
vscode使用prettier进行格式化
vscode格式化代码 prettier
qq_45437679的博客
07-26 224
prettier 格式化方案为 prettier，主要配置如下： { "tabWidth": 4, "printWidth": 80, "semi": false, "singleQuote": true, "trailingComma": "all", "bracketSpacing": true, "arrowParens": "avoid", "requirePragma": false, "endOfLine": "auto"
基于 vue3 + ant-design-vue 的中后台管理系统.zip
05-26
9. **Eslint + Prettier**：采用 Eslint 进行代码规范检查，Prettier 自动格式化代码，保持团队编码风格一致。 总之，这个项目结合了 Vue3 的最新特性与 Ant Design Vue 的丰富组件，为开发高效稳定的中后台管理...
ant-design-pro-1.4.4
02-21
9. **ESLint与Prettier**：为了保持代码风格的一致性，项目可能配置了ESLint进行代码质量检查，以及Prettier进行代码格式化。 10. **脚手架工具**：作为一款“脚手架”，Ant Design Pro提供命令行工具，帮助开发者...
Ant-design搭建脚手架教程
06-09
- **ESLint + Prettier**: 为确保代码质量和一致性，可以使用ESLint和Prettier来自动化代码格式化和检查。这些工具可以通过配置文件来定制规则。 - **示例配置**： - `.eslintrc.cjs`：配置ESLint规则。 - `....
vscode + prettier 专治代码洁癖
热门推荐
悦涵仙子的技术笔记本
07-27 6万+
前言 相信很多小伙伴都纠结过自己代码的格式化问题，特别是团队协作的时候，加上前端语言种类繁杂，各种语法糖+团队个人的敲码习惯，会让你感觉到一团糟。 在过往，我们尝试过很多方式，从EditorConfig到各种***Lint, 还要研究各种配置，还是没办法满足我们的需求。 现在，prettier帮到你。 介绍 prettier是一个比较武断的格式化工具（官方介绍的逗比级...
VSCode配置Prettier
rotartsinimda1的博客
04-05 982
3. 在settings->editor中，Tab Size设置为4（默认为4），Insert Spaces设置为true（默认为true）。在settings->Prettier中，Tab Width设置为2（默认为2），Use Tabs设置为false（默认为false）。1. 安装Prettier - Code formatter。2. 在settings.json中添加。
vscode Prettier - Code formatter插件+eslint js Standar 保存自动格式化
virus578的博客
07-18 4033
最近开发项目需要用到eslint 但是手动格式化太麻烦了 发现eslint配置Prettier 能自动格式化 感觉就是神器啊 但是不能格式化templateStandar还是可以的 不知道其他版本怎么样 1.安装Prettier - Code formatter https://marketplace.visualstudio.com/items?itemName=esbenp.pretti...
vscode中的Prettier 插件：格式化代码
听海边涛声
05-12 1636
vscode中的Prettier 插件：格式化代码
vscode Prettier安装及配置
weixin_62992614的博客
07-29 1万+
Prettier 是一款流行的代码格式化工具，用于自动化和统一化代码的格式。它支持多种编程语言，并具有以下特点和优势：自动格式化：Prettier 能够自动解析代码，并根据预定义的规则和配置选项对代码进行格式化，省去手动调整代码风格的麻烦。一致的代码风格：Prettier 通过应用一致的代码风格规则，确保项目中的所有代码具有统一的风格，减少团队成员之间的风格冲突，并提高代码的可读性。可配置性：Prettier 提供了一系列的配置选项，可以根据项目需求和个人偏好进行调整。
vsCode代码格式化（理解eslint、vetur、prettier，实现格式化文档以及ctrl+s保存自动格式化文档，保证代码格式的统一，相对规范，以及一些常见问题实战解决）
qq_45796592的博客
04-20 1万+
vsCode代码格式化，解决格式化中常见的问题，让大家能知根知底，不用盲目在网上查询多种配置（包括理解eslint、vetur、prettier，实现格式化文档以及ctrl+s保存自动格式化文档，保证代码格式的统一，相对规范，以及一些常见问题实战解决）
VScode代码Prettier格式化及ESLint语法检测
lihefei_coder的博客
07-28 2万+
VScode代码Prettier格式化及ESLint语法检测
强烈推荐的VS Code扩展：Prettier ESLint
gitblog_00002的博客
06-25 576
强烈推荐的VS Code扩展：Prettier ESLint vs-code-prettier-eslintA Visual Studio Code Extension to format JavaScript and TypeScript code using the prettier-eslint package.项目地址:https://gitcode.com/gh_mirrors/vs/...
prettier
besttoby01的博客
09-21 1861
保存一套prettier规则 { // 使能每一种语言默认格式化规则 "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[less]": { "editor.defaultFormatter":
快速构建中台前端解决方案的ant-design-pro-2.2.0
资源摘要信息:"ant-design-pro-2.2.0.zip" 一、React技术栈与Ant Design Pro简介 React是由Facebook开发的一个开源前端库，用于构建用户界面。它遵循组件化的设计思想，允许开发者通过组合简单的视图来构建复杂的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值