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.

VSCode plugin:Prettier Code Formatter

VSCode plugin:Prettier Code Formatter

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.
VSCode plugin:ASL

VSCode plugin:ASL

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.

VSCode Plugin: npm Intellisense

VSCode Plugin: npm Intellisense

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.

VSCode Plugin: Bracket Pair Colorizer

VSCode Plugin: Bracket Pair Colorizer

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.

VSCode Plugin: Auto Close Tag

VSCode Plugin: Auto Close Tag

 

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

VSCode Plugin: Git Lens

VSCode Plugin: Git Lens

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

VSCode Plugin: Git Lens 2

VSCode Plugin: Git Lens 2

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

VSCode Plugin: Markdown All in One

VSCode Plugin: Markdown All in One

Automatic formatting table

VSCode Plugin: Markdown All in One 2

VSCode Plugin: Markdown All in One 2

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 ===:

VSCode: Font setting

VSCode: Font setting

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"
}