After reading this article, I’m ready to switch from Sublime Text to Visual Studio Code!

  • Immensely upgrade your development environment with these Visual Studio Code extensions
  • Translator: Fundebug

To ensure readability, free translation rather than literal translation is used in this paper. In addition, the copyright of this article belongs to the original author, and translation is for study only.

Our VSC(VSCode) will be like a unicorn with five lasers! Here are some very useful plug-ins that I use every day.

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

Material Theme

Downloads: 1.3 million

Visual Studio Code’s oldest theme!

Auto Import

Downloads: 460,000

Automatically find, analyze, and provide code completion. This works for TypeScript and TSX.

Import Cost

Downloads: 410,000

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.

IntelliSense for CSS class names in HTML

Downloads: 2.43 million

This smart plugin provides completion of CSS class names in HTML, based on your project and external files referenced via the link tag.

SVG Viewer

Downloads: 290,000

A plugin for previewing SVG.

Prettier

Downloads: 3.57 million

You absolutely cannot little this plugin, you need a key to it to beautify your JavaScript/TypeScript/CSS code.

React Native Tools

Downloads: 2.18 million

Code prompts, Debugging, commands that integrate RN.

Sublime Text Keymap and Settings Importer

Downloads: 760,000

Judging by downloads, it looks like quite a few people are moving from Sublime Text.

This plugin changes the visual Studio Code shortcut bindings to the same as Sublime Text 3. You can try: CMD + P (Mac), CTRL + P (Windows).

You can jump to files, and you can even search for actions, such as opening built-in terminals, installing plug-ins, and so on, if you add the > symbol before searching.

This is a big plus for people who are used to ST3.

npm Intellisense

Downloads: 880,000

The VSCode plug-in can automatically complete the NPM module name in the import statement.

lit-html

Downloads: 30,000

In JavaScript/TypeScript files, lit-HTML provides syntax highlighting and completion support if HTML tags are used.

highlight-matching-tag

Downloads: 60,000

This was supposed to be the default feature VSCode was supposed to provide, highlighting matching labels.

GitLens

Downloads: 7.72 million

Don’t say anything, just draw the picture!

Git Project Manager

Downloads: 370,000

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

Git History

Downloads: 3.32 million

Description To view git log or Git history of a file, compare commits.

File Utils

Downloads: 80,000

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

Bracket Pair Colorizer

Downloads: 2.28 million

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

Color Highlight

Downloads: 250,000

Visualize the colors you define.

CSS Peek

Downloads: 230,000

You can locate its definition in HTML by CSS ID or class.

Debugger for Chrome

Downloads: 11.11 million

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

Quokka.js

Downloads: 1.72 million

Execute JavaScript code in real time (quick demos are useful).

Trailing Spaces

Download: 70,000

Highlight redundant Spaces that can be quickly deleted.

TypeScript Hero

Downloads: 720,000

Help with TypeScript programming!

WakaTime

Downloads: 240,000

Generate data reports from your usage habits.

Vetur

Downloads: 4.51 million

Vue tools below VS Code! Developed by Pine Wu, it has been downloaded over 4 million times!

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.

PHP IntelliSense

Downloads: 4.15 million

vscode-icons

Downloads: 7.99 million

Icon set.

Jest

Downloads: 290,000

Enjoy using Facebook’s Jest.

React.js code snippets

Downloads: 590,000

Using ES6 syntax to develop react.js applications is very convenient.

About Fundebug

Fundebug focuses on JavaScript, wechat applets, wechat mini games, Alipay applets, React Native, Node.js and Java real-time BUG monitoring. Since its launch on November 11, 2016, Fundebug has handled more than 600 million error events in total, which has been recognized by many well-known users such as Google, 360 and Kingsoft software. Welcome free trial!

Copyright statement

Reprint please indicate the author Fundebug and this article addresses: blog.fundebug.com/2018/07/24/…