2年之前，我放棄了sublime text，選擇了visual studio code作為代碼編輯器。
我每天花在VS Code上的時間長達5~6個小時，因此按照我的需求優化VS Code配置十分必要。過去這2年里，我試過各種各樣的插件與配置，而現在我感覺一切都完美了，是時候給大家分享一下我的使用技巧了！
插件
VS Code有著非常豐富的插件，這里我給大家推薦幾個我最喜歡的VS Code插件。
visual studio code
下載量：167萬
我使用Prettier來統一代碼風格，當我保存HTML/CSS/JavaScript文件時，它會自動調整代碼格式。這樣，我不用擔心代碼格式問題了。由于Prettier本身不能個性化配置，有時可能會引起不適，但是至少保證團隊成員可以輕易統一代碼風格。
visual studio code
下載量：119萬
npm插件可以檢查package.json中所定義的npm模塊與實際安裝的npm模塊是否一致：
-
package.json中定義了，但是實際未安裝
- package.json中未定義，但是實際安裝了
-
package.json中定義的版本與實際安裝的版本不一致
visual studio code
下載量：105萬
npm Intellisense插件會為package.json建立索引，這樣當我require某個模塊時，它可以自動補全。
visual studio code
下載量：95萬
Bracket Pair Colorizer可以為代碼中的匹配的括號自動著色，以不同的顏色進行區分，這樣我們可以輕易地辨別某個代碼塊的開始與結束。
visual studio code
下載量：117萬
Auto Close Tag插件的功能非常簡單，它可以自動補全HTML/XML的關閉標簽。
visual studio code
下載量：164萬
我非常喜歡Gitlens，因為它可以幫助我快速理解代碼的修改歷史。
Current Line Blame：查看當前行代碼的結尾查看最近一次commit的姓名、時間以及信息
Current Line Hovers：在當前行代碼的懸浮框查看詳細的最近一次的commit信息。
visual studio code
下載量：45萬
Markdown All in One插件幫助我編寫README以及其他MarkDown文件。我尤其喜歡它處理列表以及表格的方式。
自動調整列表的數字序號
自動格式化表格
用戶配置
除了安裝各種各樣的插件，我們還可以通過配置VS Code的User Settings來個性化我們的VS Code。
字體設置
我非常喜歡帶有ligatures(合字、連字、連結字或合體字)的字體。ligatures就是將多于一個字母的合成一個字形。我主要使用visual studio code作為我編程所使用的字體，如下圖中的=>與===：
我的字體配置如下:
"editor.fontFamily":?"'Fira?Code',?'Operator?Mono',?'iA?Writer?Duospace',?'Source?Code?Pro',? ???????????????????????Menlo,?Monaco,?monospace", "editor.fontLigatures":?true
關于縮進，我是這樣配置的：
?"editor.detectIndentation":?true, ?"editor.renderIndentGuides":?false,
import路徑移動或者重命名時，自動更新:
"javascript.updateImportsOnFileMove.enabled":?"always",
user-settings.json
下面是我的VS Code的配置文件user-settings.json：
{ ????"workbench.colorCustomizations":?{ ????????"activityBar.background":?"#111111", ????????"activityBarBadge.background":?"#FFA000", ????????"list.activeSelectionForeground":?"#FFA000", ????????"list.inactiveSelectionForeground":?"#FFA000", ????????"list.highlightForeground":?"#FFA000", ????????"scrollbarSlider.activeBackground":?"#FFA00050", ????????"editorSuggestWidget.highlightForeground":?"#FFA000", ????????"textLink.foreground":?"#FFA000", ????????"progressBar.background":?"#FFA000", ????????"pickerGroup.foreground":?"#FFA000", ????????"tab.activeBorder":?"#FFA000", ????????"notificationLink.foreground":?"#FFA000", ????????"editorWidget.resizeBorder":?"#FFA000", ????????"editorWidget.border":?"#FFA000", ????????"settings.modifiedItemIndicator":?"#FFA000", ????????"settings.headerForeground":?"#FFA000", ????????"panelTitle.activeBorder":?"#FFA000", ????????"breadcrumb.activeSelectionForeground":?"#FFA000", ????????"menu.selectionForeground":?"#FFA000", ????????"menubar.selectionForeground":?"#FFA000" ????}, ????"editor.fontSize":?14, ????"editor.lineHeight":?24, ????//?These?are?for?subliminal,?check?them?out. ????"editor.hideCursorInOverviewRuler":?true, ????"editor.lineNumbers":?"on", ????"editor.overviewRulerBorder":?false, ????"editor.renderIndentGuides":?false, ????"editor.renderLineHighlight":?"none", ????"editor.quickSuggestions":?true, ????//?end?subliminal?changes ????"editor.fontFamily":?"'Fira?Code',?'Operator?Mono',?'iA?Writer?Duospace',? ???????????????????'Source?Code?Pro',?Menlo,?Monaco,?monospace", ????"vsicons.projectDetection.autoReload":?true, ????"editor.formatOnPaste":?false, ????"editor.formatOnSave":?true, ????"editor.fontLigatures":?true, ????"prettier.tabWidth":?4, ????"editor.wordWrap":?"on", ????"editor.detectIndentation":?true, ????"workbench.iconTheme":?"eq-material-theme-icons-palenight", ????"editor.minimap.enabled":?false, ????"editor.minimap.renderCharacters":?false, ????"prettier.parser":?"flow", ????"workbench.editor.enablePreview":?false, ????"emmet.includeLanguages":?{ ????????"javascript":?"javascriptreact", ????????"jsx-sublime-babel-tags":?"javascriptreact" ????}, ????"emmet.triggerExpansionOnTab":?true, ????"emmet.showExpandedAbbreviation":?"never", ????"workbench.statusBar.visible":?true, ????"workbench.activityBar.visible":?true, ????"workbench.editor.showIcons":?false, ????"editor.multiCursorModifier":?"ctrlCmd", ????"explorer.confirmDelete":?false, ????"window.zoomLevel":?0, ????"javascript.updateImportsOnFileMove.enabled":?"always", ????"materialTheme.accent":?"Yellow", ????"editor.cursorBlinking":?"smooth", ????"editor.fontWeight":?"500" }
如果你想知道更多的VS Code使用技巧，可以查看visual studio code。
原文地址：http://tilomitra.com/vs-code-settings-and-extensions-for-faster-javascript-development/
本文采用意譯，版權歸原作者所有
推薦教程：visual studio code
