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

This article mainly introduces the practical vscode plug-ins to improve the development efficiency, the article is very detailed, has a certain reference value, interested friends must read it!

Practical Visual Studio Code plug-in

1. Vscode-color-highlight- color code highlight plug-in. (also available in sublime text)

2. Right-click vscode-Open in Browser- to open it in the browser. (also available in sublime text)

3. Prompt for the path of vscode-Path Intellisense- file. (also available in sublime text)

4. Vscode-JS-CSS-HTML Formatting-js-css-html format. (also available in sublime text)

5. Vscode-Visual Studio Code Format-vscode code format enhancement tool. (right-click to format)

6. Vscode-Sass-sass/scss file syntax hint. (also available in sublime text)

7. Vscode-Easy Sass-scss is compiled into css,min.css. (a good sass compilation tool)

8. Sort by vscode-csscomb-css attribute. (also available in sublime text)

9. Vscode-HTML Class Suggestions- workspace class code hint.

PS: (1) npm install csscomb-g

Npm install csscomb-save-dev

These two steps are necessary.

(2) configure vscode

Open File-preferences-Settings. Find the csscomb configuration option. Add the "csscomb.preset" option.

There are three modes, csscomb, yandex, and zen. Choose one of them.

(3) Select the css/less/scss file, press F1 to run, enter "csscomb", and press enter.

In particular, the "csscomb.preset" option can also be configured in this way.

10.vscodeMurfake-generate various fake data types. (name, telephone number)

11.vscode-CSS Peek-class name definition jump. (finally have the css definition jump function of dw cc)

VscodeMureCSStracer-extract the class of the page to generate an css document.

13.vscode-Regex Previewer- regular match preview.

14.vscode-Quokka-js compiles in real time. (equivalent to writing while outputting console information).

15.vscode-SVG Viewer-svg preview.

16.vscode-Change Case- variable name style switch. (tools with different naming styles have been solved)

17.vscode-Document This-jsdoc comment generation.

18.vscode-Live Server-http server (equivalent to http-server using nodejs).

Click to run at the bottom of PS:vscode, which is very convenient.

Vue framework

18.vscode-Vue 2 Snippets-vue2 syntax highlights, syntax hints.

19.vscode-Vetur-vue single files can be written and annotated like html,js,css.

20.vscode-wpy-beautify-vue2 single file format.

PS:vscode is really a good editor.

Compared with sublime text3, it has the following advantages.

1. File search function.

There is a good file browser to filter, find, modify, and replace files.

two。 Drag and move files.

3. Default integration terminal. There is no need to install plug-ins to open the terminal.

Supplement: 1. Use the Visual Studio Code-Insiders version to have the workspace feature, which supports dragging and dropping multiple projects.

2.vscode displays a space code. Open View-Toggle render spaces.

These are all the contents of the article "what are the practical vscode plug-ins to improve development efficiency?" Thank you for reading! Hope to share the content to help you, more related 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.