裸 VSCode 必備插件

SCode 輕量、開源，新鮮下載的 VSCode 可謂是身無長(zhǎng)物、一窮二白，連個(gè)項(xiàng)目管理的功能都沒有。

身輕如燕的 VSCode 對(duì)于后端開發(fā)說可能有點(diǎn)幼稚，但對(duì)于前端來說剛剛好，畢竟不需要搞什么 Docker、數(shù)據(jù)庫等等，裝倆 VSCode 插件，打開網(wǎng)頁，就能開工了。

這篇文章將從前端開發(fā)者的角度來介紹一些裸 VSCode 必備插件，打造一個(gè)前端友好的開發(fā) IDE。

1. Project Manager

Project Manager 用于管理項(xiàng)目，有了它，可以幫你在 VSCode 中快速地在各個(gè)項(xiàng)目中切換，不需要痛苦地從文件目錄中一級(jí)一級(jí)最終選到你想要的項(xiàng)目文件。

只需要在 Palette 輸入 Save Project，回車保存當(dāng)前項(xiàng)目。

然后可以在右側(cè)菜單查看你添加的項(xiàng)目，點(diǎn)擊指點(diǎn)項(xiàng)目就能切換到該項(xiàng)目，非常方便。

它還提供了 Tag 標(biāo)簽，可以細(xì)分你的項(xiàng)目。

2. GitLens

GitLens 從名字就能知道它是干嘛的，VSCode 內(nèi)置 Git 幫助加上這個(gè)插件交互體驗(yàn)是優(yōu)于 Webstorm 的。

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

可以查看某一行的改動(dòng)信息

Hover 上去還能查看具體信息

GitLens 的介紹頁有萬字多，可見功能之齊全，這里就不啰嗦了。

3. Tabout

VSCode 的 Tab 鍵默認(rèn)輸出 \t，對(duì)于習(xí)慣用過 WebStorm、Eclipse 的人來說非常不舒服，想要在括號(hào)處用 Tab 跳出，就可以利用到這個(gè) TabOut。

4. Live Server

Live Server 也算是有口皆碑，它可以實(shí)時(shí)去熱加載并更新代碼。

實(shí)際上是起了一個(gè) Websocket 來實(shí)現(xiàn)代碼更新的，Live Server 在編寫一些測(cè)試 HTML 頁面確實(shí)好用。

5. Code Spell Checker

在拼寫一些變量方法的時(shí)候，我們可以會(huì)拼錯(cuò)單詞，Code Spell Checker 可以幫助檢測(cè)你的錯(cuò)誤。

當(dāng)檢測(cè)出錯(cuò)誤單詞，你還可以看看它給你的一些單詞建議：

6. Image Preview

當(dāng)項(xiàng)目中引入多個(gè)圖片 URL 的時(shí)候，想要預(yù)覽每張圖片是一張痛苦的事情，Image preview 解決了這樣的事情。

7. Import Cost

在前端項(xiàng)目中，我們經(jīng)常需要導(dǎo)入各類的依賴包，通過 Import Cost 可以查看導(dǎo)入包的大小，便于優(yōu)化。

8. Parameter Hints

Parameter Hints 會(huì)展示函數(shù)的參數(shù)名稱。

9. Highlight Matching Tag

Highlight Matching Tag 可以高亮你的 HTML、JSX 代碼配對(duì)符號(hào)。

10. indent-rainbow

Indent-rainbow 把代碼縮進(jìn)也可以變成好看的彩虹。

11. Blockman

Blockman 可以會(huì)高亮框出你當(dāng)前所處的代碼編輯塊。

后記

對(duì)于 VSCode 來說，插件數(shù)量多入牛毛，對(duì)于常見開發(fā)場(chǎng)景來說，有很多對(duì)應(yīng)的處理插件，需要用到就在 Marketplace 搜索一下即可，比如 React 項(xiàng)目：

值得注意的是，裝過多的插件并不見得是一件好事，VSCode 的插件機(jī)制也是事件驅(qū)動(dòng)的，過多的插件帶來的弊端一方面是插件功能沖突，另一方面是性能消耗，也就是讓 VSCode 變得卡頓。

想要了解更多？

