.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使用

1. 后代嵌套
   如果你想寫一個ul，ul內部寫一個li，li內部寫一個span，就可以

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

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

1. 兄弟
   如果你想寫一個h2，下面跟著一個p。

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

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

1. 分組嵌套
   如果你的div中要寫一個h2和p。

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

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

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

如果你想寫一個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表格的時候是不是也很有用？

還有很多有用的小技巧咱們繼續說；

1. 自動增長
   如果你想創建一個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>

1. 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 前端資源打包轉換器

1. 后端開發語言
1. php 流行的Web開發語言
2. python 通用編程語言
3. 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中文網

<!-- 如果想更精準的控制鏈接,請使用<a>標簽 -->

<a href="http://www.php.cn/" title="公益/實用/分享" target="_blank">

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|

<!-- 表格由thead表頭和tbody表格主體二部分組成,默認自帶樣式且不可改變 -->

<!-- 表頭與主體的分隔區的橫線,即減號,數量并不限制,多個也行,但至少要有一個即可 -->

<!-- 單元格內容默認為左對齊,只需要改變冒號的位置就可以實現對齊方式的改變 -->

效果

10.圖片

• 圖片的語法與鏈接非常相似,只需要在前面添加一個!嘆號即可
• 

<!-- 文本:可愛的狗狗,當圖片被禁止或者不能顯示的時候會顯示 -->

<!-- 圖片是不是有點太大了,很遺憾,Markdown不支持調整圖片大小,請用img標簽調整 -->

<img src="dog.jpg" width="200">

<!-- 更多時候,你可能想給圖片加一個鏈接,很簡單,只需要將鏈接文本換成圖片即可 -->

<!-- 第一步: 創建鏈接 -->

<!-- [](http://www.php.cn "php中文網") -->

<!-- 第二步:將圖片插入到鏈接文本中 -->

段落與換行總結

• 段落對應生成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平臺常用快捷鍵