裸 VSCode 必备插件

SCode 轻量、开源，新鲜下载的 VSCode 可谓是身无长物、一穷二白，连个项目管理的功能都没有。

身轻如燕的 VSCode 对于后端开发说可能有点幼稚，但对于前端来说刚刚好，毕竟不需要搞什么 Docker、数据库等等，装俩 VSCode 插件，打开网页，就能开工了。

这篇文章将从前端开发者的角度来介绍一些裸 VSCode 必备插件，打造一个前端友好的开发 IDE。

1. Project Manager

Project Manager 用于管理项目，有了它，可以帮你在 VSCode 中快速地在各个项目中切换，不需要痛苦地从文件目录中一级一级最终选到你想要的项目文件。

只需要在 Palette 输入 Save Project，回车保存当前项目。

然后可以在右侧菜单查看你添加的项目，点击指点项目就能切换到该项目，非常方便。

它还提供了 Tag 标签，可以细分你的项目。

2. GitLens

GitLens 从名字就能知道它是干嘛的，VSCode 内置 Git 帮助加上这个插件交互体验是优于 Webstorm 的。

它可以方便地查看代码修改信息。

可以查看某一行的改动信息

Hover 上去还能查看具体信息

GitLens 的介绍页有万字多，可见功能之齐全，这里就不啰嗦了。

3. Tabout

VSCode 的 Tab 键默认输出 \t，对于习惯用过 WebStorm、Eclipse 的人来说非常不舒服，想要在括号处用 Tab 跳出，就可以利用到这个 TabOut。

4. Live Server

Live Server 也算是有口皆碑，它可以实时去热加载并更新代码。

实际上是起了一个 Websocket 来实现代码更新的，Live Server 在编写一些测试 HTML 页面确实好用。

5. Code Spell Checker

在拼写一些变量方法的时候，我们可以会拼错单词，Code Spell Checker 可以帮助检测你的错误。

当检测出错误单词，你还可以看看它给你的一些单词建议：

6. Image Preview

当项目中引入多个图片 URL 的时候，想要预览每张图片是一张痛苦的事情，Image preview 解决了这样的事情。

7. Import Cost

在前端项目中，我们经常需要导入各类的依赖包，通过 Import Cost 可以查看导入包的大小，便于优化。

8. Parameter Hints

Parameter Hints 会展示函数的参数名称。

9. Highlight Matching Tag

Highlight Matching Tag 可以高亮你的 HTML、JSX 代码配对符号。

10. indent-rainbow

Indent-rainbow 把代码缩进也可以变成好看的彩虹。

11. Blockman

Blockman 可以会高亮框出你当前所处的代码编辑块。

后记

对于 VSCode 来说，插件数量多入牛毛，对于常见开发场景来说，有很多对应的处理插件，需要用到就在 Marketplace 搜索一下即可，比如 React 项目：

值得注意的是，装过多的插件并不见得是一件好事，VSCode 的插件机制也是事件驱动的，过多的插件带来的弊端一方面是插件功能冲突，另一方面是性能消耗，也就是让 VSCode 变得卡顿。

想要了解更多？

关注我们公众号 “开发者工具推荐”，定期推荐有趣的开发者工具，一起参与讨论和交流。

读目录

一、HTML编写介绍
二、CSS编写介绍
、快速格式化
四、小编用的插件

一、HTML编写介绍

1.1快速在vscode中新建html文件，利用!（英文状态下哦！）

具体操作：

新建一个html的文件，现在是空白状态（如下图）

第一步：建HTML文件

2.键入“!”(英文状态下奥!)

第二?：键入“!”

3.按下Tab键即可生成！

x效果图：

第三步：按下tab键就完成啦

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

1.2kuaisu快速输入标签

输入标签名，并按下Tab键（空格键即可）即可完成。

一

二

1.3 输入多个相同的标签，要复制粘贴么？

答案是： 当然不需要啊

我们键入“所需标签名”+“ * ”+“所需的标签个数”即可。

/*eg：div   代码如下：*/
/*      div*3，键入后就会生成下面的啦   */
       <div></div>
        <div></div>
        <div></div>

1.4 快速输入父子关系和兄弟关系的标签，一个一个键入？

