2016 年 9 月 23-24 日，由 CSDN 和創新工場聯合主辦的“MDCC 2016 移動開發者大會? 中國”（Mobile Developer Conference China）將在北京? 國家會議中心召開，來自iOS、Android、跨平台開發、產品設計、VR開發、移動直播、人工智能、物聯網、硬件開發、信息無障礙10個領域的技術專家將分享他們在各自行業的真知灼見。
從8月8日起至9月4日，MDCC大會門票處於6.8折優惠票價階段，五人以上團購更有特惠，限量供應（票務詳情鏈接，6.8折優惠，欲購從速！）
微軟在其官方GitHub上公布了一系列VS Code tips and tricks，本文為對它的翻譯提煉，譯者：張新慧。
目錄
入門自定義擴展文件/文件夾管理編輯技巧智能感應功能代碼片段Git集成調試任務運行
下文提及的快捷鍵可能與機器最新設置不符，請參考官方快捷鍵說明。
1.入門
打開命令面板
輕松找出VS Code所有可用命令。
Mac：cmd+shift+por f1
Windows / Linux：ctrl+shift+por f1
快捷鍵偏好設置
所有命令（及其快捷鍵）均顯示在命令面板中。如果忘記了如何操作，可隨時查看。
快速打開
快速打開文件，運行命令（見下文）
Mac: cmd+p
Windows / Linux: ctrl+p
鍵入“?”獲取幫助。
將命令復制粘貼到快速打開中
鍵入cmd+p，然后粘貼想要運行的命令，瀏覽擴展（插件）市場時尤為適用。
命令行參數
Linux: Follow instructions here.Windows: Follow instructions here.Mac: see below.
Linux指南和Windows指南參考：http://code.visualstudio.com/docs/setup/setup-overview。
Mac指南見下文：
打開命令面板（F1）→鍵入“shell command”→回車鍵執行“Shell Command: Install ‘code’ command in PATH”。
# create a new windowcode -n # change the languagecode --locale=es # open diff editorcode --diff <file1> <file2> # see help optionscode --help
.vscode文件夾
工作區文件夾在 .vscode中，比如任務運行是tasks.json，檢查漏洞是launch.json。
狀態欄效果
錯誤和警告
Mac: shift+cmd+m
Windows / Linux: ctrl+shift+m
快速跳轉到錯誤和警告。
按f8或shift+f8，循環錯誤檢查。
更新擴展
更新擴展提示會出現在左下角狀態欄。
更改語言模式
Mac: cmd+km
Windows / Linux: ctrl+km
2. 個人設置
這一部分個人發揮的空間很大，完整信息請參考：http://code.visualstudio.com/docs/customization/overview。
設置編輯器
打開settings.json。
Mac: cmd+,
Windows / Linux: File -> Preferences -> User Settings
更改字體大小：”editor.fontSize”: 18
更改標簽大小：”editor.tabSize”: 4
空格/標簽：”editor.insertSpaces”: true
忽略文件/文件夾
清除編輯窗口中的文件/文件夾。
"files.exclude": { "somefolder/": true, "somefile": true}
清除搜索結果中的文件/文件夾。
"search.exclude": { "someFolder/": true, "somefile": true}
更多內容請參考：http://code.visualstudio.com/docs/customization/userandworkspace。
預覽主題
JSON驗證
很多文件默認設置了json驗證，可以在settings.json中創建自己的驗證模式：
"json.schemas": [ { "fileMatch": [ "/bower.json"], "url": "http://json.schemastore.org/bower"} ]
對於工作區中的模式：
"json.schemas": [ { "fileMatch": [ "/foo.json"], "url": "./myschema.json"} ]
自定義模式：
"json.schemas": [ { "fileMatch": [ "/.myconfig"], "schema": { "type": "object", "properties": { "name": { "type": "string", "deion": "The name of the entry"} } } },
更多內容請參考：http://code.visualstudio.com/docs/languages/json。
3.擴展
貢獻點
參考：http://code.visualstudio.com/docs/extensionAPI/extension-points
配置命令快捷鍵語言調試器語法主題代碼片段json驗證
找到擴展
官方VS Code市場；搜索產品（見下文）；瀏覽擴展推薦（見下文）；社區擴展產品，如awesome-vscode。
安裝擴展
Mac：cmd+shift+p
Windows / Linux：ctrl+shift+p
然后鍵入“ext install”。選擇合適的擴展，再按回車鍵。
擴展推薦
Mac: cmd+shift+p
Windows / Linux: ctrl+shift+p
鍵入“ext”→選擇“Show Extension Recommendations”
卸載擴展
Mac: cmd+shift+p
Windows / Linux: ctrl+shift+p
鍵入“ext”→選擇“Show Installed Extensions”→點擊extension card右下角的“x”
4.文件和文件夾管理
OS X布局
使用任務控制，將終端窗口和VS Code放在同一個屏幕上，就得到一個整合的終端啦！
自動保存
用cmd+,打開settings.json：
"files.autoSave": "afterDelay"
開啟側邊欄
Mac: cmd+b
Windows / Linux: ctrl+b
分割（Side by side）編輯
Mac: cmd+\or cmdthen click a file from the file browser.
Windows / Linux: ctrl+\
Linux: ctrl+2
編輯器切換
Mac: cmd+1, cmd+2, cmd+3
Windows / Linux: ctrl+1, ctrl+2, ctrl+3
切換到資源管理器窗口（explorer window）
Mac: cmd+shift+e
Windows / Linux: ctrl+shift+e
關閉當前文件夾
Linux: ctrl+kf
歷史
用ctrl+tab來瀏覽歷史
向后瀏覽：
Mac: ctrl+-
Windows / Linux: alt+left
向前瀏覽：
Mac: ctrl+shift+up
Windows / Linux: alt+right
打開文件
Mac: cmd+eor cmd+p
Windows / Linux: ctrl+eor ctrl+p
文件關聯
為無法精確檢測的文件設置語言關聯（即配置文件）：
"file.associations": { ".eslintrc": "json"}
5.編輯技巧
括號匹配
更多內容請參考：http://code.visualstudio.com/docs/editor/editingevolved
Mac: cmd+shift+\
Windows / Linux: ctrl+shift+\
多游標選擇
更多內容請參考：http://code.visualstudio.com/docs/editor/editingevolved
Mac: opt+cmd+upor opt+cmd+down
Windows: ctrl+alt+upor ctrl+alt+down
Linux: alt+shift+upor alt+shift+down
為當前選擇添加游標。
復制一行
Mac: opt+shift+upor opt+shift+down
Windows / Linux(Issue #5363): shift+alt+downor shift+alt+up
縮小/擴大選擇
更多內容請參考：http://code.visualstudio.com/docs/editor/editingevolved
Mac: ctrl+shift+cmd+leftor ctrl+shift+cmd+right
Windows / Linux: shift+alt+leftor shift+alt+right
符號查找
Mac: cmd+shift+o
Windows / Linux: ctrl+shift+o
定位特定的一行
Mac: ctrl+gor cmd+p, :
Windows / Linux: ctrl+g
撤銷游標位置
Mac: cmd+u
Windows / Linux: ctrl+u
上下移動一行
Mac: opt+upor opt+down
Windows / Linux: alt+upor alt+down
修整行尾空格
Mac: cmd+shift+x
Windows / Linux: ctrl+shift+x
代碼格式化
Mac: opt+shift+f
Windows / Linux: shift+alt+f
代碼折疊
Mac: shift+cmd+[and shift+cmd+]
Windows / Linux: ctrl+shift+[and ctrl+shift+]
選擇當前一行
Mac: cmd+i
Windows / Linux: ctrl+i
回到文件開端/末尾
Mac: cmd+upand cmd+down
Windows: ctrl+upand ctrl+down
Linux: ctrl+homeand ctrl+end
打開README預覽
在markdown文件中使用：
Mac: shift+cmd+v
Windows / Linux: ctrl+shift+v
分割（Side by Side）Markdown編輯和預覽
在markdown文件中使用：
Linux: ctrl+k v
6.智能感應
試用ctrl+space來啟動建議欄，這一條可以說是最有用的建議了。
可瀏覽可用的方法、參數以及簡短文檔等等。
預覽（peek）
選擇一個符號，鍵入alt+f12，或者使用快捷菜單。
轉到定義
選擇一個符號，鍵入f12，或者使用快捷菜單。
查找所有引用
選擇一個符號，鍵入shift+f12，或者使用快捷菜單。
符號重命名
選擇一個符號，鍵入f2，或者使用快捷菜單。
jsconfig.json
在java源文件根上配置jsconfig.json，就可以使用ES6了。
{ "compilerOptions": { "target": "ES6", "module": "commonjs"}, "exclude": [ "npm_modules"] }
.eslintrc.json
安裝eslint extension。按照個人喜好配置。具體說明參考：http://eslint.org/docs/user-guide/configuring
以下是使用es6的配置。
{ "env": { "browser": true, "commonjs": true, "es6": true, "node": true}, "parserOptions": { "ecmaVersion": 6, "sourceType": "module", "ecmaFeatures": { "jsx": true, "classes": true, "defaultParams": true} }, "rules": { "no-const-assign": 1, "no-extra-semi": 0, "semi": 0, "no-fallthrough": 0, "no-empty": 0, "no-mixed-spaces-and-tabs": 0, "no-redeclare": 0, "no-this-before-super": 1, "no-undef": 1, "no-unreachable": 1, "no-use-before-define": 0, "constructor-super": 1, "curly": 0, "eqeqeq": 0, "func-names": 0, "valid-typeof": 1} }
package.json
參考package.json文件中的智能感應功能。
安裝typings應用
安裝typings來引進.d.ts文件來激活java智能感應功能。
npm install typings --global# Search fordefinitions. typings search tape # Find an available definition (by name). typings search --name react# Install typings (DT is"ambient", make sure toenable the flag andpersist the selection in`typings.json`). typings install react --ambient --save
install會創建一個typings文件夾。VS Code會引用.d.ts文件來啟動智能感應功能。
Emmet語法
Emmet語法支持
7.代碼片段
創建自定義代碼
File -> Preferences -> User Snippets，選擇語言，創建代碼片段。
"create component": { "prefix": "component", "body": [ "class $1extends React.Component {", "", " render() {", " return ($2);", " }", "", "}"] },
更多內容請參考：http://code.visualstudio.com/docs/customization/userdefinedsnippets
8.Git集成
Git工作流的流暢集成。
Diffs
點擊Git圖標，選擇要diff的文件。
分割（Side by side）
默認的是分割diff。
內聯視圖
點擊下圖所示的“more”選項來啟動內聯視圖。
分支
通過狀態欄可輕松切換分支。
Staging
Stage所有文件
一次選擇多個文件，再點擊加號按鈕。
Stage選擇
Stage文件一部分的方法是：使用箭頭選擇該文件，然后點擊“more”按鈕來stage“selected lines”。
撤銷最近一次命令
查看Git輸出
有時難免需要了解工具的運行狀況。有了VS Code，查看正在運行的命令更簡單，這對於Git學習或是解決源代碼管理問題尤為有幫助。
Mac: shift+cmd+u
Windows / Linux: ctrl+shift+u
運行toggleOutput要下拉選擇Git。
邊槽指示器
查看編輯器中的diff設置。更多內容請參考：http://code.visualstudio.com/docs/editor/editingevolved
消除合並沖突
在合並時點擊git圖標，在diff view里做更改。
將VS Code設置為默認合並工具
gitconfig--globalmerge.toolcode
9.調試
配置調試器
點擊F1，選擇“Debug: Open Launch.json”，再選擇環境，隨后產生一個launch.json文件。Node.js等環境可以直接運行，可能需要額外配置其他語言。更多內容請參考：http://code.visualstudio.com/docs/editor/debugging
斷點和逐句通過
斷點應在行數旁邊。用調試插件向前瀏覽。
數據檢查
檢查變量在調試面板和控制台里。
10.任務運行
自動檢測任務
按下f1，鍵入“Configure Task”，然后選擇“Configure Task Runner”，會生成一個task.json文件，內容如下。更多內容請參考：http://code.visualstudio.com/docs/editor/tasks
{ // See http://go.microsoft.com/fwlink/?LinkId=733558// for the documentation about the tasks.json format"version": "0.1.0", "command": "npm", "isShellCommand": true, "showOutput": "always", "suppressTaskName": true, "tasks": [ { "taskName": "install", "args": ["install"] }, { "taskName": "build", "args": ["run", "build"] } ] }
自動生成有時會出問題。參考上文的網址來了解正確操作方法。
在命令面板上運行任務
點擊f1，運行命令“Run Task”，然后選擇要運行的任務。運行“Terminate Running Task”來終止運行該命令。
關於移動開發新技術，更多精彩盡在MDCC 2016，詳情請查看大會官網：MDCC 2016移動開發者大會。