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.

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
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
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
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
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
Current Line Hovers : View detailed last commit information in the floating box of the current line of code.

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
Automatic formatting table

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