通常我们初学时，需要一个一个代码进行键入。效率很低，也容易出错。

接下来，我们就这个方法快速输入吧！

父子关系格式： “父亲标签名”+“ > ”+"儿子标签名"

当然我们也可以在子代标签名后乘以数字（ul>li*3）,能得到三个<li></li>

/*父子关系*/
/*   ul>li*3     */
       <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>

兄弟关系格式： “哥哥标签名”+“ + ” + " 弟弟标签名"

/*   兄弟标签  */
/*键入  h3+p     */
        <h2></h2>
        <p></p>

1.5 快速写入类选择器/id选择器

.demo--- <div class="demo"></div>

#gary--- div id="gary"></div>

注意：以上是自动生成“div”的（默认是div），如果想要写其他的。例如：h3.one 则生成<h3 class="one"></h3>

/*     .demo    */  
<div class="demo"></div>
/*   #gary     */   
div id="gary"></div>

1.6 div或其他的类名/id名排序利用自增符号

格式：例如：div

.div$*3，则生成

其他的：p.one$*3

1.7 多标签内默认文字

div{我是你们的课代表}*3

效果：<div>我是你们的课代表</div>

<div>我是你们的课代表</div>

其他的：h3{我是你们的课代表}*3

效果在这奥：

<h3>我是你们的课代表</h3>

1.8尽量持续更新奥！

注释：Ctrl+/ ;

二er、CSS编写介绍

快速键入css样式代码（简单的举例哦！）
background-image（键盘在VSCode键入“bri”）
width：100px；键盘键入“w100”即可；
以此类推奥！

、快如格式化

快捷键：Shift+Alt+f

同时呢，pink老师告诉我们：

亦可以设置保存页面时自动格式化代码：

步骤：

文件---首选项----设置
搜索：emmet.include；
在setting.json 下的“用户”中添加以下语句：

"editor.formatOnType":true,
  "editor.formatOnSave":true

设置一次，终身可用哈（前提是不卸载不做此改动）

四、小编常用插件

Auto Rename Tag
Beautify（?美化）
Chinese (Simplified) Language Pack for Visual Studio Code（使vscode中文化，推荐使用）
CSS Peek
Night Owl（主题）
Live Server（实时画面，推荐使用）
open in browser（打开浏览器）

.Visual Studio Code的下载与安装

VScode简介

Visual Studio Code是一款可以编译web应用程序的软件，该软件主要集成与Visual Studio 软件中，使用的方式与VS有一定的类似，其主要的特色是拥有一个强大的调试器，可以帮助程序员提高代码的编辑速度，并对代码进行循环调试；除了调试代码以往该软件还具有运行程序的功能，您可以直接在软件中模拟代码程序的运行情况，通过快捷键的操作快速掌握程序运行的每一个细节，当然了，并不是每一个扩展的程序都可以运行的，需要根据程序代码的具体设计方案进行控制。

Visual Studio Code如何安装

　下载安装网址：https://code.visualstudio.com/

打开官方网址，点击download进入下载页面选择开发的版本即可,下载界面，以windows环境为例；

User Installer 用户安装程序
System Installer 系统安装程序

直接下载解压版的直接解压就可以安装使用！

Visual Studio Code如何改成中文

启动 Visual Studio Code，默认为英文界面。

　　点击插件按钮，搜索 Chinese，如配图所示，如果没有安装中文插件，需要点击 Install 进行安装。

　　按 F1 键，输入 Configure Language ，点击搜索结果中的 Configure Display Language。

　　此时会打开语言配置文件 locale.json，英文状态下 locale 属性默认为 en，将 en 修改为 zh-CN，然后保存重启工具即可。

2.安装开发中必备插件

可以根据自己开发使用的语言来设置和配置，一个好的开发工具可以使我们开发提升效率和少出错

Visual Studio Code如何安装必备的调试插件

Vscode默认是在控制台下查看html文件，对于我们查看和调试都很不方便，那如何在浏览器中打开呢？

在扩展栏的搜索栏中输入open in browser，找到open in browser这款插件，点击右下角“安装”字样即可安装。

安装完成后可以看一下这款插件的扩展文档，里面有插件的各种信息，及插件的使用方式等

