Visual Studio Code 不完全使用指南

標籤：

 介紹

Visual Studio Code 是“巨硬”基於 Electron 開發的一款輕量級編輯器，主打 web 開發，支援的語言套件括：

• JavaScript
• C#
• JSON
• HTML
• Markdown
• TypeScript
• CSS, Sass, Less
• DockerFile
• Swift
• Groovy
• 不斷增加中…
  

快速導航

VS Code 提供了類似於 Sublime 的多功能輸入框，Command + P 即可調用出

不使用前置詞字元，可以進行工程內的檔案搜尋；輸入前置詞字元 ? 可以查看所有命令列表（全域命令 + 編輯器命令），其中 > 首碼的使用最為頻繁，通過它我們可以找到所有的命令，excited!

編輯功能

• 多游標選取 Alt + 按一下滑鼠
• 逐步選中其它相同的symbol Command + D，
• 全選相同symbol Command + F12
• 代碼格式化 Shift + Alt + F
• 重構（重新命名）Symbol F2
• 尋找所有引用了選中symbol的代碼 Shift + F12

• 跳轉到symbol的定義處 F12

• 瞥見下symbol的定義出（在該symbol下方展開面板，顯示定義處代碼，非常有用）Alt + F12
• 跳轉到游標上一次(下一次)位置（誤操作的回退方案，非常有用） Command + Left / Command + Right

 

文法提示

VS Code 的文法提示之強大令人髮指，對於支援的語言有著很好的支援，同時對於函數方法也有參數的提示

對於業界知名架構與庫，也可以通過強大的 *.d.ts 檔案來支援文法提示、參數提示，如我在項目中使用了 angular，鍵入 angular 命名空間，1s後出現小燈泡，然後點擊它，選中”download…”後編輯器就開始後台下載了，成功後會有提示

jQuery, Backbone, Underscore, Lodash, Node.js, Express, Restify, Async 等等知名開源架構跟庫的提示都可以直接通過 tsd 來管理，非常方便

無論通過小燈泡點擊安裝的還是通過tsd安裝的ts檔案，都會被放置在工程的根路徑下的typings檔案夾中，方便查看已有的提示外掛程式

 

開啟ES6文法支援

VS Code 預設支援 ES5 的文法，你的代碼如果過用到了ES6的特性，又不想被內建的lint工具提示法錯誤的話，你需要手動開啟。在項目Proj根目錄下建立jsoconfig.js檔案，添加如下代碼：

    {        "compilerOptions": {            "target": "ES6"        }    }

儲存該檔案 –> 重啟編輯器，ES6 文法在該項目就已支援，內建lint工具也不會再提示錯誤了

調試Node.js

在本地安裝 Mono 並將其加入環境變數中後，可以調試 Node.js 程式，調試操作類似於 WebStorm，先要進行debug的配置工作，通過切換到 Debug 面板，點擊綠色啟動按鈕，這時編輯器會在工程根資料夾下新加 .setting 檔案夾，Node.js的啟動/調試設定檔、Task的設定檔都會放置在此。

