[more plug-ins can go to the website to explore] (https://marketplace.visualstudio.com/vscode)Copy the code

If you are interested in the front end, you can pay attention to mine
Github 

According to the survey, VScode and sublime are the most popular ides for front-end developers. As the saying goes, “if you want to do a good job, you have to do a good job with a good tool.” I am a restless tool-lover. When I started using VScode, I installed a lot of plug-ins, which caused my Mac to resist strongly as soon as I opened VScode and connected to a large screen Later on, I opened the uninstall mode and began to unload all the time. Finally, I kept some small and beautiful plug-ins with high utilization rate and organized them in case of need.

For a team that uses the same set of shortcuts, the same IDE, and the same set of plug-ins, pair programming can be a particularly happy thing. You can learn a lot from programming with handsome guys

One, code shortcut key

Universal shortcuts can be set on VScode’s home page, and as sublime is usually used more often, they can be combined into one set.



Code hints

1. Path Intellisense

Automatic path completion



2. Document this

Js comment template (note: the new version of vscode already supports natively, enter it on function
/** tab ）




Three, code format

1. ESlint

Code specification, do not meet the requirements of the code or syntax error JS code prompt, you can customize the prompt rules

2. HTMLHint

HTML code detection




3. beautify

A tool for formatting code

Iv. Code visualization improvement

1. colorize

Visual colors oh, the components involved in many different themes, personal or rather sparse



2. RegExp Preview and Editor

This is awesome. It can perfectly display your regees, and graphically show you the formation of your regees



3. Better Comments

Preferably with the comment area highlighted, these support for TODO is also good


4. BreadCrumb in StatusBar



—————————————————————————-

Beautiful dividing line, the following plug-ins according to the framework language selection, with what installed what, do not need to install, waste memory

React plugin

1. ES7 React/Redux/GraphQL/React-Native snippets

React code snippets include a variety of code snippets. React code tips are sufficient

2. Useful React Snippets

Of course, if you only use React, use this code to prompt, enough of that

3. CSS Blocks

Supports intelligent hints, jump, and wall cracking recommendations for the CSS modularization

4. styled-components-snippets 

Styled – Components code snippet

Vi. Vue plug-in

1. vetur

Syntax highlighting, Intellisense, Emmet, etc



2. VueHelper

Snippet code snippets

3. Vue VSCode Snippets

Very comprehensive vUE code snippet



Seven, the Node

1. eggjs

Egg box related help plug-ins, code snippets, smart tips and more





2. egg-jump-definition

Egg box function jump: Cmd+4



Eight, wechat small program

1. mpvue snippets

Some code snippets of MPvue, as well as some code tips for native applets

2. minapp

A must-have plug-in for writing small programs in VS Code, with many useful feature integrations

Markdown plugin

1. Markdown All in One

Markdown’s prompt plugin is useful for this, integrating syntax shortcuts, Math, preview, and more

2. markdownlint

Code hints for markdown’s syntax format specification

X. Code review

1. CodeMetrics 

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



2.Import Cost

When you import something, you can calculate the size of the imported module!



3. Git Lens

I haven’t found anything more detailed than this git record



Xi. Miscellaneous

The following plug-ins are optional, but they are great if they are needed


1. fileheader

Top annotation template, can define the author, time and other information, and will automatically update the last modified time

ctrl+alt+i 



2. Paste JSON as Code

The JSON format is converted to another language format



3. Node.js Modules Intellisense

Smart tips for node_module



4. npm-import-package-version

The version information about the imported NPM package is displayed



5. File Tree View

Provides a tree display of functions or states in several common programming languages, quick click to jump to!!

6. NPM-Scripts

Visually executing the NPM command (package.json within the project) in the sidebar is compact and practical



7. :emojisense:



Code snippets

There are two ways to define snippets

  • Menu bar -> File -> Preferences -> User code snippets
  • ctrl+shift + p => snippet



  • toRem: Just a simple description
  • prefix: is short for triggering snippets
  • body: is an expanded code snippet
  • $1, $2:Represents a placeholder that the user needs to replace when expanding the snippet, and can also be written as${1:label}Key-value pairs
  • descriptionThe user can easily identify the comments before exporting the snippets, rather than forcibly memorizing the abbreviated ones


    • If you’re looking for a carrot or a hole, you can join us
    "Front push group"There are HR staff from BATJ and other big factories, as well as those who are proficient in React, Vue, Node and small programs.

    If not, please invite my sister to have a cup of coffee, add my wechat, I will pull you in. (Please specify your title)