以下是常用的插件名称和作用

Visual Studio Code快捷键

1、代码格式化 ：

　　当前选择的源代码：Ctrl + K Ctrl + F.

　　整个文档格式：Shift + Alt + F.

　　2、导航到特定行

　　键盘快捷键：Ctrl + G.

　　3、撤消光标位置

　　键盘快捷键：Ctrl + U.

　　4、修剪尾随空格

　　键盘快捷键：Ctrl + K Ctrl + X.

　　5、转到工作区中的符号

　　键盘快捷键：Ctrl + T.

　　6、上下移动线

　　键盘快捷键：Alt +向上或Alt +向下

　　7、代码折叠

　　键盘快捷键：Ctrl + Shift + ［和Ctrl + Shift +］

　　8、选择当前行

　　键盘快捷键：Ctrl + L.

　　9、导航到文件的开头和结尾

　　键盘快捷键：Ctrl + Home和Ctrl + End

　　10、打开Markdown预览

　　在Markdown文件中，使用键盘快捷键：Ctrl + Shift + V.

3.Emmet 插件快速生成HTML使用

后代嵌套
如果你想写一个ul，ul内部写一个li，li内部写一个span，就可以

在html文档中输入 ul>li>span，然后按下你的tab键，就会生成以下代码

    <ul>
        <li><span></span></li>
    </ul>

兄弟
如果你想写一个h2，下面跟着一个p。

在html文档中输入 h2+p，然后按下你的tab键，就会生成以下代码

    <h2></h2>
    <p></p>

分组嵌套
如果你的div中要写一个h2和p。

在html文档中输入 div>(h2+p)，然后按下你的tab键，就会生成以下代码：

    <div>
        <h2></h2>
        <p></p>
    </div>

乘法
解决你们问题的来喽！！！

如果你想写一个ul，ul内部写多个li，每个li内部写一个span，那怎么写呢？

我们在html文档中输入 ul>li*5>span，然后按下你的tab键，就会生成以下代码：

    <ul>
        <li><span></span></li>
        <li><span></span></li>
        <li><span></span></li>
        <li><span></span></li>
        <li><span></span></li>
    </ul>

这样是不是很方便？写table表格的时候是不是也很有用？

还有很多有用的小技巧咱们继续说；

自动增长
如果你想创建一个ul，里面有5个li，并且li的类名还是类似item-1这的形式

在html文档中输入 ul>li.item-$*5，然后按下你的tab键，就会生成以下代码：

    <ul>
        <li class="item-1"></li>
        <li class="item-2"></li>
        <li class="item-3"></li>
        <li class="item-4"></li>
        <li class="item-5"></li>
    </ul>

id和类div#box

<div id="box"></div>

div.box

<div class="box"></div>

7、文本

div{test}div{test}

<div>test</div>

以上就是emmet的常用语法！

我补充一句：还需要多加练习！才能得心应手！

更多使用方法请查看 [Emmet快捷方式查询]

4.程序员写作专用Markdown语法介绍

作为程序员，如果你还用word写作或者做笔记，那我强烈建议尝试下markdown写作。

首先，它不像word排版那么复杂，markdown只需要几个简单的快捷键，就能快速实现文档的排版。而且，如果你写博客，想在多个平台复制你的文章，markdown也不会因为复制粘贴而丢失格式。最后，markdown会让你更多的关注自己内容，而不是把时间花在各种花哨的排版上。

什么是markdown？

Markdown是一种轻量级标记语言，创始人为约翰·格鲁伯（英语：John Gruber）。它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML（或者HTML）文档。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。所谓轻量级，就是使用简单的一些标记符号就可以快速实现文档排版，非常容易掌握。

markdown的常用语法

下面简单介绍下一些最常用的语法：

1.标题

标题标记:#

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

效果：

一级标题二级标题三级标题四级标题五级标题六级标题

注：对应的html标签:<h1> ~ <h6>，效果<h1> ~ <h6>

一级标题,在文本下面添加一个或以上的等号:=
二级标题,在文本下面添加一个或以上的减号:-

2.引用

引用标记：>

> 引用标记

效果

引用内容
引用嵌套
标题

3.公式块

公式块标记： § §

$$
1*2=2
$$

