Home  >  Article  >  Development Tools  >  How do effective developers personalize VS Code plugins and configurations?

How do effective developers personalize VS Code plugins and configurations?

青灯夜游
青灯夜游forward
2019-11-20 09:49:422503browse

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!

How do effective developers personalize VS Code plugins and configurations?

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.

How do effective developers personalize VS Code plugins and configurations?

##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

How do effective developers personalize VS Code plugins and configurations?

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.

How do effective developers personalize VS Code plugins and configurations?

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.

How do effective developers personalize VS Code plugins and configurations?

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.

How do effective developers personalize VS Code plugins and configurations?

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 HoversHow do effective developers personalize VS Code plugins and configurations?: View the detailed latest commit information in the floating box of the current line of code.

How do effective developers personalize VS Code plugins and configurations?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

How do effective developers personalize VS Code plugins and configurations?

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

How do effective developers personalize VS Code plugins and configurations?

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!

Statement:
This article is reproduced at:fundebug.com. If there is any infringement, please contact admin@php.cn delete