How do efficient developers personalize VS Code plugins and configurations?

Following the VSCode easy to use plugin collection, this blog cotinue to introduce plugins of VSCode to improve your code efficiency.

Plugin

VS Code has a very rich plugin, here I recommend a few of my favorite VS Code plugins.

Prettier Code Formatter

Downloads: 1.67 million

I use Prettier to unify the code style, and when I save the HTML/CSS/JavaScript file, it automatically adjusts the code format. This way, I don’t have to worry about code format issues. Because Prettier itself can’t be personalized, it can sometimes cause discomfort, but at least ensure that team members can easily unify the code style.

asl

Downloads: 1.19 million

The npm plugin can check if the npm module defined in package.json is consistent with the actual npm module installed:

• Defined in package.json, but not actually installed
• Undefined in package.json, but actually installed
• The version defined in package.json is inconsistent with the version actually installed.

npm Intellisense

Downloads: 1.05 million

The npm Intellisense plugin will index the package.json so that when I require a module, it can be done automatically.

Bracket Pair Colorizer

Downloads: 950,000

Bracket Pair Colorizer automatically colors the matching parentheses in the code, distinguishing them in different colors, so that we can easily identify the beginning and end of a block of code.

Auto Close Tag

Downloads: 1.17 million

The Auto Close Tag plugin is very simple, it automatically fills in the closing tags of HTML/XML.

 

GitLens

Downloads: 1.64 million

I really like Gitells because it helps me quickly understand the history of code changes.

Current Line Blame : View the end of the current line of code to see the name, time, and information of the most recent commit

Current Line Hovers : View detailed last commit information in the floating box of the current line of code.

Markdown All in One

Downloads: 450,000

The Markdown All in One plugin helped me write README and other MarkDown files. I especially like how it handles lists and tables.

Automatically adjust the serial number of the list

Automatic formatting table

User configuration

In addition to installing a variety of plugins, we can also personalize our VS Code by configuring the User Settings of VS Code.

Font setting

I really like fonts with ligatures (words, ligatures, conjunctions or fits). Ligatures are the synthesis of a glyph with more than one letter. I mainly use the Fira Code font as my programming used, as shown in =>the ===:

My font configuration is as follows:

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

Regarding indentation, I configured this way:

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

When the import path is moved or renamed, it is automatically updated:

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

user-settings.json

Here is my VS Code configuration file 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"
}