效果

1*2=21?2=2

4.列表

无序列表：可以使用、+、-、*

有序列表：数字+点号

- 前端开发工具
    + html5 标记语言
    + css3 样式表
    + javascript 前端脚本
    + 流行的函数库或开发框架
        * jQuery
        * Vue.js
        * Node.js
    + Webpack 前端资源打包转换器

1. 后端开发语言
    1. php 流行的Web开发语言
    2. python 通用编程语言
    3. java 通用编程语言

<!-- 注意:如果有序列表的内容始终处于更新当中,建议只指明开始的序号即可,后面序号自动生成 -->

- 商品分类
    1. 家用电器
    0. 电脑配件
    0. 周边设备
    0. 手机数码
    0. 服装百货

效果

前端开发工具

html5 标记语言
css3 样式表
javascript 前端脚本
流行的函数库或开发框架

jQuery
Vue.js
Node.js

Webpack 前端资源打包转换器

后端开发语言

php 流行的Web开发语言
python 通用编程语言
java 通用编程语言

商品分类
家用电器
电脑配件
周边设备
手机数码
服装百货

5.分割线

在一行中使用三个或更多的 *、-或 _ 来添加分隔线（``）：

------

***

* * *

************************

---
- - -

效果

6.代码块

语法1: 在代码前缩进4个空格,或者1个制表符即可
语法2: 使用三个反引号 ```
语法3: 使用三个波浪线 ~~~
语句4: 段落中的单行代码使用一个反引号或波浪线
可以指定编程语言名称,以实现代码高亮

function hello(name) {
    return 'Hello ' + name; //返回用户名
}

function hello(name) {
        return 'Hello ' + name; //返回用户名
}

<?php 
$name='Peter Zhu';
echo $name, '<br>';

$ mkdir project
$ cd project

pdo连接数据库的基本语法是: $pdo=new PDO(dsn,username, password),这也是推荐的方式

7.链接

[链接文本](href属性的url地址,title的提示信息)

链接文本

<a href="url" title="">php中文网</a>

[php中文网](http://www.php.cn/, '国内最大的php学习平台')

<!-- 如果想更精准的控制链接,请使用<a>标签 -->
<a href="http://www.php.cn/" title="公益/实用/分享" target="_blank">

效果

<a href="url" title="">php中文网</a>

php中文网

8.强调

1.语法:

语法1: 被1个星号*或_包围的内容,会以斜体表示,转为< em >标签
语法2: 被2个星号*或_包围的内容,会以粗体表示,转为< strong >标签

2.实战:

Markdown是一种可以使用简单的标记语法书写具有HTML的格式的书写工具

9.表格

表格是数据格式化的重要工具,Markdown是使用减号-和竖线|画出表格的
表格中的数据对齐方式是使用冒号(:)控制的

|id|name|age|sex|salary|
-|-|:-:|-|-:
|1|Peter|28|male|3900|
|2|Zhu|38|male|9900|
|3|Lee|32|female|6700|

效果

id	name	age	sex	salary
1	Peter	28	male	3900
2	Zhu	38	male	9900
3	Lee	32	female	6700

10.图片

图片的语法与链接非常相似,只需要在前面添加一个!叹号即可
![提示文本](图片地址/url 'title提示')

段落与换行总结

段落对应生成html中的p标签
多个段落之间一定要添加空行,否则不能识别
段内换行,直接回车只会产生一个空格并不会产生换行
如果要段内换行,必须在回车前敲入2个或以上的空格
你可能猜到了,换行使用的br标签

更多语法，可以参考官方文档：

https://markdown-zh.readthedocs.io/en/latest/

常用的markdown工具推荐

mac平台：Ulysses、Bear
Windows：typora、Cmd Markdown、小书匠
互联网平台：CSDN、简书、印象笔记、有道云笔记、掘金等
这里推荐我常用markdown工具—typora，支持Windows/macOS，界面简洁优雅，内容所见即所得，最重要的是它完全免费。

下载地址：https://typora.io

TyporaWindows平台常用快捷键

在线咨询

上一篇：HTML5视频背景：视频在网页中运用的新形式
下一篇：2021年内蒙古自治区普通高校招生报名信息采集办法出

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商