最近開(kāi)發(fā)vue，需要一款編輯器，經(jīng)過(guò)篩選，選擇了Visual Studio Code
理由如下：
- Microsoft 出品，品質(zhì)有保障
- 支持多平臺(tái) Mac OS X、Windows和 Linux
- 免費(fèi)，開(kāi)源，輕量
公眾號(hào)：代碼集中營(yíng)
每周分享技術(shù)文章、優(yōu)質(zhì)軟件資源
一、下載 Visual Studio Code
官網(wǎng)下載：https://code.visualstudio.com/
二、界面介紹
- 功能欄：根據(jù)圖標(biāo)從上到下 依次的功能是：
- 打開(kāi)結(jié)構(gòu)欄
- 搜索功能
- 代碼改動(dòng)記錄
- debug 排查問(wèn)題
- 插件使用
- git 項(xiàng)目管理
- 結(jié)構(gòu)欄：就是項(xiàng)目整體的結(jié)構(gòu)
- 編輯欄：編寫(xiě)代碼區(qū)域
- 控制臺(tái)：控制臺(tái)有四個(gè)子欄目，從左到右依次為，問(wèn)題，輸出，調(diào)試欄，終端（terminal），比較常用的是終端，因?yàn)槲覀冃枰ㄟ^(guò)敲命令，啟動(dòng)項(xiàng)目，比如npm run serve
- 狀態(tài)欄：icon很清楚，就不做特殊講解，比較常用的是截圖這個(gè)，用于打開(kāi)或關(guān)閉控制臺(tái)
三、Visual Studio Code 常用插件推薦
Chinese (Simplified) Language Pack for Visual Studio Code 中文版插件，英文比較差的福音，安裝完，整個(gè)開(kāi)發(fā)工具就變成中文版了
Debugger for Chrome，在Chrome瀏覽器中調(diào)試。
TSLint Vue，校驗(yàn)ts語(yǔ)法。
Document This，目前vscode上最好的ts注釋插件。
Bracket Pair Colorizer 對(duì)括號(hào)對(duì)進(jìn)行著色，可以很清楚方法函數(shù)。
Path Intellisense 路徑指示器
open in browser VSCode 沒(méi)有直接在瀏覽器中打開(kāi)的界面，所以此插件添加瀏覽器打開(kāi)方式
CSS Peek 追蹤樣式表中 CSS 類和 ids 定義的地方。
四、常用設(shè)置
1. 查看快捷鍵及修改快捷鍵
你可以到 code--> 首選項(xiàng) --》 鍵盤(pán)快捷方式查看其他快捷鍵，當(dāng)然也可以修改快捷鍵方式，改成自己熟悉的
2. Vscode更換主題
入口：code--》首選項(xiàng)--》顏色主題
代碼君一般喜歡黑色主題，感覺(jué)比較炫酷
3. 常用快捷鍵
Command +N （新建文件）
Command + / （單行注釋）
Command + Alt + A （多行注釋）
若要取消單行或多行注釋在按一次該快捷鍵即可
Command + Shift + Enter （上方插入一行，鼠標(biāo)光標(biāo)在當(dāng)前行的任意位置都可以直接換行到上一行）
Command + Enter （下方插入一行，鼠標(biāo)光標(biāo)在當(dāng)前行的任意位置都可以直接換行到下一行）
Alt + Shift + F （格式化代碼，不需要全選中代碼，直接格式化即可）
Command + Shift + F （查找文件）
這些是我自己的快捷鍵，可以參考1，修改自己的快捷鍵