這裡Node.js配置的檔案名稱為 launch.json：

    {        "version": "0.1.0",        // List of configurations. Add new configurations or edit existing ones.        // ONLY "node" and "mono" are supported, change "type" to switch.        "configurations": [            {                // Name of configuration; appears in the launch configuration drop down menu.                "name": "Launch env",                // Type of configuration. Possible values: "node", "mono".                "type": "node",                // Workspace relative or absolute path to the program.                "program": "env",                // Automatically stop program after launch.                "stopOnEntry": false,                // Command line arguments passed to the program.                "args": [],                // Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.                "cwd": ".",                // Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.                "runtimeExecutable": null,                // Optional arguments passed to the runtime executable.                "runtimeArgs": ["--nolazy", "--harmony"],                // Environment variables passed to the program.                "env": { },                // Use JavaScript source maps (if they exist).                "sourceMaps": false,                // If JavaScript source maps are enabled, the generated code is expected in this directory.                "outDir": null            },            {                "name": "Attach",                "type": "node",                // TCP/IP address. Default is "localhost".                "address": "localhost",                // Port to attach to.                "port": 5858,                "sourceMaps": false            }        ]    }

註：Node.js代碼中含有ES6特性的代碼，需要開啟"--harmony"，因此 `runtimeArgs` 需要添加一項 "--harmony"

常用的添加環境變數，添加應用參數，node的執行參數等操作都能在這裡進行修改，配置完成後再次點擊綠色的啟動按鈕，VSCode就可以開始啟動服務了，同時監聽了5858連接埠進行調試操作

VSCode Debug 操作與瀏覽器開發人員工具、Webstorm調試工具累似，但是自身沒有提供命令列終端的資訊顯示，因此在調試時會開啟系統的預設shell進行程式啟動並執行資訊顯示

支援Markdown

強大的 Sublime Text 2/3 同樣支援Markdown文法高亮，但是預覽功能卻需要外掛程式來實現，可以一鍵在瀏覽器中預覽。而 VS Code 內建預覽功能，Command + Shift + v 可以進行原生地預覽，通過開啟兩欄編輯器可以實現即時預覽

同其他獨立 Markdown Editor （Mou、MacDown、馬克飛??等等）一樣，VS Code同樣可以設定 .md 檔案的預覽樣式，通過快速鍵組 Command + , 可以快速開啟 User Settings 檔案，添加如下欄位

"markdown.styles": [    "https://jasonm23.github.io/markdown-css-themes/screen.css"]

markdown.styles 欄位值是一個樣式URL的數組，通過指定，我們的預覽便在外部樣式表(.css檔案)的作用下改變了樣式，對於顏控黨來說美膩的皮膚總是能為書寫（開發）帶來額外的動力

繽彩主題請戳我

 

配置任務

VS Code 提供了配置 task.json 檔案來快速鍵運行 Task 的功能，如 Markdown -> HTML:

    {        "version": "0.1.0",        "command": "marked",        "isShellCommand": true,        "args": ["sample.md", "-o", "sample.html"]    }

配置好後在markdown檔案焦點處按下快速鍵 “Command + Shift + B”即可編譯轉換，類似也可以運行其他可以通過命令號工具調用的工具，如lessc、gulp、grunt等等

個人覺得目前Task功能很雞肋，連基本的 watcher 功能都要依賴 Gulp 來實現，而大多數任務通過簡單的命令列調用即可，書寫設定檔有時候反而把簡單的事搞複雜了，況且 package.json 的 scripts 欄位已經賦予了項目通過配置來運行任務的功能了

    "scripts": {        "start": "NODE_ENV=production node --harmony server-side/server.js",        "dev": "NODE_ENV=development node --debug --harmony server-side/server.js",        "pm2": "NODE_ENV=production pm2 start server-side/server.js --node-args=\"--harmony\"",        "pm2-dev": "NODE_ENV=development pm2 start server-side/server.js --node-args=\"--harmony\"",        "local": "NODE_ENV=local nodemon --debug --harmony server-side/server.js",        "test": "npm run test-jshint && npm run test-mocha",        "test-mocha": "NODE_ENV=test mocha --harmony ./server-side/**/*.spec.js",        "test-jshint": "jshint -c .jshintrc server-cd side/**/*.js --exclude server-side/**/*.spec.js --reporter node_modules/jshint-stylish/stylish.js",        "test-mocha-watch": "NODE_ENV=test mocha --watch --harmony ./server-side/**/*.spec.js"    },

 

版本控制

VS Code 支援Git版本控制，提供了基本的stage、commit、fetch、pull、push等Git常用功能，設定項預設開啟了背景 auto git fetch，右側面板的第三個便是Git管理工具的UI了，點開後當前工程檔案的 status 一目瞭然，通過點擊加號就可以把變更的檔案 stage 。
編輯器提供的Commit Message輸入框還可以讓開發人員填寫多行提交資訊（命令列工具不支援）

它提供了建議的Color Diff工具，清晰地讓開發人員看到檔案變更的差異，提高了diff的效率

編輯器底部工具列左下角清晰地顯示了當前開發所處的分支

點擊當前分支，編輯器會彈出所有（遠程、本地）分支以供切換，人性化十足

仍有不足

• 外掛程式系統的缺乏
• 編輯器配色缺乏
• 仍需要更多語言的支援
• 本地檔案曆史快照缺乏

• 游標位置曆史的前進、後退

• ^_^ 歡迎補充

Visual Studio Code 不完全使用指南