VS Code编写HTML-CSS-JS等——代码格式化

最新推荐文章于 2025-11-03 13:45:20 发布
原创 最新推荐文章于 2025-11-03 13:45:20 发布 · 8.9k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #html #javascript #前端

本文指导如何在VSCode中安装并配置Prettier插件，实现保存时自动代码格式化，并探讨如何调整默认设置以符合个人喜好。讨论了JS-CSS-HTMLFormatter的替代性，并邀请读者分享其他高效格式化方案。

VS Code编写HTML-CSS-JS等——代码格式化


功能：保存时自动将代码进行格式标准化

步骤

  1. VS Code扩展中搜索：Prettier - Code formatter
    查找插件
  2. 点击安装安装
  3. 进入设置，输入“save”进行查找，打上“勾”后，点击“在settings.json中编辑”
    进入设置打勾并进入settings.json
  4. 编辑settings.json，在现有大括号内添加下面的代码，注意true后面要有英文逗号
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }

举例

  1. 前面代码修改依据
    修改依据
  2. 效果展示（第一张为保存前的，第二张为保存后的）
    保存前保存后

总结

  1. 类似格式化的插件还有JS-CSS-HTML Formatter（只有两颗星），应该星多更好用些吧哈哈哈~~
  2. 修改设置是起到保存的时候触发格式化的操作。
  3. 我还不怎么了解这个插件，因为它在格式化之后，默认将平时的回车效果变为空两格，我希望的是回车空四格（平时的Tab键效果）。此文章纯属抛砖引玉，希望大家有更好的方法在评论区一起交流哦！谢谢大家！！！