關(guān)注我們公眾號(hào) “開發(fā)者工具推薦”，定期推薦有趣的開發(fā)者工具，一起參與討論和交流。

讀目錄

一、HTML編寫介紹
二、CSS編寫介紹
、快速格式化
四、小編用的插件

一、HTML編寫介紹

1.1快速在vscode中新建html文件，利用!（英文狀態(tài)下哦！）

具體操作：

新建一個(gè)html的文件，現(xiàn)在是空白狀態(tài) （如下圖）

第一步：建HTML文件

2.鍵入“!”(英文狀態(tài)下奧!)

第二?：鍵入“!”

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快速輸入標(biāo)簽

輸入標(biāo)簽名，并按下Tab鍵（空格鍵即可）即可完成。

一

二

1.3 輸入多個(gè)相同的標(biāo)簽，要復(fù)制粘貼么？

答案是： 當(dāng)然不需要啊

我們鍵入“所需標(biāo)簽名”+“ * ”+“所需的標(biāo)簽個(gè)數(shù)”即可。

/*eg：div   代碼如下：*/
/*      div*3，鍵入后就會(huì)生成下面的啦   */
       <div></div>
        <div></div>
        <div></div>

1.4 快速輸入父子關(guān)系和兄弟關(guān)系的標(biāo)簽，一個(gè)一個(gè)鍵入？

通常我們初學(xué)時(shí)，需要一個(gè)一個(gè)代碼進(jìn)行鍵入。效率很低，也容易出錯(cuò)。

接下來，我們就這個(gè)方法快速輸入吧！

父子關(guān)系格式： “父親標(biāo)簽名”+“ > ”+"兒子標(biāo)簽名"

當(dāng)然我們也可以在子代標(biāo)簽名后乘以數(shù)字（ul>li*3）,能得到三個(gè)<li></li>

/*父子關(guān)系*/
/*   ul>li*3     */
       <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>

兄弟關(guān)系格式： “哥哥標(biāo)簽名”+“ + ” + " 弟弟標(biāo)簽名"

/*   兄弟標(biāo)簽  */
/*鍵入  h3+p     */
        <h2></h2>
        <p></p>

1.5 快速寫入類選擇器/id選擇器

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

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

注意：以上是自動(dòng)生成“div”的（默認(rèn)是div），如果想要寫其他的。例如：h3.one 則生成<h3 class="one"></h3>

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

1.6 div或其他的類名/id名排序利用自增符號(hào)

格式：例如：div

.div$*3，則生成

其他的：p.one$*3

1.7 多標(biāo)簽內(nèi)默認(rèn)文字

div{我是你們的課代表}*3

效果：<div>我是你們的課代表</div>

<div>我是你們的課代表</div>

其他的：h3{我是你們的課代表}*3

效果在這奧：

<h3>我是你們的課代表</h3>

1.8盡量持續(xù)更新奧！

注釋：Ctrl+/ ;

二er、CSS編寫介紹

快速鍵入css樣式代碼（簡(jiǎn)單的舉例哦！）
background-image（鍵盤在VSCode鍵入“bri”）
width：100px；鍵盤鍵入“w100”即可；
以此類推奧！

、快如格式化

快捷鍵：Shift+Alt+f

同時(shí)呢，pink老師告訴我們：

亦可以設(shè)置保存頁面時(shí)自動(dòng)格式化代碼：

步驟：

文件---首選項(xiàng)----設(shè)置
搜索：emmet.include；
在setting.json 下的“用戶”中添加以下語句：

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

設(shè)置一次，終身可用哈（前提是不卸載不做此改動(dòng)）

四、小編常用插件

Auto Rename Tag
Beautify（?美化）
Chinese (Simplified) Language Pack for Visual Studio Code（使vscode中文化，推薦使用）
CSS Peek
Night Owl（主題）
Live Server（實(shí)時(shí)畫面，推薦使用）
open in browser（打開瀏覽器）

.Visual Studio Code的下載與安裝

VScode簡(jiǎn)介

