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.

Xiaobian recommendation:FundebugFocus on JavaScript, wechat applets, wechat games, Node.js and Java online bug real-time monitoring. Really a good bug monitoring service, many big companies are using.


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.


The Material subject

Visual Studio Code’s oldest theme!


Address: market marketplace.visualstudio.com/items?itemN…

Auto completion (Auto Import)

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


Address: market marketplace.visualstudio.com/items?itemN…

Package size presentation (Import Cost)

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.


Address: market marketplace.visualstudio.com/items?itemN…

Automatic alignment (Indent-rainbow)

A simple plug-in can make alignment more readable.


Address: market marketplace.visualstudio.com/items?itemN…

IntelliSense for CSS Class Names in HTML

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


Address: market marketplace.visualstudio.com/items?itemN…

SVG Viewer

A plugin for previewing SVG.


Address: market marketplace.visualstudio.com/items?itemN…

Code formatting – Prettier

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


Address: market marketplace.visualstudio.com/items?itemN…

React Native Tools

Code prompts, Debugging, commands that integrate RN.


Address: market marketplace.visualstudio.com/items?itemN…

Sublime Text Keymap and Settings Importer

With 730,000 installs, Sublime Text seems to have moved on.


Address: market marketplace.visualstudio.com/items?itemN…

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

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


Address: market marketplace.visualstudio.com/items?itemN…

lit-html

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


Address: market marketplace.visualstudio.com/items?itemN…

highlight-matching-tag

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


Address: market marketplace.visualstudio.com/items?itemN…

GitLens — Git supercharged

Don’t say anything, just draw the picture!


Address: market marketplace.visualstudio.com/items?itemN…

Git Project Manager

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


Address: market marketplace.visualstudio.com/items?itemN…

Git History

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


Address: market marketplace.visualstudio.com/items?itemN…

File Utils

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


Address: market marketplace.visualstudio.com/items?itemN…

Bracket Pair Colorizer

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


Address: market marketplace.visualstudio.com/items?itemN…

Color Highlight

Visualize the colors you define.


Address: market marketplace.visualstudio.com/items?itemN…

CSS Peek

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


Address: market marketplace.visualstudio.com/items?itemN…

Debugger for Chrome

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


Address: market marketplace.visualstudio.com/items?itemN…

Quokka.js

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


Address: market marketplace.visualstudio.com/items?itemN…

Trailing Spaces

Highlight redundant Spaces that can be quickly deleted.


Address: market marketplace.visualstudio.com/items?itemN…

TypeScript Hero

Help with TypeScript programming!


Address: market marketplace.visualstudio.com/items?itemN…

WakaTime

Generate data reports from your usage habits.


Address: market marketplace.visualstudio.com/items?itemN…

Vetur

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


Address: market marketplace.visualstudio.com/items?itemN…

Code Runner

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.


Address: market marketplace.visualstudio.com/items?itemN…

PHP IntelliSense



Address: market marketplace.visualstudio.com/items?itemN…

vscode-icons

Icon set.


Address: market marketplace.visualstudio.com/items?itemN…

Jest

Enjoy using Facebook’s Jest.


Address: market marketplace.visualstudio.com/items?itemN…

React.js code snippets

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


Address: market marketplace.visualstudio.com/items?itemN…

About Fundebug

Fundebug focuses on JavaScript, wechat applets, wechat mini-games, Node.js and Java real-time BUG monitoring. Since its launch on November 11, 2016, Fundebug has handled more than 500 million error events and has received many famous users’ messages