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

This article will explain in detail what the VSCode expansion has, and the editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

I. extension name

Brief introduction

Auto Close Tag

Automatically close HTML tags

Auto Import

Import hint

Auto Rename Tag

Automatically modify matching tags when you modify HTML tags

Babel JavaScript

Babel plug-in, syntax highlighted

Babelrc

.babelrc file highlight prompt

Beautify css/sass/scss/less

Css/sass/less formatting

Better Align

Align assignment symbols and comments

Better Comments

Write more humane notes

Bookmarks

Add a line bookmark

Bracket Lens

Code that prompts the head of parentheses at closed parentheses

Bracket Pair Colorizer 2

Highlight matching parentheses in different colors

Can I Use

Browser compatibility check of HTML5, CSS3 and SVG

Code Outline

Show the code structure tree

Code Runner

Run the selected code snippet (supports most languages)

Code Spell checker

Word spelling check

CodeBing

Quickly open Bing and search, you can configure search engine

Color Highlight

Color values are highlighted in the code

Color Info

Small window displays color values, rgb,hsl,cmyk,hex, etc.

Color Picker

Color picker

CSS-in-JS

CSS-in-JS highlight hints and conversion

Dash

Integrated Dash

Debugger for Chrome

Debug Chrome

Document This

Comment document generation

DotENV

.env file highlight

Edit csv

Edit the CSV file

EditorConfig for VS Code

EditorConfig plug-in

Emoji

Enter emoji in the code

Endy

Jumps the input cursor to the end of the current line

Error Gutters

Prompt the error code at the line number

ESLint

ESLint plug-in, highlight prompt

File Peek

Quickly locate the file according to the path string

Filesize

The status bar shows the current file size

Find-Jump

Quickly jump to the specified word location

Font-awesome codes for html

FontAwesome prompt code snippet

Ftp-sync

Synchronize files to ftp

Git Blame

Displays the Git information of the current line in the status bar

Git File History

Quick browse order file history submission changes

Git Graph

Git graphical view, easy to browse and operate

Git History (git log)

View git log

Git Tree Compare

Git tree alignment to see the differences between different branches

Gitignore

.gitignore file syntax

GitLens

Displays the most recent commit and author of the file, and displays the current line commit information

GraphQL for VSCode

Graphql highlights and hint

Guides

Highlight indent baseline

Gulp Snippets

Gulp code snippet

Highlight Matching Tag

Highlight matches the selected label

HTML CSS Class Completion

CSS class hint

HTML CSS Support

Css prompt (vue is supported)

HTMLHint

HTML format prompt

Htmltagwrap

Express package html label

Htmltagwrap

Including HTML

Import Beautify

Import grouping, sorting, formatting

Import Cost

Inline displays the size of the imported (import/require) package

Indenticator

Indent highlight

IntelliSense for css class names

Css class input prompt

JavaScript (ES6) code snippets

ES6 syntax code snippet

JavaScript Standard Style

Standard style

Jest Runner

Support for execution of Jest single test file or single use case

JS Refactor

Code refactoring tools, extraction functions, variable renaming, etc.

JSON to TS

The structure of JSON is transformed into interface of typescript

JSON Tools

Format and compress JSON

Jumpy

Quickly jump to the specified word location

Language-stylus

Stylus syntax highlighting and hints

Less IntelliSense

Less variables and mixed hints

Lodash

Lodash code snippet

Log Wrapper

Production prints the code of the selected variable

Markdownlint

Markdown format prompt

MochaSnippets

Mocha code snippet

Node modules resolve

Quickly navigate to the Node module

Npm

Run the npm command

Npm Intellisense

When importing a module, prompt for the installed module name

Output Colorizer

Color output information

Partial Diff

Compare two pieces of code or file

Parameter Hints

Indicates the parameter name at the function call

Path Autocomplete

Path completion prompt

Path Intellisense

Prompt for completion of another path

Polacode

Generate the code into a picture

PostCss Sorting

Css sorting

Prettier-Code formatter

Prettier official plug-in

Prettify JSON

Format JSON

Project Manager

Quickly switch projects

Quokka.js

There is no need to run manually, and the variable results are displayed in the line.

Rainbow CSV

CSV files use rainbow colors to render different columns

