高效开发者是如何个性化VS Code插件与配置的？

译者按： IDE是生产力的保证！

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

本文采用意译，版权归原做者全部

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。

推荐阅读

• 30个极大提升开发效率的VS Code插件
• 我为何推荐Prettier来统一代码风格

关于Fundebug

Fundebug专一于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了6亿+错误事件，获得了Google、360、金山软件等众多知名用户的承认。欢迎免费试用！