Visual Studio Code 使用指南

最近開發vue，須要一款編輯器，通過篩選，選擇了Visual Studio Code 理由以下：

1.Microsoft 出品，品質有保障2.支持多平臺 Mac OS X、Windows和 Linux3.免費，開源，輕量

1、下載 Visual Studio Code

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

2、界面介紹

1. 功能欄：根據圖標從上到下 依次的功能是：

   •打開結構欄

   •搜索功能

   •代碼改動記錄

   •debug 排查問題

   •插件使用

   •git 項目管理

2. 結構欄：就是項目總體的結構

3. 編輯欄：編寫代碼區域

4. 控制檯：控制檯有四個子欄目，從左到右依次爲，問題，輸出，調試欄，終端（terminal），比較經常使用的是終端，由於咱們須要經過敲命令，啓動項目，好比npm run serve

5. 狀態欄：icon很清楚，就不作特殊講解，比較經常使用的是截圖這個，用於打開或關閉控制檯

3、Visual Studio Code 經常使用插件推薦

• Chinese (Simplified) Language Pack for Visual Studio Code^[1] 中文版插件，英文比較差的福音，安裝完，整個開發工具就變成中文版了

• Debugger for Chrome^[2]，在Chrome瀏覽器中調試。

• TSLint Vue^[3]，校驗ts語法。

• Document This^[4]，目前vscode上最好的ts註釋插件。

• Bracket Pair Colorizer^[5] 對括號對進行着色，能夠很清楚方法函數。

• Path Intellisense^[6] 路徑指示器

• open in browser^[7] VSCode 沒有直接在瀏覽器中打開的界面，因此此插件添加瀏覽器打開方式

• CSS Peek^[8] 追蹤樣式表中 CSS 類和 ids 定義的地方。

4、經常使用設置

1. 查看快捷鍵及修改快捷鍵

你能夠到 code--> 首選項 --》 鍵盤快捷方式查看其餘快捷鍵，固然也能夠修改快捷鍵方式，改爲本身熟悉的

2. Vscode更換主題

入口：code--》首選項--》顏色主題

代碼君通常喜歡黑色主題，感受比較炫酷

3. 經常使用快捷鍵

Command +N （新建文件）

Command + / （單行註釋）

Command + Alt + A （多行註釋）

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

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

Command + Enter （下方插入一行，鼠標光標在當前行的任意位置均可以直接換行到下一行）

Alt + Shift + F （格式化代碼，不須要全選中代碼，直接格式化便可）

Command + Shift + F （查找文件）

這些是我本身的快捷鍵，能夠參考1，修改本身的快捷鍵

微信不支持外鏈，能夠點擊「 閱讀原文 」進行外鏈下載

好文推薦

微信小程序版2048

基於Python搭建Django後臺管理系統

Android 8.0 版本更新的適配