React Native Storybooks

Storybook Preview plug-in that supports react

React Playground

Provides a react component running environment for the editor to facilitate debugging

React Standard Style code snippets

React standar style code block

REST Client

Send a REST-style HTTP request

Sass

Sass plug-in

Settings Sync

VSCode settings are synchronized to Gist

Sort lines

Sort selected rows

Sort Typescript Imports

Import sorting of typescript

String Manipulation

String conversion processing (hump, uppercase, underscore, etc.)

Stylelint

Css/sass/less code style

SVG Viewer

SVG Viewer

Syncing

Vscode settings are synchronized to gist

Test Spec Generator

Test case generation (supports chai, should, jasmine)

TODO Parser

Todo management

Todo Todo Tree

Collect TODO comments in the code to support quick search

Toggle Quotes

Toggle quotation marks in JS, "- >'- > `

TS/JS postfix completion

Ts/js suffix hint

TSLint

TypeScript syntax check

Types auto installer

Automatic installation @ types declares dependencies

TypeScript Hero

TypeScript Auxiliary plug-ins to manage import, outline, etc.

TypeScript Import

TS automatic import

TypeScript Import Sorter

Sorting by import

Typescript React code snippets

React Typescript code snippet

TypeSearch

TS declaration file search

Version Lens

The package.json file shows the current and latest version of the module

Vetur

Vue plug-in

Volar

Vue plug-in that supports Vue3

View Node Package

Quickly open the home page and code repository of the selected module

Visual Studio IntelliCode

Code hints based on AI

VS Live Share

Real-time multi-person assistance

VSCode Great Icons

File icon extension

Vscode-database

Operate database, support mysql and postgres

Vscode-icons

File icon, easy to locate files

Vscode-random

Random string generator

Vscode-spotify

Integrate spotify to play music

Vscode-styled-components

Styled-components highlight support

Vscode-styled-jsx

Styled-jsx highlight support

Vue Peek

Support to jump to Vue component definition file

Vue TypeScript Snippets

Vue Typescript code snippet

VueHelper

Vue2 snippets (including Vue2 api, vue-router2, vuex2)

Wallaby.js

Real-time test plug-in

Wrap Console Log Lite

Quickly console.log the selected code

II. Theme

Name

Atom One Light Theme

Bluloco-dark

Bluloco-light

Enki Theme

Eppz! (C # theme for Unity)

Eva Theme

Flat UI

GitHub Theme

Monokai Pro

New Moon VSCode

One Dark Pro

Plastic

Spacegray-vscode

Splus

3. Personal preference configuration (for reference only) {"breadcrumbs.enabled": true, "editor.tabSize": 2, "editor.renderWhitespace": "boundary", "editor.cursorBlinking": "smooth", "editor.minimap.renderCharacters": false, "editor.fontFamily": "Fira Code', 'Droid Sans Mono',' Courier New', monospace, 'Droid Sans Fallback'", "editor.fontLigatures": true, "explorer.confirmDragAndDrop": false "extensions.autoUpdate": false, "files.insertFinalNewline": true, "git.autofetch": true, "git.path": "F:\\ Program Files\\ Git\\ cmd\\ git.exe", "search.exclude": {"* * / node_modules": true, "* / dist": true}, "typescript.locale": "en", "window.titleBarStyle": "custom" "window.title": "${dirty} ${activeEditorMedium} ${separator} ${rootName}", "window.zoomLevel": 1, "workbench.activityBar.visible": true, "workbench.colorTheme": "Plastic-deprioritised punctuation", "workbench.iconTheme": "vscode-great-icons", "workbench.startupEditor": "newUntitledFile", "eslint.autoFixOnSave": true, "eslint.validate": ["javascript", "javascriptreact", "vue"] "vsicons.projectDetection.autoReload": true, "vsicons.dontShowNewVersionMessage": true, "tslint.autoFixOnSave": true, "debugwrapper.wrappers": {"default": "console.log ('$eSEL', $SEL)"}, "prettier.tslintIntegration": true, "cSpell.userWords": ["Unmount"], "jest.autoEnable": false,} about "what are VSCode extensions"? Hope that the above content can be helpful to you, so that you can learn more knowledge, if you think the article is good, please share it for more people to see.

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.