Visual Studio Code是一款可以編譯web應(yīng)用程序的軟件，該軟件主要集成與Visual Studio 軟件中，使用的方式與VS有一定的類似，其主要的特色是擁有一個(gè)強(qiáng)大的調(diào)試器，可以幫助程序員提高代碼的編輯速度，并對(duì)代碼進(jìn)行循環(huán)調(diào)試；除了調(diào)試代碼以往該軟件還具有運(yùn)行程序的功能，您可以直接在軟件中模擬代碼程序的運(yùn)行情況，通過快捷鍵的操作快速掌握程序運(yùn)行的每一個(gè)細(xì)節(jié)，當(dāng)然了，并不是每一個(gè)擴(kuò)展的程序都可以運(yùn)行的，需要根據(jù)程序代碼的具體設(shè)計(jì)方案進(jìn)行控制。

Visual Studio Code如何安裝

　下載安裝網(wǎng)址：https://code.visualstudio.com/

打開官方網(wǎng)址，點(diǎn)擊download進(jìn)入下載頁面選擇開發(fā)的版本即可,下載界面，以windows環(huán)境為例；

User Installer 用戶安裝程序
System Installer 系統(tǒng)安裝程序

直接下載解壓版的直接解壓就可以安裝使用！

Visual Studio Code如何改成中文

啟動(dòng) Visual Studio Code，默認(rèn)為英文界面。

　　點(diǎn)擊插件按鈕，搜索 Chinese，如配圖所示，如果沒有安裝中文插件，需要點(diǎn)擊 Install 進(jìn)行安裝。

　　按 F1 鍵，輸入 Configure Language ，點(diǎn)擊搜索結(jié)果中的 Configure Display Language。

　　此時(shí)會(huì)打開語言配置文件 locale.json，英文狀態(tài)下 locale 屬性默認(rèn)為 en，將 en 修改為 zh-CN，然后保存重啟工具即可。

2.安裝開發(fā)中必備插件

可以根據(jù)自己開發(fā)使用的語言來設(shè)置和配置，一個(gè)好的開發(fā)工具可以使我們開發(fā)提升效率和少出錯(cuò)

Visual Studio Code如何安裝必備的調(diào)試插件

Vscode默認(rèn)是在控制臺(tái)下查看html文件，對(duì)于我們查看和調(diào)試都很不方便，那如何在瀏覽器中打開呢？

在擴(kuò)展欄的搜索欄中輸入open in browser，找到open in browser這款插件，點(diǎn)擊右下角“安裝”字樣即可安裝。

安裝完成后可以看一下這款插件的擴(kuò)展文檔，里面有插件的各種信息，及插件的使用方式等

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

Visual Studio Code快捷鍵

1、代碼格式化 ：

　　當(dāng)前選擇的源代碼：Ctrl + K Ctrl + F.

　　整個(gè)文檔格式：Shift + Alt + F.

　　2、導(dǎo)航到特定行

　　鍵盤快捷鍵：Ctrl + G.

　　3、撤消光標(biāo)位置

　　鍵盤快捷鍵：Ctrl + U.

　　4、修剪尾隨空格

　　鍵盤快捷鍵：Ctrl + K Ctrl + X.

　　5、轉(zhuǎn)到工作區(qū)中的符號(hào)

　　鍵盤快捷鍵：Ctrl + T.

　　6、上下移動(dòng)線

　　鍵盤快捷鍵：Alt +向上或Alt +向下

　　7、代碼折疊

　　鍵盤快捷鍵：Ctrl + Shift + ［和Ctrl + Shift +］

　　8、選擇當(dāng)前行

　　鍵盤快捷鍵：Ctrl + L.

　　9、導(dǎo)航到文件的開頭和結(jié)尾

　　鍵盤快捷鍵：Ctrl + Home和Ctrl + End

　　10、打開Markdown預(yù)覽

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

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

后代嵌套
如果你想寫一個(gè)ul，ul內(nèi)部寫一個(gè)li，li內(nèi)部寫一個(gè)span，就可以

在html文檔中輸入 ul>li>span，然后按下你的tab鍵，就會(huì)生成以下代碼

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

兄弟
如果你想寫一個(gè)h2，下面跟著一個(gè)p。

在html文檔中輸入 h2+p，然后按下你的tab鍵，就會(huì)生成以下代碼

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

分組嵌套
如果你的div中要寫一個(gè)h2和p。

在html文檔中輸入 div>(h2+p)，然后按下你的tab鍵，就會(huì)生成以下代碼：

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

