What is VScode?

Visual Studio Code (VS Code / VSC) is a free, open source, modern lightweight code editor that supports syntax highlighting, smart code completion, custom shortcuts, parenthesis matching, and color in almost all major development languages. Features such as differentiation, code snippets, code comparison Diff, GIT commands, support plug-in extensions, and optimization for web development and cloud application development. Software cross-platform support for Win, Mac and Linux, running smoothly, can be described as Microsoft’s conscience…

VSCode Download: https://code.visualstudio.com/

According to the survey, VScode and sublime are IDEs that front-end developers prefer. Relative to these two software, I prefer VSCode, this blog post to record the more useful VSCode plugin.

VSCode plugin

Code shortcut

General shortcuts can be set on the VScode homepage, because there are more sublimes in common, so they are simply merged into one.

Code hint

Path Intellisense

Automatic path completion

Document this

Js annotation template (note: the new version of vscode is natively supported, enter /** tab on function)

Code format

ESlint

Code specification, prompting for non-conforming code or JS code with syntax errors, you can customize the prompt rules.

HTMLHint

Html code detection.

Beautify

A tool for formatting code.

Code visualization improvement

Colorize

Visual color, the components involved in many different topics, personally still quite porridge.

RegExp Preview and Editor

This is amazing. It can perfectly show the rules you write, and the graphics show you the formation of your regular writing.

Better Comments

The best comment area is highlighted, and support for TODO is also good.

BreadCrumb in StatusBar

Gorgeous and beautiful split line, the following plug-ins are selected according to the framework language, what to install, do not need to install, waste memory

React plugin

ES7 React/Redux/GraphQL/React-Native snippets

The code snippets covered are rich, and React related code hints are enough.

Useful React Snippets

Of course, if you only use React, then use this code hint, it is enough.

CSS Blocks

Support css modular smart tips, jumps, wall cracks recommended.

Styled-components-snippets

Code snippet for styled-components.

Vue plugin

Vetur

Grammar highlighting, IntelliSense, Emmet, etc.

VueHelper

Snippet code snippet.

Vue VSCode Snippets

Very comprehensive vue code snippet.

Node

Eggjs

Egg box related help plugins, code snippets, smart tips, etc.

Egg-jump-definition

The function jump of the egg box: Cmd+4.

 

WeChat applet

Mpvue snippets

Some code snippets of mpvue, as well as code hints for some native applets.

Minapp

Use VS Code to write the necessary plug-ins for small programs, which have many useful feature integrations.

Markdown plugin

Markdown All in One

Markdown’s prompt plugin is enough for this, integrated with syntax shortcuts, Math, preview, etc., very useful.

 

Markdownlint

Code hints for the syntax format specification for markdown.

Code review

CodeMetrics

You can calculate the complexity of the code inside TS/JS (such as functions), which is tied to code quality and performance.

Import Cost

When you import a thing, you can calculate the size of the imported module.

Git Lens

I haven’t found any more details than this git record.

other

The plug-in is optional, but it is also a great plug-in if it has the corresponding function.

Fileheader

The top annotation template defines the author, time, etc., and automatically updates the last modification time.

Paste JSON as Code

The JSON format is converted to other language formats.

Node.js Modules Intellisense

Smart tip for node_module.

Npm-import-package-version

Display version information of the imported npm package

File Tree View

Provides a collection of tree functions for functions or states in several common programming languages, which can be quickly clicked!!

NPM-Scripts

Visually execute the npm command (package.json in the project) in the sidebar, small and practical.