vscode编写html，常用快捷方式与插件

最新推荐文章于 2025-10-28 10:43:32 发布
转载 最新推荐文章于 2025-10-28 10:43:32 发布 · 2w 阅读 · 37 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/yihr/p/10341451.html
文章标签：

#开发工具 #javascript #json #ViewUI

本文介绍在VSCode中使用tab键快速补全HTML基本框架、代码对齐、注释操作的方法，以及推荐多个提高HTML编辑效率的插件，如AutoRenameTag、Beautify、ESLint等。
部署运行你感兴趣的模型镜像
 

一、tab键补全

1.1打开vscode新建html文件，在第一行输入!，然后按下tab键，会直接出现编写html语言的基本框架标签

效果如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

1.2实现html代码的对齐

Shift  +  Alt  + F     实现代码的对齐

1.3注释与取消注释

注释：ctrl+k+c

取消注释：ctrl+k+u

二、常用插件

  • Auto Rename Tag
    ： Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.

  • Beautify
    ： Beautify javascript, JSON, CSS, Sass, and HTML in Visual Studio Code.

  • Chinese (Simplified) Language Pack 
    ： Language pack extension for Chinese (Simplified)

  • ESLint
    ：Integrates ESLint JavaScript into VS Code.

  • HTML CSS Supportecmel
    ：CSS support for HTML documents

  • HTML Snippets
    ：HTML tags including HTML5 Snippets

  • HTMLHint
    ： A Static Code Analysis Tool for HTML

  • Open HTML in Default Brow
    ：Open HTML in Default Browser

  • Path Autocomplete
    ：Provides path completion for visual studio code.

转载于:https://www.cnblogs.com/yihr/p/10341451.html

您可能感兴趣的与本文相关的镜像

Stable-Diffusion-3.5

Stable-Diffusion-3.5

图片生成
Stable-Diffusion

Stable Diffusion 3.5 (SD 3.5) 是由 Stability AI 推出的新一代文本到图像生成模型，相比 3.0 版本，它提升了图像质量、运行速度和硬件效率

