Vscode front-end plug-ins are recommended

Common plug-in

Auto Close Tag

Automatically add HTML/XML closing tags (required)

Auto Rename Tag

Automatic renaming of paired HTML/XML tags (required)

Beautify

Format javascript, JSON, CSS, Sass, and HTML

Bootstrap 4 & Font awesome snippets

Contains code snippets for Bootstrap 4&Font awesome

Bracket Pair Colorizer

Color recognition matches parentheses

Class autocomplete for HTML

Intelligent Hint HTML class = “” attribute (required)

Code Runner

C, C ++, Java, JavaScript, PHP, Python, Perl, Ruby, Go, etc.



Click this button to run your file (must)

css peek

The ability to view strings of CSS ids and classes as appropriate CSS definitions in HTML files (required)

Method of use: Place the cursor on the property in class, right click

Dash

Documentation required, with Dash (but only for MAC, it seems)

It looks up dash documents based on your currently selected language

Debugger for Chrome

Let vscode map chrome debug so that static pages can be broken with vscode to debug

Simple use: Poke me

Document This

Add comment block

Settings:

"Docthis. IncludeAuthorTag" : true, / / a @ Author "docthis. IncludeDescriptionTag" : @description "docthis.authorName": "shenzekun",// authorNameCopy the code

Shortcut key: Press Ctrl+ Alt + D twice

ESLint

EsLint can help you check for syntax errors in Javascript programming. For example, in Javascript applications, it’s hard to find variables or methods that you’re missing. EsLint can help you analyze JS code, find bugs, and ensure a certain degree of correct JS syntax writing.

Configuration: Poke me

Font-awesome codes for html

A snippet of font-awesome for HTML

filesize

At the bottom of the status bar shows the current file size, click after you can also see the detailed creation, modification time

Git History

View git logs as charts

Git log command+ Shift +p (Ctrl+ Shift + P

Git Lens

Git log plug-in

HTML CSS Support

Write class smarts on HTML tags to indicate the styles supported by the current project (required)

HTML Snippets

HTML code snippets (required)

htmlhint

HTML code detection

htmltagwrap

You can wrap a tag around the selected HTML tag

Use: Select a large block of code, then press Alt + W

Indenticator

Highlight the current indent depth

IntelliSense for CSS class names

Intelligent displays the class name of the CSS

JavaScript (ES6) code snippets

Es6 code snippet (required)

JavaScript Snippet Pack

Js code snippets (required)

jQuery Code Snippets

JQuery code snippet

Live Sass Compiler

Compile sASS in real time, but need to configure, attached with my configuration

"LiveSassCompile. Settings. Formats" : / / / You can add more {" format ":" compressed ", / / compression "extensionName" : ". Min. CSS ", / / compile suffix "savePath" : ". / CSS "/ / compile save path}],Copy the code

use

markdownlint

Markdown syntax check

Node.js Modules Intellisense

JavaScript/TypeScript modules can be completed automatically in import statements.

npm Intellisense

NPM Modules are automatically populated in import statements, much like Node.js Modules Intellisense

open in browser

The current HTML file is opened in a browser, similar to webstorm’s four small browser ICONS, but the HTML file must be saved

The shortcut Alt + b

Output Colorizer

The text color of the output prompt has been changed to facilitate access to key information

Path Intellisense

Automatic path completion (required)

Prettier

Format JavaScript/TypeScript/CSS.

Project Manager

If there are too many projects, shift+ CMD + P (Shift + CTRL + P) then type Project, select Edit Project for the first time to edit your project, then directly select Open to open your project

Sass

Write sass necessary

vscode-faker

Generate fake data, addresses, phone numbers, pictures, etc

Open shift+ CMD + P (Shift + CTRL + P) and type faker to select

Quokka.js

Watch javascript variables change in real time

useShift + CMD +p (CTRL + Shift + P) quokka new javascript

Regex Previewer

Plugins that test re

TSLint

Check for typescript programming syntax errors

TypeScript Importer

Automatically searches for TypeScript definitions in workspace files and treats all known symbols as completion items to allow code to complete.

vscode-icons

Directory tree icon

react

React-Native/React/Redux snippets for es6/es7

React code snippet, downloaded by many people

react-beautify

Format javascript, JSX, typescript, TSX files

vue

vetur

Syntax highlighting, intellisense

VueHelper

Vue code snippets

Vue TypeScript Snippets

Typescript snippets for vue

Vue 2 Snippets

Vue 2 code snippet

The theme

Dracula Official

Personal favorite subject, should be one of the most attractive subjects

One Dark Pro

This one looks good too

Atom One Dark Theme(Old version)

This is similar to One Dark Pro, One Dark Pro has more color themes

One Monokai Theme

Eva Theme

It has a black and white theme, and the white theme feels nice

Boxy Theme Kit

---

Do you have any good plugin recommendations