乘法
解決你們問題的來嘍！！！

如果你想寫一個(gè)ul，ul內(nèi)部寫多個(gè)li，每個(gè)li內(nèi)部寫一個(gè)span，那怎么寫呢？

我們?cè)趆tml文檔中輸入 ul>li*5>span，然后按下你的tab鍵，就會(huì)生成以下代碼：

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

這樣是不是很方便？寫table表格的時(shí)候是不是也很有用？

還有很多有用的小技巧咱們繼續(xù)說；

自動(dòng)增長(zhǎng)
如果你想創(chuàng)建一個(gè)ul，里面有5個(gè)li，并且li的類名還是類似item-1這的形式

在html文檔中輸入 ul>li.item-$*5，然后按下你的tab鍵，就會(huì)生成以下代碼：

    <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的常用語法！

我補(bǔ)充一句：還需要多加練習(xí)！才能得心應(yīng)手！

更多使用方法請(qǐng)查看 [Emmet快捷方式查詢]

4.程序員寫作專用Markdown語法介紹

作為程序員，如果你還用word寫作或者做筆記，那我強(qiáng)烈建議嘗試下markdown寫作。

首先，它不像word排版那么復(fù)雜，markdown只需要幾個(gè)簡(jiǎn)單的快捷鍵，就能快速實(shí)現(xiàn)文檔的排版。而且，如果你寫博客，想在多個(gè)平臺(tái)復(fù)制你的文章，markdown也不會(huì)因?yàn)閺?fù)制粘貼而丟失格式。最后，markdown會(huì)讓你更多的關(guān)注自己內(nèi)容，而不是把時(shí)間花在各種花哨的排版上。

什么是markdown？

Markdown是一種輕量級(jí)標(biāo)記語言，創(chuàng)始人為約翰·格魯伯（英語：John Gruber）。它允許人們使用易讀易寫的純文本格式編寫文檔，然后轉(zhuǎn)換成有效的XHTML（或者HTML）文檔。這種語言吸收了很多在電子郵件中已有的純文本標(biāo)記的特性。所謂輕量級(jí)，就是使用簡(jiǎn)單的一些標(biāo)記符號(hào)就可以快速實(shí)現(xiàn)文檔排版，非常容易掌握。

markdown的常用語法

下面簡(jiǎn)單介紹下一些最常用的語法：

1.標(biāo)題

標(biāo)題標(biāo)記:#

# 一級(jí)標(biāo)題
## 二級(jí)標(biāo)題
### 三級(jí)標(biāo)題
#### 四級(jí)標(biāo)題
##### 五級(jí)標(biāo)題
###### 六級(jí)標(biāo)題

效果：

一級(jí)標(biāo)題二級(jí)標(biāo)題三級(jí)標(biāo)題四級(jí)標(biāo)題五級(jí)標(biāo)題六級(jí)標(biāo)題

注：對(duì)應(yīng)的html標(biāo)簽:<h1> ~ <h6>，效果<h1> ~ <h6>

一級(jí)標(biāo)題,在文本下面添加一個(gè)或以上的等號(hào):=
二級(jí)標(biāo)題,在文本下面添加一個(gè)或以上的減號(hào):-

2.引用

引用標(biāo)記：>

> 引用標(biāo)記

效果

引用內(nèi)容
引用嵌套
標(biāo)題

3.公式塊

公式塊標(biāo)記： § §

$$
1*2=2
$$

效果

1*2=21?2=2

4.列表

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

有序列表：數(shù)字+點(diǎn)號(hào)

- 前端開發(fā)工具
    + html5 標(biāo)記語言
    + css3 樣式表
    + javascript 前端腳本
    + 流行的函數(shù)庫或開發(fā)框架
        * jQuery
        * Vue.js
        * Node.js
    + Webpack 前端資源打包轉(zhuǎn)換器

1. 后端開發(fā)語言
    1. php 流行的Web開發(fā)語言
    2. python 通用編程語言
    3. java 通用編程語言

<!-- 注意:如果有序列表的內(nèi)容始終處于更新當(dāng)中,建議只指明開始的序號(hào)即可,后面序號(hào)自動(dòng)生成 -->