从菜鸟到大神：VSCode助力HTML开发全攻略
邓邓子的博客
04-27 2761
本文全面介绍 VSCode 在 HTML 开发中的高效应用。先引导读者完成 VSCode 的安装与个性化设置，助其快速适应开发环境；接着推荐 Live Server、Prettier 等实用插件，实现实时预览、代码格式化等功能，提升开发效率。通过详细的开发实战步骤，从新建文件到添加样式，带领读者掌握 HTML 基础结构与常用标签使用。还分享代码片段管理、多人协作等进阶技巧，解决常见开发问题。旨在帮助开发者利用 VSCode，轻松高效完成 HTML 开发，打造优质网页。
精选资源
Vscode常用插件及安装-改.pdf
04-12
2. CSS自动补全插件（HTMLCSSsupport）：这个插件提供CSS代码的自动补全功能，使开发者在编写CSS样式时能够获得更智能的编码体验。特别是对于那些对CSS属性记忆不太熟练的开发者来说，能够显著提升编码速度和减少...
vscode怎么运行代码HTML 怎么在vscode编写HTML代码
QQ_____365392777的博客
05-30 4万+
vscode怎么运行代码HTML 怎么在vscode编写HTML代码 vscode怎么运行代码HTML?vscode是一款源代码编辑器软件，能够用于windows、macOS以及Linux系统，具有丰富的其他语言。网站html编写也需要使用到vscode，但是很多小伙伴们不知道如何运行编写html代码，那么今天就来教大家vscode怎么运行代码HTML以及怎么在vscode编写HTML代码，一起来看看吧。 vscode怎么运行代码HTML 1、首先打开vscode软件，新建一个HTML文件，后缀名也需要写上
利用VScode写html
StephanieDong的博客
09-03 1105
html:英文全称是Hyper Text Makeup Language,中文全称是超文本标记语言超越文本限制，可以加图片，动画，多媒体等内容超越连接限制，可以从一个文件跳转到另一个文件，与世界各地主机的文件相连接。
如何在VS Code中使用终极浏览器预览插件：实时调试与高效开发指南
最新发布
gitblog_00883的博客
10-28 782
**vscode-browser-preview** 是一款强大的Visual Studio Code扩展工具，它允许开发者在编辑器内直接打开实时浏览器预览并进行调试，极大简化前端开发流程，提升编码效率。这款插件基于Headless Chromium技术，无缝集成Chrome/Edge浏览器环境，为开发者提供安全且功能丰富的网页渲染与调试体验。 ## ✨ 为什么选择VS Code浏览器预览插件？...
VSCode 写 HTML 文档
ItDaChuang的博客
12-10 906
VSCode 写 HTML 文档 一、VSCode 的使用 1.1 软件的下载和基本的 html 文件创建 VSCode 下载可以去VSCode官网下载 新建文件，该文件名和和文件格式为.html即可 在新建的 html 文件中输入 ! 接着回车或按 Tab 键即可生成网页骨架。 <!-- 输入 ! 回车可快速生成下面骨架 --> <!DOCTYPE html> <html lang="en"> <head> <meta charse
vscode编写html程序
m0_52592128的博客
07-02 5948
用vscode编写html文件
在VScode上写网页（html）
2302_80978287的博客
09-07 2342
把代码复制粘贴进去，然后点击文件→另存为→选择html格式。
VSCode中HTML开发入门与常用插件配置指南
首先，在“下载和安装VSCode”部分，教程引导用户前往官方网站获取最新版本的安装包，并详细说明了安装过程中的注意事项，如选择合适的安装路径、是否创建桌面快捷方式、是否将VSCode添加至系统PATH环境变量等。...
VSCODE常用快捷插件
04-25
### 常用 VSCode 快捷插件推荐 以下是针对提高开发效率和便捷性的常用 VSCode 插件推荐： #### 1. **Auto Rename Tag** 此插件能够在修改 HTML 或 XML 标签名称时自动更新对应的关闭标签，减少手动操作带来的错误...
VSCode开发工具及常用离线插件合集
本压缩包“VSCode开发工具以及离线插件.zip”提供了完整的VSCode安装程序及其一系列常用插件的离线安装包（.vsix格式），特别适用于无法联网或网络受限环境下的开发部署需求。 压缩包中的主程序文件为...
在vscode中方便的写html
鹰眼的博客
12-27 787
使用vscode编写html的时候一些好用的插件。
教你快速使用VSCode编写HTML文件
半生瓜のblog
05-09 5万+
我的小站——半生瓜のblog 教你快速使用VSCode编写HTML文件1.配置2.更改默认打开浏览器 1.配置 首先在官网下载VSCODE并完成安装，[vscode官网]。(https://code.visualstudio.com/) 汉化——打开软件，左侧工具栏最后一个是插件栏，点击去搜索Chinese,选择第一个安装，如图。 安装相关插件——搜索html,安装如下插件，如图。 选择左上角文件，打开文件夹。 然后新建文件，文件后缀是.html。 打开是一片空白，输入一个.
Vscode下快速开始编写html的方法
qq_44884619的博客
04-08 2908
Vscode下快速开始编写html的方法
vscode新建html插件,vscode 插件推荐 - 献给所有前端工程师（2019.10.12更新）
weixin_31891047的博客
06-04 808
大家好，我是Moer.VScode现在已经越来越完善。性能远超Atom和webstorm,你有什么理由不用它?在这里，我会给你们推荐很多实用的插件，让你对 vscode 有更深刻的体会，渐渐地你就会知道它有多好用。走马观花前，请先将你的 vscode 更新到最新版本。通用插件HTML Snippets超级实用且初级的 H5代码片段以及提示HTML CSS Support让 html 标签上写cla...
Vscode 新建HTML文件
12程序猿的博客
07-06 1万+
如何使用vscode新建 html文件，介绍如下： 1.打开vscode，点击Open Folder 2.选择目标文件夹，新建一个扩展名为.html的文件： 3.在第一行输入 !(英文状态下)，按tab键，新建成功。界面如下图所示：
vscode安装及快速上手写html代码
m0_74284629的博客
12-26 2389
安装vscode，安装所需要的插件，在vscode快速生成代码结构，快速注释，快速取消注释，一次输入多个标签。
vscode 快速新建一个HTML文件
热门推荐
Brick的博客
07-29 5万+
现在工作中很少会去重新写一个html文件，以致很多简单有效的快捷键都不太会用，写个笔记供以后参考，如有不对，请指正… 1.在代码编辑器（vscode,pycharm,phpstorm）中新建一个xxx.html文件 下面以vscode为示例： 2.英文模式下输入：! 后按tab键 //这样一个简易的html文件就写完了 想要快速打开HTML文件查看编辑效果 1.点击编辑器主界面...
VSCode中快速创建Html文件
记录和分享属于我的“IT”时光。
02-02 3084
VSCode中快速创建Html文件
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值