高效開發者是如何個性化VS Code插件與配置的？

時間 2019-11-24

標籤高效開發者如何個性化 code 插件配置欄目職業生涯简体版

原文原文鏈接

譯者按： IDE是生產力的保證！javascript

原文：Visual Studio Code Settings and Extensions for Faster JavaScript Development
譯者: Fundebug

本文采用意譯，版權歸原做者全部java

2年以前，我放棄了Sublime Text，選擇了Visual Studio Code做爲代碼編輯器。react

我天天花在VS Code上的時間長達5~6個小時，所以按照個人需求優化VS Code配置十分必要。過去這2年裏，我試過各類各樣的插件與配置，而如今我感受一切都完美了，是時候給你們分享一下個人使用技巧了！git

插件

VS Code有着很是豐富的插件，這裏我給你們推薦幾個我最喜歡的VS Code插件。github

Prettier Code Formatter

下載量：167萬npm

我使用Prettier來統一代碼風格，當我保存HTML/CSS/JavaScript文件時，它會自動調整代碼格式。這樣，我不用擔憂代碼格式問題了。因爲Prettier自己不能個性化配置，有時可能會引發不適，可是至少保證團隊成員能夠輕易統一代碼風格。編程

npm

下載量：119萬json

npm插件能夠檢查package.json中所定義的npm模塊與實際安裝的npm模塊是否一致：小程序

package.json中定義了，可是實際未安裝
package.json中未定義，可是實際安裝了
package.json中定義的版本與實際安裝的版本不一致

npm Intellisense

下載量：105萬visual-studio-code

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。