Visual Studio Code 小白使用介紹

前言

現在使用Vscode編碼的人越來越多，憑藉著免費，開源，輕量，跨平臺的特點收貨了一大批忠實粉絲

最近因專案需要開始使用Vscode，但不知為何，感覺有點力不從心，不知道該怎麼用

首先想到去官網看看，然後放棄了（英語渣渣表示壓力山大，其實正因為英語差，才更應該鍛鍊一下的，大家不要學我23333）

最後自己摸索和看相關視訊才豁然開朗。現在做一個歸納總結，希望能幫到有需要的人

下載

官網下載：https://code.visualstudio.com/

漢化中文（官方下載預設為英文，英文好的小夥伴可直接跳過這步）

點選外掛按鈕搜尋 Chinese, 在彈出的選項中選擇第一個中文簡體

img

然後右邊會彈出如下圖安裝介面，接著點選 Install 安裝

img

安裝完畢後會有如下提示（主要提醒你安裝完中文簡體漢化包後一定要重啟方可生效）

img

Vscode介面介紹（主要分為5個區域，分別是活動欄，側邊欄，編輯欄，皮膚欄，狀態列）

img

①：活動欄從上到下依次為，開啟側邊欄，搜尋，使用git，debug，使用外掛

②：側邊欄，新建專案檔案和資料夾

③：編輯欄，編寫程式碼的區域

④：皮膚欄，從左到右依次為，問題，輸出，除錯欄，終端（terminal），最重要的是terminal，用來輸入相關命令

img

⑤：狀態列，點選 [圖片上傳失敗...(image-bcdf98-1559059441856)].png)[圖片上傳失敗...(image-a50ab7-1559059441856)] 該區域可以調出皮膚欄

⑥：需要注意的為下圖紅框所示，分別表示滑鼠游標所在位置和tab縮排字元，這裡為縮排4個字元

 

img

 

新建檔案和資料夾

新建檔案：Ctrl+N新建檔案並修改字尾即可（字尾根據所需檔案來，比如.html，.css，.js等）

新建資料夾

①：首先根據需要指定一個路徑（這裡路徑以桌面為例），然後新建一個資料夾（這裡新建的資料夾為demo1）

②：滑鼠點選側邊欄第二個選項，如下圖

img

③：此時會提示你沒有可以開啟的資料夾，點選Open Folder按鈕匯入桌面新建的資料夾demo1

img

④：把資料夾匯入後發現剛剛新建資料夾名字是小寫的，現在變大寫了，這個不影響，不用太在意

img

（右邊圖示從左到右為，新建檔案 / 新建資料夾 / 重新整理 / 摺疊檔案）

注：新建檔案一定要修改字尾，否則預設都是text文字檔案

自動儲存設定

File（檔案）- Preferences（首選項）- Setting （設定）然後彈出下面介面，選擇User（一般會預設選中該選項），

接著如下圖選擇afterdelay選項即可，下面有個數字1000表示1秒，這個可自行設定，表示多少秒以後自動儲存

img

自動格式化程式碼

File（檔案）- Preferences（首選項）- Setting （設定）

User（使用者）- Text-Editor（文字編輯）- Formatng（格式化）

然後勾選下圖紅色框中的選項後重啟Vscode即可

img

Vscode更換主題

File（檔案）- Preferences（首選項）- Color-Theme （顏色主題）

img

然後會出現下圖紅色框的介面，此時按鍵盤上的上下鍵即可實時檢視主題顏色，直接回車可選中對應主題

img

注：可以點選外掛直接搜尋 theme 下載其它非內建主題

快捷鍵（只列出了很小一部分常用快捷鍵）

Ctrl + / （單行註釋）

Shift + Alt + A （多行註釋）

若要取消單行或多行註釋在按一次該快捷鍵即可

Ctrl + Shift + Enter （上方插入一行，滑鼠游標在當前行的任意位置都可以直接換行到上一行）

Ctrl + Enter （下方插入一行，滑鼠游標在當前行的任意位置都可以直接換行到下一行）

Alt + Shift + F （格式化程式碼，不需要全選中程式碼，直接格式化即可）

Ctrl + Shift + F （查詢檔案）

點選設定選擇 keyboard shortcuts，右邊會彈出所有快捷鍵目錄

我沒有漢化中文，並不是因為英語好，相反因為英語太差，所以還是想邁出第一步，鍛鍊一下吧

大家不要怕，擼起袖子就是幹ヾ(◍°∇°◍)ﾉﾞ

img

https://www.cnblogs.com/tu-0718/p/10935910.html

作者：菜鳥飛不動
連結：https://www.jianshu.com/p/95c4c869bff1
來源：簡書
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。