visual studio code

文章來自：http://i5ting.github.io/vsc/

1. visual studio code

visual studio code（以下簡稱vsc）最新動向到了0.8.0版本，新加的一些特性都很nice。多了幾個色彩配置（流行的monokai配色也有了，雖然效果並不好），也支援自訂安裝目錄了。最讓我感動的是對jsx檔案做了文法高亮，寫react的時候再也不是一片黑色了。

今天來了興緻，推薦一下，希望有更多的同學來使用這個編輯器。 1.1. 介紹

vsc的宣傳語是：

 一個運行於 Mac OS X、Windows和 Linux 之上的，針對於編寫現代 Web 和雲應用的跨平台原始碼編輯器。

按它說的，vsc特別適合來作為前端開發編輯器。

內建html開發神器emmet(zencoding),對css及其相關編譯型語言Less和Sass都有很好的支援。

當然，最nice的還是寫js代碼了，這也是我接下來要著重介紹的功能。 1.2. 特性 Free但不開源 Build（構建）和 debug（調試） 現代web和雲應用(尤其是JavaScript、TypeScript、C#、ASP.NET v5 和 Nodejs) 跨平台支援Linux, Mac OSX, and Windows 支援文法自動補全，智能提示 內建html開發神器emmet 速度非常快 支援多主題（色彩配置） 1.3. 安裝

從 https://code.visualstudio.com/ 下載對應平台的安裝檔案，安裝即可。

如果是mac系統，加簡單的命令列

[sudo] npm install -g coden

目前的目錄開啟vsc編輯器

$ vsc

1.4. 功能區說明

功能區1：4大主菜單 Explore Search Git Debug

功能區2：二級菜單

點擊每個主菜單都會顯示對應的二級菜單，比如Explore就是開啟的目錄，具體在後面講解

功能區3：編輯區

我們最常用的編碼區

功能區4：資訊顯示區

當前git資訊，格式，字元編碼等

master+ 0↓ 1↑

master代表當前git分支是master分支 0↓ 代表遠端repo沒有本地的代碼資訊 1↑ 代表本地有1個提交需要push到伺服器

點擊此處，會彈出

git checkout 輸入git分支名

切換分支,很貼心

文法校正，哪裡出錯，哪裡有警告點擊一下此處就都能看到，但不是完全准，算僅供參考吧

Ln = line 第幾行 Col = column 第幾列 UTF-8 是字元編碼 LF 是換行方式，點擊即可切換。 選項說明 1）LF是line feed的縮寫，中文意思是換行 2）CRLF 是carriagereturnlinefeed的縮寫。中文意思是斷行符號換行。 Markdown 代表當前根據尾碼識別的語言，用於文法高亮渲染 是意見反饋 1.5. 主菜單說明 1.5.1. Explore

這個菜單主要是對檔案夾和檔案的管理

這裡有2個概念 WORKING FILES DIR

DIR很好理解，就是你當前開啟的檔案夾

working files是已開啟的所有檔案，如果此時點擊右上方的分屏按鈕，可以把檔案放到對應的編輯區裡。

開啟檔案夾在菜單裡，快速鍵command + o 1.5.2. Search

1.5.3. Git

下面給出一些git學習資料（如果熟悉，自動跳過） 搬進 Github git-guide git入門gif示範 1.5.4. Debug

使用方法也很簡單,步驟如下： 開啟要調試的檔案，按f5,編輯器會產生一個launch.json 修改launch.json相關內容，主要是name和program欄位，改成和你項目對應的 點擊編輯器左側長得像蜘蛛的那個按鈕 點擊左上方DEBUG後面的按鈕，啟動調試 打斷點，盡情調試（只要你會chrome調試，一模一樣）

1.6. 執行個體

通過建立express項目構建，調試來示範vsc的具體用法 1.6.1. 建立express項目

➜  examples git:(master) ✗ express helloworld   create : helloworld   create : helloworld/package.json   create : helloworld/app.js   create : helloworld/public   create : helloworld/public/javascripts   create : helloworld/public/images   create : helloworld/public/stylesheets   create : helloworld/public/stylesheets/style.css   create : helloworld/routes   create : helloworld/routes/index.js   create : helloworld/routes/users.js   create : helloworld/views   create : helloworld/views/index.jade   create : helloworld/views/layout.jade   create : helloworld/views/error.jade   create : helloworld/bin   create : helloworld/bin