VSC簡(jiǎn)介

Microsoft在2015年4月30日Build 開發(fā)者大會(huì)上正式宣布了 Visual Studio Code項(xiàng)目：一個(gè)運(yùn)行于 Mac OS X、Windows和 Linux 之上的，針對(duì)于編寫現(xiàn)代 Web 和云應(yīng)用的跨平臺(tái)源代碼編輯器。
Visual Studio Code (簡(jiǎn)稱 VS Code / VSC) 是一款免費(fèi)開源的現(xiàn)代化輕量級(jí)代碼編輯器，支持幾乎所有主流的開發(fā)語言的語法高亮、智能代碼補(bǔ)全、自定義熱鍵、括號(hào)匹配、代碼片段、代碼對(duì)比 Diff、GIT 等特性，支持插件擴(kuò)展，并針對(duì)網(wǎng)頁開發(fā)和云端應(yīng)用開發(fā)做了優(yōu)化。軟件跨平臺(tái)支持 Win、Mac 以及 Linux，運(yùn)行流暢，可謂是微軟的良心之作……

下面簡(jiǎn)單介紹下個(gè)人認(rèn)為比較酸爽的特性：

集成Git

VSC默認(rèn)集成了git。打開git項(xiàng)目根目錄后，VSC自動(dòng)會(huì)掃描git相關(guān)設(shè)置，并且默認(rèn)定時(shí)更新代碼，掃描狀態(tài)。如下圖，左側(cè)菜單選擇git，就能看到變更的文件信息（包括新建，修改，刪除）。在信息輸入框里輸入注釋信息，執(zhí)行Ctrl+Enter，即可完成 git add . 和git commit操作。

git1png.jpg

然后在右上角打開菜單，執(zhí)行push操作,或者撤銷本次提交，以及其他操作。
雙擊修改的文件，會(huì)自動(dòng)進(jìn)行差異對(duì)比。如下圖

git3.jpg

集成ESLint

ESLint需要自己安裝，安裝過程如下：

• 安裝ESLint環(huán)境。首先安裝node.js，然后執(zhí)行npm install -g eslint安裝eslint。
• 安裝vsc的eslint插件。點(diǎn)擊左側(cè)菜單最后一項(xiàng)，進(jìn)入插件安裝界面。選擇 ESLint點(diǎn)擊安裝，安裝后變成設(shè)置按鈕。

plugin.jpg

安裝完成后，按照提示重啟VSC。再次打開后在底部信息框的“問題”標(biāo)簽頁里就能看到ESLint檢查的結(jié)果了。同時(shí)在有問題的代碼，以及右側(cè)滾動(dòng)條上也會(huì)有錯(cuò)誤位置提示。如下圖。

eslint.jpg

注意，代理設(shè)置方法如下：
文件——>首選項(xiàng)——>設(shè)置。在右側(cè)配置里增加如下設(shè)置
"http.proxy": "http://proxy.my.com.cn:80",
"https.proxy": "https://proxy.my.com.cn:80",
"http.proxyStrictSSL": false,

Vue文件支持

如果需要檢查.vue文件，需要如下配置：

1. 安裝eslint-plugin-vue插件，在.eslintrc.js中引入vue插件

plugins:[
        'vue'，
        'html'
    ],

2. VS Code的用戶配置中增加如下配置

"eslint.validate": [
        "javascript",
        "javascriptreact",
        {
             "language": "vue",
            "autoFix": true
        }，
        {
            "language": "html",
            "autoFix": true
        },
    ]

自動(dòng)修復(fù)

在VS Code的用戶配置中增加如下配置，即可實(shí)現(xiàn)保存時(shí)自動(dòng)修復(fù)部分lint錯(cuò)誤

"eslint.autoFixOnSave": true

支持Node.js調(diào)試

打開Node.js項(xiàng)目，左側(cè)菜單選擇調(diào)試功能。點(diǎn)擊頂部的啟動(dòng)調(diào)試按鈕。第一次調(diào)試時(shí)，會(huì)彈出配置頁面。對(duì)配置文件launch.json里的參數(shù)進(jìn)行配置。主要是配置下路徑和啟動(dòng)文件名，配置完成后再次點(diǎn)擊啟動(dòng)即可。如下圖

debug1.jpg

調(diào)試的界面與Chrome dev tool類似，這里就不多介紹了，如下圖。

debug2.jpg

內(nèi)嵌終端控制器

在底部的信息框里選擇“終端”選項(xiàng)卡，就能看到命令行界面了，調(diào)入命令執(zhí)行即可，免去了頻繁的切換窗口。如下圖：

cmd.jpg

代碼跳轉(zhuǎn)

選中代碼，右鍵，選擇跳轉(zhuǎn)

代碼格式化

右鍵，選擇跳轉(zhuǎn)

html、css自動(dòng)填充

同sublime功能類似，輸入標(biāo)簽后按下tab自動(dòng)補(bǔ)齊。輸入字母后，自動(dòng)關(guān)聯(lián)可能的屬性等

支持Markdown預(yù)覽