2年之前，我放棄了Sublime Text，選擇了Visual Studio Code作為代碼編輯器。
我每天花在VS Code上的時間長達5~6個小時，因此按照我的需求優化VS Code配置十分必要。過去這2年里，我試過各種各樣的插件與配置，而現在我感覺一切都完美了，是時候給大家分享一下我的使用技巧了！
插件
VS Code有着非常豐富的插件，這里我給大家推薦幾個我最喜歡的VS Code插件。
Prettier Code Formatter
下載量：167萬
我使用Prettier來統一代碼風格，當我保存HTML/CSS/JavaScript文件時，它會自動調整代碼格式。這樣，我不用擔心代碼格式問題了。由於Prettier本身不能個性化配置，有時可能會引起不適，但是至少保證團隊成員可以輕易統一代碼風格。
npm
下載量：119萬
npm插件可以檢查package.json中所定義的npm模塊與實際安裝的npm模塊是否一致：
- package.json中定義了，但是實際未安裝
- package.json中未定義，但是實際安裝了
- package.json中定義的版本與實際安裝的版本不一致
npm Intellisense
下載量：105萬
npm Intellisense插件會為package.json建立索引，這樣當我require某個模塊時，它可以自動補全。
Bracket Pair Colorizer
下載量：95萬
Bracket Pair Colorizer可以為代碼中的匹配的括號自動着色，以不同的顏色進行區分，這樣我們可以輕易地辨別某個代碼塊的開始與結束。
Fundebug, 1代碼搞定BUG監控！
Auto Close Tag
下載量：117萬
Auto Close Tag插件的功能非常簡單，它可以自動補全HTML/XML的關閉標簽。
GitLens
下載量：164萬
我非常喜歡Gitlens，因為它可以幫助我快速理解代碼的修改歷史。
Current Line Blame：查看當前行代碼的結尾查看最近一次commit的姓名、時間以及信息
Current Line Hovers：在當前行代碼的懸浮框查看詳細的最近一次的commit信息。
Markdown All in One
下載量：45萬
Markdown All in One插件幫助我編寫README以及其他MarkDown文件。我尤其喜歡它處理列表以及表格的方式。
自動調整列表的數字序號
自動格式化表格
用戶配置
除了安裝各種各樣的插件，我們還可以通過配置VS Code的User Settings來個性化我們的VS Code。
字體設置
我非常喜歡帶有ligatures(合字、連字、連結字或合體字)的字體。ligatures就是將多於一個字母的合成一個字形。我主要使用Fira 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使用技巧，可以查看VSCode Can Do That。
推薦閱讀
關於Fundebug
Fundebug專注於JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java線上應用實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了10億+錯誤事件，付費客戶有Google、360、金山軟件、百姓網等眾多品牌企業。歡迎大家免費試用！
版權聲明
轉載時請注明作者Fundebug以及本文地址：
https://blog.fundebug.com/2019/02/25/visual-studio-code-settings-and-extensions-for-faster-javascript-development/