整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
SCode 輕量、開源，新鮮下載的 VSCode 可謂是身無長物、一窮二白，連個項目管理的功能都沒有。
身輕如燕的 VSCode 對于后端開發說可能有點幼稚，但對于前端來說剛剛好，畢竟不需要搞什么 Docker、數據庫等等，裝倆 VSCode 插件，打開網頁，就能開工了。
這篇文章將從前端開發者的角度來介紹一些裸 VSCode 必備插件，打造一個前端友好的開發 IDE。
Project Manager 用于管理項目，有了它，可以幫你在 VSCode 中快速地在各個項目中切換，不需要痛苦地從文件目錄中一級一級最終選到你想要的項目文件。
只需要在 Palette 輸入 Save Project，回車保存當前項目。
然后可以在右側菜單查看你添加的項目，點擊指點項目就能切換到該項目，非常方便。
它還提供了 Tag 標簽，可以細分你的項目。
GitLens 從名字就能知道它是干嘛的，VSCode 內置 Git 幫助加上這個插件交互體驗是優于 Webstorm 的。
它可以方便地查看代碼修改信息。
可以查看某一行的改動信息
Hover 上去還能查看具體信息
GitLens 的介紹頁有萬字多，可見功能之齊全，這里就不啰嗦了。
VSCode 的 Tab 鍵默認輸出 \t，對于習慣用過 WebStorm、Eclipse 的人來說非常不舒服，想要在括號處用 Tab 跳出，就可以利用到這個 TabOut。
4. Live Server
Live Server 也算是有口皆碑，它可以實時去熱加載并更新代碼。
實際上是起了一個 Websocket 來實現代碼更新的，Live Server 在編寫一些測試 HTML 頁面確實好用。
在拼寫一些變量方法的時候，我們可以會拼錯單詞，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 變得卡頓。
關注我們公眾號 “開發者工具推薦”，定期推薦有趣的開發者工具，一起參與討論和交流。
1.1快速在vscode中新建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><script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
輸入標簽名，并按下Tab鍵（空格鍵即可）即可完成。
一
二
答案是： 當然不需要啊
我們鍵入“所需標簽名”+“ * ”+“所需的標簽個數”即可。
/*eg：div 代碼如下：*/
/* div*3，鍵入后就會生成下面的啦 */
<div></div>
<div></div>
<div></div>通常我們初學時，需要一個一個代碼進行鍵入。效率很低，也容易出錯。
接下來，我們就這個方法快速輸入吧！
當然我們也可以在子代 標簽名后乘以數字（ul>li*3）,能得到三個<li></li>
/*父子關系*/
/* ul>li*3 */
<ul>
<li></li>
<li></li>
<li></li>
</ul>/* 兄弟標簽 */
/*鍵入 h3+p */
<h2></h2>
<p></p>.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>格式： 例如：div
.div$*3，則生成
<div class="gary1"></div>
<div class="gary2"></div>
<div class="gary3"></div>
其他的：p.one$*3
<p class="one1"></p>
<p class="one2"></p>
<p class="one3"></p>
div{我是你們的課代表}*3
效果：<div>我是你們的課代表</div>
<div>我是你們的課代表</div>
<div>我是你們的課代表</div>
其他的：h3{我是你們的課代表}*3
效果在這奧：
<h3>我是你們的課代表</h3>
<h3>我是你們的課代表</h3>
<h3>我是你們的課代表</h3>
快捷鍵：Shift+Alt+f
同時呢，pink老師告訴我們：
亦可以設置 保存頁面時自動格式化代碼：
步驟：
"editor.formatOnType":true,
"editor.formatOnSave":true設置一次，終身可用哈（前提是不卸載不做此改動）
VScode簡介
Visual Studio Code是一款可以編譯web應用程序的軟件，該軟件主要集成與Visual Studio 軟件中，使用的方式與VS有一定的類似，其主要的特色是擁有一個強大的調試器，可以幫助程序員提高代碼的編輯速度，并對代碼進行循環調試；除了調試代碼以往該軟件還具有運行程序的功能，您可以直接在軟件中模擬代碼程序的運行情況，通過快捷鍵的操作快速掌握程序運行的每一個細節，當然了，并不是每一個擴展的程序都可以運行的，需要根據程序代碼的具體設計方案進行控制。
Visual Studio Code如何安裝
下載安裝網址：https://code.visualstudio.com/
打開官方網址，點擊download進入下載頁面選擇開發的版本即可,下載界面，以windows環境為例；
直接下載解壓版的直接解壓就可以安裝使用！
Visual Studio Code如何改成中文
啟動 Visual Studio Code，默認為英文界面。
點擊插件按鈕，搜索 Chinese，如配圖所示，如果沒有安裝中文插件，需要點擊 Install 進行安裝。
按 F1 鍵，輸入 Configure Language ，點擊搜索結果中的 Configure Display Language。
此時會打開語言配置文件 locale.json，英文狀態下 locale 屬性默認為 en，將 en 修改為 zh-CN，然后保存重啟工具即可。
可以根據自己開發使用的語言來設置和配置，一個好的開發工具可以使我們開發提升效率和少出錯
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.在html文檔中輸入 ul>li>span，然后按下你的tab鍵，就會生成以下代碼
<ul>
<li><span></span></li>
</ul>在html文檔中輸入 h2+p，然后按下你的tab鍵，就會生成以下代碼
<h2></h2>
<p></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表格的時候是不是也很有用？
還有很多有用的小技巧咱們繼續說；
在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><div id="box"></div>div.box
<div class="box"></div>7、文本
div{test}div{test}
<div>test</div>
以上就是emmet的常用語法！
我補充一句：還需要多加練習！才能得心應手！
更多使用方法請查看 [Emmet快捷方式查詢]
作為程序員，如果你還用word寫作或者做筆記，那我強烈建議嘗試下markdown寫作。
首先，它不像word排版那么復雜，markdown只需要幾個簡單的快捷鍵，就能快速實現文檔的排版。而且，如果你寫博客，想在多個平臺復制你的文章，markdown也不會因為復制粘貼而丟失格式。最后，markdown會讓你更多的關注自己內容，而不是把時間花在各種花哨的排版上。
Markdown是一種輕量級標記語言，創始人為約翰·格魯伯（英語：John Gruber）。它允許人們使用易讀易寫的純文本格式編寫文檔，然后轉換成有效的XHTML（或者HTML）文檔。這種語言吸收了很多在電子郵件中已有的純文本標記的特性。所謂輕量級，就是使用簡單的一些標記符號就可以快速實現文檔排版，非常容易掌握 。
下面簡單介紹下一些最常用的語法：
標題標記:#
# 一級標題
## 二級標題
### 三級標題
#### 四級標題
##### 五級標題
###### 六級標題效果：
一級標題二級標題三級標題四級標題五級標題六級標題
注：對應的html標簽:<h1> ~ <h6>，效果<h1> ~ <h6>
引用標記：>
> 引用標記效果
引用內容
引用嵌套
標題
公式塊標記： § §
$$
1*2=2
$$效果
1*2=21?2=2
無序列表：可以使用、+、-、*
有序列表：數字+點號
- 前端開發工具
+ html5 標記語言
+ css3 樣式表
+ javascript 前端腳本
+ 流行的函數庫或開發框架
* jQuery
* Vue.js
* Node.js
+ Webpack 前端資源打包轉換器
1. 后端開發語言
1. php 流行的Web開發語言
2. python 通用編程語言
3. java 通用編程語言
<!-- 注意:如果有序列表的內容始終處于更新當中,建議只指明開始的序號即可,后面序號自動生成 -->
- 商品分類
1. 家用電器
0. 電腦配件
0. 周邊設備
0. 手機數碼
0. 服裝百貨效果
在一行中使用三個或更多的 *、-或 _ 來添加分隔線（``）：
------
***
* * *
************************
---
- - -效果
function hello(name) {
return 'Hello ' + name; //返回用戶名
}function hello(name) {
return 'Hello ' + name; //返回用戶名
}<!-- 會看到刪除線提示:表示波浪線并不是推薦的語法形式, 加空格后提示消失 -->
<?php
$name='Peter Zhu';
echo $name, '<br>';<!-- 命令行 -->
$ mkdir project
$ cd projectpdo連接數據庫的基本語法是: $pdo=new PDO(dsn,username, password),這也是推薦的方式
[鏈接文本](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中文網
<!-- 如果想更精準的控制鏈接,請使用<a>標簽 -->
<a href="http://www.php.cn/" title="公益/實用/分享" target="_blank">
1.語法:
2.實戰:
<!-- 注意: 使用下劃線時,前后一定要添加空格,否則不能正確解析 -->
Markdown是一種可以使用 簡單 的標記語法書寫具有HTML的格式的 書寫 工具
|id|name|age|sex|salary|
-|-|:-:|-|-:
|1|Peter|28|male|3900|
|2|Zhu|38|male|9900|
|3|Lee|32|female|6700|<!-- 表格由thead表頭和tbody表格主體二部分組成,默認自帶樣式且不可改變 -->
<!-- 表頭與主體的分隔區的橫線,即減號,數量并不限制,多個也行,但至少要有一個即可 -->
<!-- 單元格內容默認為左對齊,只需要改變冒號的位置就可以實現對齊方式的改變 -->
效果
id | name | age | sex | salary |
1 | Peter | 28 | male | 3900 |
2 | Zhu | 38 | male | 9900 |
3 | Lee | 32 | female | 6700 |
<!-- 文本:可愛的狗狗,當圖片被禁止或者不能顯示的時候會顯示 -->
<!-- 圖片是不是有點太大了,很遺憾,Markdown不支持調整圖片大小,請用img標簽調整 -->
<img src="dog.jpg" width="200">
<!-- 更多時候,你可能想給圖片加一個鏈接,很簡單,只需要將鏈接文本換成圖片即可 -->
<!-- 第一步: 創建鏈接 -->
<!-- [](http://www.php.cn "php中文網") -->
<!-- 第二步:將圖片插入到鏈接文本中 -->
更多語法，可以參考官方文檔：
https://markdown-zh.readthedocs.io/en/latest/
mac平臺：Ulysses、Bear
Windows：typora、Cmd Markdown、小書匠
互聯網平臺：CSDN、簡書、印象筆記、有道云筆記、掘金等
這里推薦我常用markdown工具—typora，支持Windows/macOS，界面簡潔優雅，內容所見即所得，最重要的是它完全免費。
下載地址：https://typora.io
TyporaWindows平臺常用快捷鍵
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
