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

This article mainly introduces the VSCode plug-ins to improve development efficiency, which have certain reference value, and friends who need it can refer to it. I hope you all have a lot to gain after reading this article. Let's take a look at it together.

Visual Studio Code plug-in, essential to improve efficiency ~

Our VSC(VS Code) will be like a unicorn with five lasers! Here are some useful plugins I use every day.

If you are new to VSC, click on the bottom left button to install the plugin.

1、Material Theme

Downloads: 1.3 million

Visual Studio Code's oldest theme!

2、Auto Import

Downloads: 460,000

Automatically find, analyze, and provide code completion. For TypeScript and TSX, this applies.

3、Import Cost

Downloads: 410 thousand

The plug-in displays the size of the imported package at the end of the line. To calculate the package size, the plug-in uses Webpack and babili-webpack-plugin.

Indent-Rainbow

Downloads: 130,000

A simple plug-in can make alignment more readable.

4、IntelliSense for CSS class names in HTML

Downloads: 2.43 million

This smart plugin provides CSS class name completion in HTML based on your project and external files referenced via link tags.

5、SVG Viewer

Downloads: 290,000

A plugin for previewing SVG.

6、Prettier

Downloads: 3.57 million

You can't go without this plugin, you need it to beautify your JavaScript/TypeScript/CSS code with one click.

7、React Native Tools

Downloads: 2.18 million

Code hinting, Debugging, integrated RN commands.

8、Sublime Text Keymap and Settings Importer

Downloads: 760,000

Judging from the downloads, it seems that many people have moved from Sublime Text.

This plugin changes the shortcut binding for visual studio code to be the same as Sublime Text 3. You can try: cmd + P (Mac), Ctrl + P (Windows).

You can jump to files and even search for actions like opening built-in terminals, installing plugins, etc. if you add> symbols before searching.

For those who are accustomed to using ST3, this is a big plus.

9、npm Intellisense

Downloads: 880,000

VSCode plug-ins can autocomplete npm module names in import statements.

10、lit-html

Downloads: 30,000

In JavaScript/TypeScript files, lit-html provides syntax highlighting and completion support if HTML markup is used.

12、highlight-matching-tag

Downloads: 60,000

This should have been a feature VSCode should have provided by default, highlighting matching tags.

13、GitLens

Downloads: 7.72 million

Don't say anything, just go straight to the picture!

14、Git Project Manager

Downloads: 370,000

Git Project Manager allows you to search and open a Git-managed project with one click.

15、Git History

Downloads: 3.32 million

Used to view the git log or git history of a file, compare different branches, commits.

16、File Utils

Downloads: 80,000

Provides a simpler way to create, copy, move, rename, and delete files/folders.

17、Bracket Pair Colorizer

Downloads: 2.28 million

If your code has a lot of callbacks, this highlighting can help you better distinguish between different blocks of code.

18、Color Highlight

Downloads: 250,000

Visualize the colors you define.

19、CSS Peek

Downloads: 230,000

Its definition can be located in HTML by CSS id or class.

20、Debugger for Chrome

Downloads: 11.11 million

Debug your JavaScript code with Chrome, or any other platform that supports the Chrome Debugger protocol.

21、Quokka.js

Downloads: 1.72 million

Executes JavaScript code in real time (useful for doing quick demos).

22、Trailing Spaces

Downloads: 70,000

Highlight those redundant spaces that can be quickly deleted.

23、TypeScript Hero

Downloads: 720,000

Auxiliary TypeScript programming children's shoes!

24、WakaTime

Downloads: 240,000

Generate data reports from your usage habits.

25、Vetur

Downloads: 4.51 million

Vue Tools under VS Code! Developed by Pine Wu, it has accumulated more than 4 million downloads!

26、Code Runner

Downloads: 3.46 million

Support immediate execution of code in multiple languages. Supported languages: C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F#(.NET Core), C# Script, C#(.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D。

27、PHP IntelliSense

Downloads: 4.15 million

28、vscode-icons

Downloads: 7.99 million

Icon collection.

29、Jest

Downloads: 290,000

Enjoy using Facebook Jest.

30、React.js code snippets

Downloads: 590,000

ES6 syntax is very convenient for developing React.js applications.

Thank you for reading this article carefully. I hope Xiaobian can share what content VSCode plug-ins to improve development efficiency are helpful to everyone. At the same time, I hope that everyone will support you more. Pay attention to the industry information channel and find out if you encounter problems. Detailed solutions are waiting for you to learn!

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.