Summary of common plugins for vscode front-end development

1.HTML Snippets

Super practical and elementary H5 code snippets and tips

2.HTML CSS Support

Let the html tag write class to intelligently prompt the styles supported by the current project

3.Debugger for Chrome

Let vscode map chrome's debug function, static pages can use vscode to interrupt debugging

https://github.com/Microsoft/vscode-chrome-debug/blob/master/images/demo.gif?raw=true

github.com

4.jQuery Code Snippets

More than 130 jQuery code snippets for JavaScript code. Just type the letters'jq' to get a list of all available jQuery code snippets.

5.vscode-icons

Let the vscode resource tree directory add icons

vscode-icons/vscode-icons

github.com
图标

6.Path Intellisense

Automatic path completion

7.Document this

"Document This" is a Visual Studio code extension that automatically generates detailed JSDoc comments for TypeScript and JavaScript files.

8.ESlint

JavaScript code detection, JavaScript code style detection, JavaScript code automatic formatting.

9.HTMLHint

html code detection

10.Project Manager

Tool to quickly switch between multiple projects

11.beautify

Tools for formatting code

12.Bootstrap 3 Sinnpet

Commonly used bootstrap can be downloaded

13.Atuo Rename Tag

Modify the html tag, automatically help you complete the synchronization modification of the closed tail tag

formulahendry / VSCode the rename-Auto-Tag- github.com icon


14.GitLens

Rich git log plugin

15.fileheader

The top annotation template, you can define the author, time and other information, and will automatically update the last modification time

16.Bracket Pair Colorizer

Let the brackets have their own colors for easy distinction. Can be used with any theme.

17.Class autocomplete for HTMLaessoft

The extension automatically scans an external CSS style sheet link for an active HTML file. When the style sheet is found, the class name is extracted and used with the code completion feature of Visual Studio Code.

18.Code Runner

Able to run code fragments or code files in multiple languages: C, C++, Java, JavaScript, PHP, Python, Perl, Ruby, Go, etc.

19.css peek

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

20.Font-awesome codes for html

Font-awesome code snippet for html

21.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

22.Git History

View the git log in the form of a chart

DonJayamanne / gitHistoryVSCode github.com icon


23.htmltagwrap

You can put a layer of label outside the selected HTML tag

24.Indenticator

Highlight the current indentation depth

25.IntelliSense for CSS class names

Smart prompt css class name

26.Image Preview

Move the mouse to the path to display the image preview

27.JavaScript (ES6) code snippets

es6 code snippet

28.Live Sass Compiler

Compile sass in real time

29.markdownlint

Markdown syntax check

30.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 preserved

31.Quokka.js

wallabyjs / Quokka github.com icon real-time view of the change of variables javascript



32.TSLint

Plugins for testing regular

In the Microsoft / VSCode the typescript-tslint-plugin- github.com icon


33.vetur

Syntax highlighting, intelligent perception

Winter | winter vuejs.github.io

34.VueHelper

vue code snippet

OYsun / VSCode-VueHelper github.com icon


35.Dracula Official

Theme style

36.One Dark Pro

Code theme

  1. Color Info

Provide information about your use of colors in CSS

38.SVG Viewer

You can open SVG files and view them without leaving the editor

39.TODO Highlight

Be able to mark all TODO comments in your code to make it easier to track any unfinished business

40.Minify

Application for compressing and merging JavaScript and CSS files.
This blog is a compilation of your own study notes. It is only for learning and communication, and should not be used for commercial purposes. If there is any infringement, please contact the blogger to delete it. The blogger QQ: 1105810790

Guess you like

Origin blog.csdn.net/qq_41880073/article/details/114371392