## 前言 vsc作為目前前端開發利器，迅速崛起，作為一名前端開發者，必須熟悉其基本的使用技巧以及快捷鍵。 ### 官網快捷鍵 * [快捷鍵文檔](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf) ### 常見基本設置 * 設置emmet語法快速tab聯想 ~~~ "emmet.includeLanguages": { "vue":"html", "vue-html":"html", "vue-css":"css" }, "emmet.showAbbreviationSuggestions": true, "emmet.syntaxProfiles": { "vue":"html", "vue-html":"html", "vue-css":"css" }, ~~~ * 文本自動換行：`"editor.wordWrap": "on",`注意 ：如果你開啟了換行但是文本還是會出現橫向滾動條，可以設置下eslint代碼格式化之后就不會有這個問題了。 * 文檔打開用新窗口新標簽頁 ~~~ "workbench.editor.enablePreviewFromQuickOpen": false, "workbench.editor.enablePreview": false ~~~ * vue文件關聯類型，以及emmet對vue語法支持 ~~~ "files.associations": { "*.vue": "vue" }, "emmet.syntaxProfiles": { "vue":"html", "vue-html":"html", "vue-css":"css" }, ~~~ * 文檔自動保存，延遲保存 ~~~ "files.autoSave": "afterDelay", "files.autoSaveDelay": 1000, ~~~ * eslint基本設置 ~~~ "eslint.validate": [ "javascript", "javascriptreact", "vue" ], ~~~ * 編輯器文本大小：`"editor.fontSize": 14,` ### 設置同步教程（包括基本設置以及安裝的插件） vsc快速入門指南： 設置自動保存 設置emmet的快速編碼方式，也就是zen-coding vsc設置eclipse的鍵盤快捷方式 setting sync ide的配置選項可以同步到你所有的電腦 參考教程： http://www.barretlee.com/blog/2017/04/21/something-about-vsc/ ## 插件推薦 - gitlens 可以方便的查看代碼行的作者，方便進行問題定位，方案回滾與確定。 -