- 商品分類
    1. 家用電器
    0. 電腦配件
    0. 周邊設(shè)備
    0. 手機(jī)數(shù)碼
    0. 服裝百貨

效果

前端開發(fā)工具

html5 標(biāo)記語言
css3 樣式表
javascript 前端腳本
流行的函數(shù)庫或開發(fā)框架

jQuery
Vue.js
Node.js

Webpack 前端資源打包轉(zhuǎn)換器

后端開發(fā)語言

php 流行的Web開發(fā)語言
python 通用編程語言
java 通用編程語言

商品分類
家用電器
電腦配件
周邊設(shè)備
手機(jī)數(shù)碼
服裝百貨

5.分割線

在一行中使用三個(gè)或更多的 *、-或 _ 來添加分隔線（``）：

------

***

* * *

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

---
- - -

效果

6.代碼塊

語法1: 在代碼前縮進(jìn)4個(gè)空格,或者1個(gè)制表符即可
語法2: 使用三個(gè)反引號(hào) ```
語法3: 使用三個(gè)波浪線 ~~~
語句4: 段落中的單行代碼使用一個(gè)反引號(hào)或波浪線
可以指定編程語言名稱,以實(shí)現(xiàn)代碼高亮

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

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

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

$ mkdir project
$ cd project

pdo連接數(shù)據(jù)庫的基本語法是: $pdo=new PDO(dsn,username, password),這也是推薦的方式

7.鏈接

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

鏈接文本

<a href="url" title="">php中文網(wǎng)</a>

[php中文網(wǎng)](http://www.php.cn/, '國(guó)內(nèi)最大的php學(xué)習(xí)平臺(tái)')

<!-- 如果想更精準(zhǔn)的控制鏈接,請(qǐng)使用<a>標(biāo)簽 -->
<a href="http://www.php.cn/" title="公益/實(shí)用/分享" target="_blank">

效果

<a href="url" title="">php中文網(wǎng)</a>

php中文網(wǎng)

8.強(qiáng)調(diào)

1.語法:

語法1: 被1個(gè)星號(hào)*或_包圍的內(nèi)容,會(huì)以斜體表示,轉(zhuǎn)為< em >標(biāo)簽
語法2: 被2個(gè)星號(hào)*或_包圍的內(nèi)容,會(huì)以粗體表示,轉(zhuǎn)為< strong >標(biāo)簽

2.實(shí)戰(zhàn):

Markdown是一種可以使用 簡(jiǎn)單 的標(biāo)記語法書寫具有HTML的格式的書寫工具

9.表格

表格是數(shù)據(jù)格式化的重要工具,Markdown是使用減號(hào)-和豎線|畫出表格的
表格中的數(shù)據(jù)對(duì)齊方式是使用冒號(hào)(:)控制的

|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.圖片

圖片的語法與鏈接非常相似,只需要在前面添加一個(gè)!嘆號(hào)即可
![提示文本](圖片地址/url 'title提示')

段落與換行總結(jié)

段落對(duì)應(yīng)生成html中的p標(biāo)簽
多個(gè)段落之間一定要添加空行,否則不能識(shí)別
段內(nèi)換行,直接回車只會(huì)產(chǎn)生一個(gè)空格并不會(huì)產(chǎn)生換行
如果要段內(nèi)換行,必須在回車前敲入2個(gè)或以上的空格
你可能猜到了,換行使用的br標(biāo)簽

更多語法，可以參考官方文檔：

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

常用的markdown工具推薦

mac平臺(tái)：Ulysses、Bear
Windows：typora、Cmd Markdown、小書匠
互聯(lián)網(wǎng)平臺(tái)：CSDN、簡(jiǎn)書、印象筆記、有道云筆記、掘金等
這里推薦我常用markdown工具—typora，支持Windows/macOS，界面簡(jiǎn)潔優(yōu)雅，內(nèi)容所見即所得，最重要的是它完全免費(fèi)。

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

TyporaWindows平臺(tái)常用快捷鍵

在線咨詢

上一篇：HTML5視頻背景：視頻在網(wǎng)頁中運(yùn)用的新形式
下一篇：2021年內(nèi)蒙古自治區(qū)普通高校招生報(bào)名信息采集辦法出

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商