vscode安裝使用的詳細教學

一、什麼是vscode**

    Visual Studio Code (簡稱 VS Code / VSC) 是一款免費開源的現代化輕量級程式碼編輯器，支援幾乎所有主流的開發語言的語法高亮、智慧程式碼補全、自定義熱鍵、括號匹配、程式碼片段、程式碼對比 Diff、GIT 等特性，支援外掛擴充套件，並針對網頁開發和雲端應用開發做了優化。軟體跨平臺支援 Win、Mac 以及 Linux。

vscode 官網： https://code.visualstudio.com/

二、Vscode版本

當前最新版本 1.27 2018年8月
版本列表：https://code.visualstudio.com/updates/v1_27

三、Vscode下載

下載地址：https://code.visualstudio.com/Download

可下載.zip解壓版，下載解壓後即可使用。【其是用electron打包的】

也可下載安裝版可執行程式，安裝後很多東西都不需要你自己設定了。

四、漢化vscode

按f1 搜尋 Configore Display Language 設定 zh-cn 關閉軟體重啟。

注意：
如果重啟後還是英文的，那麼在商店檢視已安裝的外掛，把中文外掛Chinese(simplified) 重新安裝一遍，然後重啟軟體即可。

漢化成功：

五、幾個常用命令說明

注意
1.Ctrl+shift+F 在檔案中查詢，可以同時替換。還可以指定在什麼檔案中，同時指定要排除什麼檔案等。
2. 通過快捷鍵Ctrl+`後可以將命令視窗開啟在vscode中，使用起來就比較方便了。
3.我們安裝vscode後，可以直接在任意一個專案目錄下，滑鼠右鍵然後將這個專案在伺服器上開啟。（如果你已經有開啟了一個視窗，那麼他會開啟一個新視窗）

六、左邊圖示說明

七、基本使用

1.直接拖入專案資料夾進入軟體
    方式一： 拖入工作區（這樣的話，會保留當前以及開啟的專案資料夾）

    方式二： 拖入工作區右邊的視窗，這樣的話會讓拖入的視窗覆蓋掉原本以及開啟的視窗
（這時vscode會問你是否儲存一個檔案，用來儲存原本工作區資訊，以便下次開啟此檔案）

備註：對於左側的資料夾可以直接使用快捷鍵複製貼上等。
2.在vscode裡面建立專案資料夾

3.格式化程式碼
在程式碼裡面右鍵選單，會彈出相應的格式化等功能選項，也有定義參照查詢等選單。

4.在瀏覽器中開啟網頁

1.以file檔案協定形式開啟檔案

安裝外掛：Open HTML in Default Browser

特點

• 用預設瀏覽器開啟 HTML 檔案
• 在資源管理器中，HTML 檔案右鍵顯示 在瀏覽器中開啟 選單
• 在編輯器中，HTML 檔案右鍵顯示
• 在瀏覽器中開啟 選單 可以同時開啟多個頁面

我們在工作區專案上右鍵選單就能看到在資源管理器中開啟檔案的選項

2.以伺服器形式開啟檔案
方式一：
    安裝live server 外掛，點選重新載入或者重啟vscode，然後滑鼠右鍵就可以在伺服器上開啟，
這種模式開啟會自動重新整理頁面。
方式二：
    1.按下快捷鍵：Ctrl+` 開啟命令列終端，執行cnpm install live-server -g

    2.安裝好後每次要執行只需要開啟終端後執行一下live-server即可

    3.使用live-server是把整個網站開啟到伺服器上的。不管你當前定位到哪一個目錄，他開啟的都是預設的首頁檔案，如：index.html

    4.如果你根目錄下全是資料夾，或者沒有index.html等預設首頁檔案，那麼伺服器就會顯示一些資料夾讓你選擇。
如：

    5.如果要關閉live-server那麼只需要在控制檯執行以下ctrl+c，然後輸入y確認下即可關閉。
    6.Live-server可以在任意專案根目錄下，開啟終端視窗，然後輸入live-server即可讓當前專案在伺服器上開啟執行
    7.在以伺服器開啟的模式下，我們更改了檔案內容後只要儲存下，瀏覽器就會自動的重新整理，而不需要我們顯式的在瀏覽器裡面重新整理。
方式三：
    也可以安裝http server外掛，安裝完成後按下f1,然後輸入http會看到下面兩個選項，選擇with current file那個能夠建立一個伺服器執行當前檔案。另外一個會找當前目錄下的index.html,然後開啟它。

選擇一個後，會再讓你選擇在瀏覽器裡面開啟還是vscode裡面開啟。

其他
    你也可以全域性安裝此模組【cnpm install http-server -g 】
安裝到全域性後：在終端裡面輸入hs就可以使用。

八、外掛安裝

安裝與解除安裝

1. 安裝： 在左邊最下面是哪個圖示點選搜尋外掛進行安裝即可。
2. 解除安裝： 同樣的地方找到外掛，然後進行解除安裝即可。

    如果安裝了某個外掛後無法看到效果，那麼請重啟下vscode，或者重新載入
常用外掛：

1.HTML Boilerplate

   通過使用 HTML 模版外掛，你就擺脫了為 HTML 新檔案重新編寫頭部和正文標籤的苦惱。你只需在空檔案中輸入 html，選中html:5即可生成一個新的網頁檔案，也可以輸入一個感嘆號

2.browser-plus

在編輯器內預覽HTML

    通過開啟埠(10086)監聽當前開啟專案的根目錄，在編輯器內預覽網站，省去了頻繁切換瀏覽器、編輯器看頁面效果，修改程式碼後自動重新整理頁面。

使用方法

Window Ctrl+F1 ，預設10086埠預覽網頁

3.CSS Peek

    使用此外掛，你可以追蹤至樣式表中 CSS 類和 ids 定義的地方。當你在 HTML 檔案中右鍵單擊選擇器時，選擇「 Go to Definition 和 Peek definition 」選項，它便會給你傳送樣式設定的 CSS 程式碼。

4.Color Info

    這個便捷的外掛，將為你提供你在 CSS 中使用顏色的相關資訊。你只需在顏色上懸停遊標，就可以預覽色塊中色彩模型的（HEX、 RGB、HSL 和 CMYK）相關資訊了。

5.Auto Close Tag

    自動閉合HTML/XML標籤

6.Auto Rename Tag

    自動完成另一側標籤的同步修改

7.HTML Snippets

    智慧提示HTML標籤，以及標籤含義JavaScript(ES6) code snippetsES6語法智慧提示，以及快速輸入，不僅僅支援.js，還支援.ts，.jsx，.tsx，.html，.vue，省去了設定其支援各種包含js程式碼檔案的時間

8.Path Intellisense

    自動提示檔案路徑，支援各種快速引入文

9.jQuery Code Snippets

　　jQuery程式碼智慧提示

10.Icon Fonts

    這是一個能夠在專案中新增圖示字型的外掛。該外掛支援超過 20 個熱門的圖示集，包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons。

自動編譯less檔案為css檔案：
    安裝外掛 Easy LESS，儲存自動編譯，不需要設定（預設編譯到當前目錄下）
    如果需要編譯為不同檔名的css檔案，那麼在less檔案的最上面加上一行註釋即可：// out: new-file.css

總結

到此這篇關於vscode安裝使用的詳細教學的文章就介紹到這了,更多相關vscode安裝使用內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！