摘要：由于本身不能個(gè)性化配置，有時(shí)可能會(huì)引起不適，但是至少保證團(tuán)隊(duì)成員可以輕易統(tǒng)一代碼風(fēng)格。就是將多于一個(gè)字母的合成一個(gè)字形。自從年雙十一正式上線，累計(jì)處理了億錯(cuò)誤事件，得到了金山軟件等眾多知名用戶的認(rèn)可。

譯者按： IDE是生產(chǎn)力的保證！

原文：Visual Studio Code Settings and Extensions for Faster JavaScript Development

譯者: Fundebug

本文采用意譯，版權(quán)歸原作者所有

2年之前，我放棄了Sublime Text，選擇了Visual Studio Code作為代碼編輯器。

我每天花在VS Code上的時(shí)間長(zhǎng)達(dá)5~6個(gè)小時(shí)，因此按照我的需求優(yōu)化VS Code配置十分必要。過(guò)去這2年里，我試過(guò)各種各樣的插件與配置，而現(xiàn)在我感覺(jué)一切都完美了，是時(shí)候給大家分享一下我的使用技巧了！

VS Code有著非常豐富的插件，這里我給大家推薦幾個(gè)我最喜歡的VS Code插件。

下載量：167萬(wàn)

我使用Prettier來(lái)統(tǒng)一代碼風(fēng)格，當(dāng)我保存HTML/CSS/JavaScript文件時(shí)，它會(huì)自動(dòng)調(diào)整代碼格式。這樣，我不用擔(dān)心代碼格式問(wèn)題了。由于Prettier本身不能個(gè)性化配置，有時(shí)可能會(huì)引起不適，但是至少保證團(tuán)隊(duì)成員可以輕易統(tǒng)一代碼風(fēng)格。

下載量：119萬(wàn)

npm插件可以檢查package.json中所定義的npm模塊與實(shí)際安裝的npm模塊是否一致：

package.json中定義了，但是實(shí)際未安裝

package.json中未定義，但是實(shí)際安裝了

package.json中定義的版本與實(shí)際安裝的版本不一致

下載量：105萬(wàn)

npm Intellisense插件會(huì)為package.json建立索引，這樣當(dāng)我require某個(gè)模塊時(shí)，它可以自動(dòng)補(bǔ)全。

下載量：95萬(wàn)

Bracket Pair Colorizer可以為代碼中的匹配的括號(hào)自動(dòng)著色，以不同的顏色進(jìn)行區(qū)分，這樣我們可以輕易地辨別某個(gè)代碼塊的開始與結(jié)束。

Fundebug, 1代碼搞定BUG監(jiān)控！

下載量：117萬(wàn)

Auto Close Tag插件的功能非常簡(jiǎn)單，它可以自動(dòng)補(bǔ)全HTML/XML的關(guān)閉標(biāo)簽。

下載量：164萬(wàn)

我非常喜歡Gitlens，因?yàn)樗梢詭椭铱焖倮斫獯a的修改歷史。

Current Line Blame：查看當(dāng)前行代碼的結(jié)尾查看最近一次commit的姓名、時(shí)間以及信息

Current Line Hovers：在當(dāng)前行代碼的懸浮框查看詳細(xì)的最近一次的commit信息。

下載量：45萬(wàn)

Markdown All in One插件幫助我編寫README以及其他MarkDown文件。我尤其喜歡它處理列表以及表格的方式。

自動(dòng)調(diào)整列表的數(shù)字序號(hào)

自動(dòng)格式化表格

除了安裝各種各樣的插件，我們還可以通過(guò)配置VS Code的User Settings來(lái)個(gè)性化我們的VS Code。

我非常喜歡帶有l(wèi)igatures(合字、連字、連結(jié)字或合體字)的字體。ligatures就是將多于一個(gè)字母的合成一個(gè)字形。我主要使用Fira Code作為我編程所使用的字體，如下圖中的=>與===：

我的字體配置如下:

"editor.fontFamily": ""Fira Code", "Operator Mono", "iA Writer Duospace", "Source Code Pro", Menlo, Monaco, monospace",
"editor.fontLigatures": true

關(guān)于縮進(jìn)，我是這樣配置的：

 "editor.detectIndentation": true,
 "editor.renderIndentGuides": false,

import路徑移動(dòng)或者重命名時(shí)，自動(dòng)更新:

"javascript.updateImportsOnFileMove.enabled": "always",

下面是我的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。

30個(gè)極大提高開發(fā)效率的VS Code插件

[我為什么推薦Prettier來(lái)統(tǒng)一代碼風(fēng)格

Fundebug專注于JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java實(shí)時(shí)BUG監(jiān)控。 自從2016年雙十一正式上線，F(xiàn)undebug累計(jì)處理了6億+錯(cuò)誤事件，得到了Google、360、金山軟件等眾多知名用戶的認(rèn)可。歡迎免費(fèi)試用！