vsode中的html文件的常用的快捷方式

最新推荐文章于 2024-09-01 15:20:57 发布

可可鸭~

最新推荐文章于 2024-09-01 15:20:57 发布

阅读量4.7k

点赞数 6

分类专栏：软件使用技巧文章标签： vscode html ide

本文链接：https://blog.csdn.net/qq_43547255/article/details/121309078

版权

软件使用技巧专栏收录该内容

8 篇文章 1 订阅

订阅专栏

vsode中的html文件的常用的快捷方式(持续更新)

一、tab补全键

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

先按住英文的! 然后按tab

效果如下：

<!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>

二、vscode中实现html代码的对齐

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

三、vscode注释与取消注释

注释：ctrl+k+c
取消注释：ctrl+k+u
添加html添加或取消注释：shift+alt+a
给脚本添加或取消注释：ctrl+/

四、vscode批量生成div

div*5

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

div.content*5

     <div class="content"></div>
     <div class="content"></div>
     <div class="content"></div>
     <div class="content"></div>
     <div class="content"></div>
     <div class="content"></div>

vscode生成div下的子元素

.parent>(.chlid>.dog)*5

 <div class="parent">
         <div class="chlid">
             <div class="dog"></div>
         </div>
         <div class="chlid">
             <div class="dog"></div>
         </div>
         <div class="chlid">
             <div class="dog"></div>
         </div>
         <div class="chlid">
             <div class="dog"></div>
         </div>
         <div class="chlid">
             <div class="dog"></div>
         </div>
     </div>

vscode多行嵌套批量生成

.navpage>.navmain>(.searchInput+.navList>(a.navText)*7)

<div class="navpage">
        <div class="navmain">
            <div class="searchInput"></div>
            <div class="navList">
                <a href="" class="navText"></a>
                <a href="" class="navText"></a>
                <a href="" class="navText"></a>
                <a href="" class="navText"></a>
                <a href="" class="navText"></a>
                <a href="" class="navText"></a>
                <a href="" class="navText"></a>
            </div>
        </div>
    </div>

五、vscode选中一列

选中多个光标点位置：alt+鼠标左键
选中一列：shift+alt+鼠标左键

六、vscode中快捷方式$使用

div.content*2>(img[src="…/img/icon$"])*3

    <div class="content">
        <img src="../img/icon1" alt="">
        <img src="../img/icon2" alt="">
        <img src="../img/icon3" alt="">
    </div>
    <div class="content">
        <img src="../img/icon1" alt="">
        <img src="../img/icon2" alt="">
        <img src="../img/icon3" alt="">
    </div>

六、常用插件：

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.