Visual Studio Code - code, Studio, VISUAL

1, html quick generation—! + Tab

2, ctr+shift+x to open the plug-in mall

Common plug-ins:

Auto Close Tag< /h3>

Automatically add HTML/XML closing tags (required)

Auto Rename Tag

Automatically rename matching HTML/XML tags (required)

share picture < /p>

Beautify

Format javascript, JSON, CSS, Sass, and HTML

< p>

Bootstrap 4 & Font awesome snippets

contains Bootstrap 4&Font awesome code snippets

share picture

Bracket Pair Colorizer

Color recognition matching brackets

share picture

Class autocomplete for HTML

Smart prompt HTML class = “” attribute (required)

Code Runner

A very powerful plug-in that can run code fragments or code files in multiple languages: C, C++, Java, JavaScript, PHP, Python, Perl, Ruby, Go, etc., after the installation is complete, the upper right corner appears:

Click this button to run your file (required)

css peek

Able to view the CSS ID and class string as the corresponding CSS definition in the HTML file (required)

How to use: place the cursor In the attribute in the class, right click
share picture

Dash

Required for checking documents, matching dash (but it only seems to be the mac version)??

Shortcut key ctrl + h It finds the documents in dash according to your currently selected language

Debugger for Chrome

Let vscode map Chrome’s debug function allows static pages to be debugged with vscode.

Easy to use: poke me

Document This

Add comment block

Settings:
 "docthis.includeAuthorTag": true,//appears @Author "docthis.includeDescriptionTag": true,//appears @Description "docthis.authorName ": "shenzekun",//author name 
Shortcut keys: Press Ctrl+alt+d twice p>

ESLint

EsLint can help us check grammatical errors in Javascript programming. For example: In Javascript applications, it is difficult for you to find the variables or methods that you leak. EsLint can help us analyze JS code, find bugs and ensure a certain degree of correctness of JS syntax writing.

Configuration: poke me

Font-awesome codes for html

Font-awesome code snippet for html

filesize

The current file size is displayed in the status bar at the bottom, and you can also see the detailed creation and modification time after clicking.

Git History

View the git log as a chart

Use command +shift+p(Ctrl+shift+p) Enter git log and you can see it

Git Lens

git log plugin

< /p>

HTML CSS Support

Write the class on the html tag to intelligently prompt the style supported by the current project (required)

HTML Snippets

html code snippets (required)

< h3 id="articleHeader19">htmlhint

html code detection

< img alt="Share a picture" title="" src="/wp-content/uploads/images/industry/visual-studio/1626796227791.jpg" >

< h3 id="articleHeader20">htmltagwrap

You can wrap a layer of tags outside the selected HTML tag

Use: select a large piece of code, and then press “Alt + W”

Indenticator

Highlight the current indentation depth

IntelliSense for CSS class names

Smart tips css Class name

Image Preview

Move the mouse to the path to display the image preview

JavaScript (ES6) code snippets

es6 code Snippet (required)

JavaScript Snippet Pack
js code snippet (required)

blockquote>

jQuery Code Snippets

jQuery code snippets

Live Sass Compiler

Real-time compile sass, but it needs configuration, attach my configuration
"liveSassCompile.settings.formats":[ // You can add more {"format": "compressed",//compression" extensionName": ".min.css",//compiled suffix name"savePath": < span class="hljs-string">"./css"//Compile and save path} ],< /span>
Use< /p>

markdownlint

markdown syntax check< /blockquote>

Node.js Modules Intellisense

JavaScript / TypeScript modules can be automatically completed in the import statement.

npm Intellisense

is importing The statement automatically populates the npm module, which is similar to Node.js Modules Intellisense

open in browser

The current html file is opened with a browser, similar to the four small browser icon functions of webstorm, the prerequisite html file must be saved

shortcut alt+b< /strong>

Output Colorizer

There are some changes in the text color of the output prompt, which is convenient for obtaining the key Information

Path Intellisense

Path Auto completion (required)

Prettier

Format JavaScript / TypeScript / CSS.

Project Manager

When there are too many projects, shift+cmd+p(shift+ctrl+ p) Then enter project, select edit Project for the first time to edit your own project, then you can directly select open to open your project

Sass

Essential for writing sass

vscode-faker

< blockquote> Generate fake data, addresses, phone numbers, pictures, etc.

Open method shift+cmd+p(shift+ ctrl+p)) Then enter faker to select

Quokka.js

Watch in real time Changes in javascript variables

Use: first shift+cmd+p (ctrl+ shift+p) Enter quokka and select new javascript??

Regex Previewer

Regular plug-in for testing

TSLint

Check for syntax errors in typescript programming. Syntax

TypeScript Importer

< p>

Automatically search for TypeScript definitions in the workspace file, and use all known symbols as completion items to allow code completion.

vscode-icons

Contents Tree icon

react

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

React code snippets, so many downloads??

react-beautify< /h3>

Format javascript, JSX, typescript, TSX files

vue

vetur

Syntax highlighting, IntelliSense

VueHelper

vue code snippets

Vue TypeScript Snippets

< /p>

Typescript code snippets of vue

Vue 2 Snippets

vue 2 code snippet

theme

Dracula Official

< p>

My favorite theme, it should be one of the best looking themes??

One Dark Pro

This one also looks good??

Atom One Dark Theme (old version)

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

p>

One Monokai Theme

Eva Theme

It contains black and white themes, this white theme feels pretty good

Boxy Theme Kit

(reproduced from: https ://segmentfault.com/a/1190000011779959?utm_source=tag-newest)

3,

4,< /span>

5、

6、

< p>