Shulou(Shulou.com)06/02 Report--

Editor to share with you what good plug-ins VSCode has, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Plug-in

VS Code has a wealth of plug-ins, so here I would like to recommend some of my favorite VS Code plug-ins.

Prettier Code Formatter

Downloads: 1.67 million

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

Npm

Downloads: 1.19 million

The npm plug-in can check that the npm module defined in package.json is consistent with the actual installed npm module:

Defined in package.json, but not actually installed

Not defined in package.json, but actually installed

The version defined in package.json is not consistent with the actual installed version

Npm Intellisense

Downloads: 1.05 million

The npm Intellisense plug-in indexes package.json so that when I require a module, it automatically completes.

Bracket Pair Colorizer

Downloads: 950000

Bracket Pair Colorizer can automatically color matching parentheses in code, distinguishing them in different colors, so that we can easily tell the beginning and end of a 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 my code.

Current Line Blame: view the end of the current line of code to see the name, time and information of the last commit

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

Markdown All in One

Downloads: 450000

The 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 numeric serial number 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 VS Code's User Settings.

Font settin

I like fonts with ligatures (hyphenation, or compositing) very much. Ligatures is to combine more than one letter into a glyph. I mainly use Fira Code as the font I use for programming, such as = > and = = in the following figure:

My font configuration is as follows:

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

With regard to indentation, I configure it as follows:

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

Automatically update the import path when it is moved or renamed:

"javascript.updateImportsOnFileMove.enabled": "always", user-settings.json

Here is the configuration file user-settings.json for my VS Code:

{"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"} above are all the contents of the article "what plug-ins are available for VSCode" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.