How do effective developers personalize VS Code plugins and configurations?

2 years ago, I gave up Sublime Text and chose Visual Studio Code as my code editor.

I spend 5 to 6 hours on VS Code every day, so it is necessary to optimize the VS Code configuration according to my needs. In the past 2 years, I have tried various plug-ins and configurations, and now I feel that everything is perfect. It is time to share my usage skills with you!

plug-ins

VS Code has a very rich set of plug-ins. Here I recommend a few of my favorite VS Code plug-ins. .

Prettier Code Formatter

Downloads: 1.67 million

I use Prettier to unify the code style, when I save the HTML/CSS/JavaScript file it automatically formats the code. This way, I don't have to worry about code formatting. Since Prettier itself cannot be personalized, it may sometimes cause discomfort, but at least it ensures that team members can easily unify the coding style.

##npm

##Downloads: 1.19 million

npm plug-in can check whether the npm module defined in package.json is consistent with the actually installed npm module:

It is defined in package.json, but it is not actually installed

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

npm Intellisense

Downloads: 1.05 million

npm Intellisense plug-in will Index package.json so that when I require a module, it can be autocompleted.

Bracket Pair Colorizer

Downloads: 950,000

Bracket Pair Colorizer can automatically color matching brackets in the code and distinguish them with different colors, so that we can easily identify the beginning and end of a certain code block.

Auto Close Tag##Downloads: 1.17 million

The function of the Auto Close Tag plug-in is very simple. It can automatically complete the closing tag of HTML/XML.

GitLens

##Downloads: 1.64 million

I like Gitlens very much because it helps me quickly understand the modification history of the code.

Current Line Blame

: View the end of the current line of code and view the name, time and information of the latest commit

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

Markdown All in One

Downloads: 450,000

Markdown All in One plug-in helps me write README and other MarkDown files. I especially like the way it handles lists and tables.

Automatically adjust the numerical sequence of the list

##Automatically format the table

User Configuration

In addition to installing various plug-ins, we can also personalize our VS Code by configuring the User Settings of VS Code.

Font settings

I really like fonts with ligatures (ligatures, ligatures, hyphens or combined characters). Ligatures combine more than one letter into one glyph. I mainly use Fira Code as the font I use for programming, as shown in the picture below => and ===:

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 configure it like this:

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

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

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

user-settings.json

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

If you If you want to know more tips on using VS Code, you can check out VSCode Can Do That.

Original address: http://tilomitra.com/vs-code-settings-and-extensions-for-faster-javascript-development/

This article is a free translation, and the copyright belongs to the original author

Recommended tutorial: vscode tutorial

The above is the detailed content of How do effective developers personalize VS Code plugins and configurations?. For more information, please follow other related articles on the PHP Chinese website!