vs实现js格式化和代码折叠
03-09
'******vs实现js格式化和代码折叠****** '* 版权所有(C) sksmks 2009 '* 文件名称 : JsFormat '* 当前版本 : 1.0.0.1 '* 作 者 : 黄会攀 (@@:272302281) '* 设计日期 : 2009年10月31日 '* 内容摘要 : VS2008 JsFormat Macro '*******************************************************************************/ 一. 目的 在程序的开发中，javascript脚本的扩大，代码折叠，格式化是必不可少的一部分。对于大多数注释,代码折叠，格式化，都有着相似的样子，另外，在团队开发的过程，脚本太大，太长。为了提高在开发过程中，代码的可读性和开发效率，可以利用VS提供的Macro扩展功能，实现一套Macro模板。在使用的过程中，只需要使用相应的快捷键，便可格式化脚本和查看代码结构。 二. 实现 （打开宏资源管理器:视图 -> 其他窗口 -> 宏资源管理器 或者按 Alt+F8） 1. 新建Macro工程 打开 菜单 --> 工具 --> 宏(Macro) --> 新建宏(New Macro Project...)，或者（宏资源管理器Alt+F8 ）根据向导提示建立工程。 2. 编辑Macro工程 打开 菜单 --> 工具 --> 宏(Macro) --> 宏资源管理器(Macro Explorer) ，在Explorer中选择新建的工程，修改Module名(右键)，在Module名上双击，在打开的Macro IDE中进行编辑。 3. 在Module下，添加要实现的MacroForJs，并实现(内容为向Active Document中添加注释)。 4. 保存 5.在VS2008中，双击添加的Macro，将执行对应的Macro代码(使用VBScript在Macro IDE中实现的)。 6. 建立快捷键 打开 菜单 --> 工具 --> 选项 --> 键盘 ，在列表框中选择刚才添加的MacroForJsPro里的OutlineFun (作用：注释)，然后在 Press shortcuts keys中输入快捷键，点击Assign 。 打开 菜单 --> 工具 --> 选项 --> 键盘 ，在列表框中选择刚才添加的MacroForJsPro里的FormatForJsChar (作用：格式化)，然后在 Press shortcuts keys中输入快捷键，点击Assign 。 7. 这时候，就可以直接使用快捷键来执行MacroForJs 。 三. 使用附件 1. 加载 打开 菜单 --> 工具(Tools) --> 宏(Macro) --> 加载宏项目(Load Macro Project... )，选择附件里的工程。 2. 配置快捷键 3. 完成 具体的实现代码见附件工程。
2024从零开始使用VSCode编程（新手简单设置篇）HTML+CSS+JS阶段
ssrsrrn的博客
07-24 3824
安装VSCode后简单的一些设置
【Web开发必备技能】：3步搞定VSCode HTML格式化缩进设置
最新发布
BreakVein的博客
11-03 623
轻松掌握VSCode HTML格式化缩进设置，3步完成个性化配置。适用于前端开发、团队协作场景，支持自动对齐、统一代码风格，提升编码效率与可读性。图文详解设置方法，简单易操作，值得收藏。
vscode中怎样格式化js代码_如何在Visual Studio代码（VSCode）中格式化代码
weixin_39989033的博客
12-20 1270
代码格式快捷方式：Windows上的Visual Studio代码 -Shift+Alt+FMacOS上的Visual Studio代码 -Shift+Option+FUbuntu上的Visual Studio代码 -Ctrl+Shift+I如果需要，您还可以使用首选项设置自定义此快捷方式。保存文件时的代码格式：Visual Studio Code允许用户自定义默认设置。如果要在保存时...
vscode html js css 格式化插件问题
唐心的博客
04-15 258
id 里加了空格。 其它地方 的也是。 要么不要插件。要么加单引号。而不是双引号
vsCode格式化html代码
热门推荐
dancer_mm的博客
11-04 1万+
vsCode格式化html代码 1.下载两个插件ESLint和vetur 2.打开code-> preference-> setting页面，搜索settings.json，将其配置 { // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor...
simple-focus-web：专为代码聚焦设计的VS Code黑暗主题
simple-focus-web:vs代码黑暗主题，是一款专为Visual Studio Code（简称VS Code）开发环境设计的深色系代码主题，其核心理念在于通过极简而高效的色彩策略提升代码的可读性与视觉聚焦能力。该主题并非追求繁复多彩的...
EditPlus实现JS与CSS代码自动格式化
“js或者css自动格式化”这一主题聚焦于使用轻量级文本编辑器EditPlus（版本v3.41）实现JavaScript与CSS代码的自动化格式化处理，旨在提升开发者在编写前端代码时的可读性、规范性和开发效率。通过集成外部脚本工具...
前端源代码格式化配置与lint-staged预提交检查
“base-source-code-format-Form source code”这一标题所指向的知识点，是一个围绕前端工程中源代码格式化与代码质量保障的实践项目，其核心目标在于通过自动化工具链实现JavaScript、CSS等前端语言在开发过程中的...
Prettier-plugin-ruby：美化Ruby代码格式化插件介绍
标题【plugin-ruby：漂亮的Ruby插件】和描述【更漂亮...综上所述，标题和描述揭示了一个针对Ruby开发者的工具——@prettier/plugin-ruby，它简化了代码格式化的过程，促进了更高效的代码审查，并提升了代码的整体质量。
vs2010插件js格式化工具JSEnhancements
10-31
支持VS2010以下版本，可方便js代码格式化，包含缩进、隐藏、展开等
precise-commits：精准格式化代码变更行的Prettier工具
结合标签内容来看，“Prettier”作为当前最受欢迎的代码格式化工具之一，以其“强制一致”的哲学著称，广泛应用于 JavaScript、TypeScript、CSS、HTML、Markdown 等多种语言生态中。然而，其“全有或全无”的默认...
【编码效率】VS Code配置 JavaScript、HTML 自动化格式
qq_32258683的博客
03-07 2215
本文主要讲述如何在使用 VS Code 中提高 JS 编码效率，并自动配置规范统一的代码格式，提高代码可读性。
vscode中怎样格式化js代码_vscode如何格式化代码
weixin_39606361的博客
12-20 6172
vs code格式化代码的快捷键如下：在Windows上 Shift+ Alt+F (推荐学习：vscode入门教程)在Mac上 Shift+ Option+F在Ubuntu上 Ctrl+ Shift+I但是自带的格式化并不能满足我的需求，这个时候，不得不说插件大法好。代码格式化为eslint风格需要插件：eslint在设置中添加："eslint.autoFixOnSave": tr...
VSCode 代码格式化
星环
08-06 9484
VSCode 代码格式化 html， javascript css
CSS 声明属性顺序推荐
法研鲁迅的个人博客
02-21 438
CSS 声明属性顺序: 摘自腾讯前端团队 总结来看呢，就是: 显示相关 最基本样式相关 定位 本体位置相关 字体颜色相关 动画相关 // 可忽略浏览器兼容性相关语法 [ [ "display", "visibility", "float", "clear", "overflow", "o.
vsCode css 格式化工具
weixin_34019144的博客
01-28 1万+
由于自己的一丝丝的强迫症，所以在写代码的时候，格式问题总是很在乎，幸好有Ctrl+Alt+F，解决了我大多数格式问题，但是css格式化问题真的是骚扰了我好久，今天下午终于一气之下就安装了个css格式化工具。 我查到了css格式化工具有两个，第一个：Beauty。第二个：CSSComb 由于Beauty安装失败，所以尝试了第二个csscomb，最终成功完成css格式化工具安装。安装...
vscode格式化css文件，css文件排版
weixin_38345306的博客
06-28 2657
vscode格式化css文件 1.安装css格式化工具 2.在根目录下添加“.csscomb.json”文件，代码如下: { "exclude": [ ".git/**", "node_modules/**", "bower_components/**" ], "always-semicolon": true, "block-indent": " ", "color-case": "lower", "color-shortha
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值