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

Editor to share with you vscode to improve the efficiency of the development of front-end plug-ins, I believe that most people do not know much, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Introduction to vscode

Vscode is a code editor developed by Microsoft. As stated on the official website, vscode redefines (redefined) the code editor.

At present, the commonly used lightweight code editors on the market are: sublime,notepad++,editplus,atom.

Compared to notepad++ and editplus,vscode, they integrate many of the functions that IDE has, and they are more like a code editor.

Compared with sublime,vscode, it is more convenient to install configuration plug-ins.

It starts faster than atom,vscode, and it doesn't hurt to open all kinds of large files.

It can be said that vscode has high degree of freedom, high performance and good appearance, and most importantly, vscode is also a free code editor with continuous and rapid updates from the team.

It can be said that vscode is the first choice for code editors. It is personally recommended that when writing front-end code, the code editor chooses vscode,IDE and WebStorm.

To install the vscode plug-in, just click the button shown in the picture to enter the extension. Enter the plug-in name in the search box, click install, and then click to reload and restart vscode to make the plug-in effective.

When you do not need a plug-in, just enter the extension and click the gear button in the lower right corner of the corresponding plug-in to choose to disable or uninstall the plug-in.

Common front-end plug-ins (ps: must-have > recommendation > understand)

Must be installed, recommended to see their own needs, understand can not be installed!

1.Auto Close Tag (required)

Automatically close HTML/XML tags

2.Auto Rename Tag (required)

Automatically complete the synchronous modification of the label on the other side

3.Beautify (required)

Format html, js,css

Vue configuration method and shortcut key configuration stamp here

Another Prettier

Format JavaScript / TypeScript / CSS

The configuration tutorial is marked here

4.Bracket Pair Colorizer (required)

Add different colors to the parentheses to make it easy to distinguish different blocks. Users can define different types and colors of parentheses.

5.Debugger for Chrome (recommended)

Map breakpoints on vscode to chrome for easy debugging

Debug method pokes this

6.ESLint (recommended)

Js syntax error correction, you can customize the configuration, but the configuration is more complex, it is recommended to use some widely used eslint configuration on the Internet, I will also write an article on eslint configuration in the future.

7.GitLens (essential for using git)

Easy to view git logs, a must for heavy users of git

Using tutorials

8.HTML CSS Support (required)

Smart prompt CSS class name and id

9.HTML Snippets (required)

Smart prompt HTML tag, and the meaning of the tag

10.JavaScript (ES6) code snippets (required)

ES6 syntax smart prompts, as well as fast input, support not only .js, but also .ts, .jsx, .tsx, .html, .vue, saving time to configure it to support various js code files

11.jQuery Code Snippets (recommended)

JQuery code smart hint

12.Markdown Preview Enhanced (recommended)

Real-time preview markdown,markdown users must have

13.markdownlint (recommended)

Markdown grammar error correction

14.Material Icon Theme (recommended)

Vscode icon theme, supports the replacement of different colors of icons, it is worth pointing out that the plug-in updates are extremely frequent, basically the same as the vscode update frequency

Minimalism is not necessary.

Another set of directory tree icon theme vscode-icons

To use the method, configure the following json

15.open in browser (required)

Vscode does not open html directly in the browser like IDE, but the plug-in supports shortcut keys and right mouse button to quickly open html files in the browser, and supports custom opening specified browsers, including: Firefox,Chrome,Opera,IE and Safari

Set the default browser

16.Path Intellisense (required)

Automatically prompt the file path to support a variety of quick introduction of files

17.React/Redux/react-router Snippets (recommended) (react must have)

React/Redux/react-router syntax intelligent prompt

Add two.

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

React code snippet, downloaded by a large number of people 2) react-beautify

Format javascript, JSX, typescript, TSX files

18.Vetur (recommended) (vue must have)

Vue multi-functional integration plug-in, including: syntax highlighting, smart prompt, emmet, error prompt, formatting, automatic completion, debugger. Vscode officially appointed the Vue plug-in, which is a must for Vue developers.

Two additional points:

1) VueHelper

Vue snippet 2) Vue TypeScript Snippets

Typescript snippet of vue 3) Vue 2 Snippets

Vue 2 code snippet

19.Dracula Official (recommended)

A very nice theme style.

Like this

20.filesize (understand)

View file size

20.HTMLHint (understand)

Static check rules specific rules poke this

21. Class autocomplete for HTML (recommended)

Smart prompt HTML class = "" attribute (required)

twenty-two。 IntelliSense for CSS class names (recommended)

The class name of the smart prompt css

23. Npm Intellisense (node must-have)

Package hints when require

These are all the contents of the article "what are the front-end plug-ins to improve development efficiency in vscode?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.