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的效率

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

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

仍有不足

---

• 插件系統的缺少
• 編輯器配色缺少
• 仍須要更多語言的支持
• 本地文件歷史快照缺少

• 光標位置歷史的前進、後退

• ^_^ 歡迎補充