This article introduces the most popular front-end development tool VSCode must install 10 development plug-ins, used to greatly improve the efficiency of software development.

For basic use of VSCode, please refer to my original video tutorial, “effective VSCode development must install plug-ins”.

VSCode (Visual Studio Code) is a free, open source cross-platform text (Code) editor developed by Microsoft. It is almost perfect software development tool for front-end development at present.

The official website is code.visualstudio.com/

1. Basic use of VSCode video tutorial

I shared my original 10-part video tutorial “VSCode must install plug-ins for effective development” in our knowledge planet community.

This course is part of the VSCode editor series. VSCode’s powerful plug-in library makes it even more invincible in improving development efficiency. This series of courses will share the knowledge related to the installation, configuration and use of the required plug-in.

Video tutorials syllabus

  • 001 – Course Introduction
  • 002 – How to make your file type clear at a glance
  • 003 – How to manage projects more efficiently
  • 004 – Automatically format your code
  • 005 – How to set up learning test environment for various languages with one click
  • 006 – How to debug with Chrome
  • 007 – How to automatically detect errors in your code specification and code in real time
  • How to improve the efficiency of front-end development like React
  • 009 – how to integrate and beautify your terminal into VSCode
  • 010 – how do Visual Studio heavy users migrate to VSCode

Devopen. club/ Course/Vsco… .

2. 10 required editor plug-ins

As a supplementary update to the video tutorial, here are 10 must-install VSCode editor plug-ins. Basic use of the editor and installation of the plug-in can be directly referred to the video tutorial above.

2.1 File ICONS vscode- ICONS

  • Name of the plugin: VScode – ICONS
  • Plug-in address: marketplace.visualstudio.com/items?itemN…

First of all, in order for us to have an efficient and easy to use interface when coding, we need to beautify some unknown components.

The VScode-icons plugin optimizes the display of ICONS in front of various file types, so that when looking at long lists of files, we can quickly identify the file type from the ICONS instead of looking at the file suffix.

One Dark Pro

  • Plugin name: One Dark Pro
  • Plug-in address: marketplace.visualstudio.com/items?itemN…

For long periods of coding, dark color coding environments are less likely to cause eye strain and allow you to concentrate more.

After installing the One Dark Pro plugin, you can change the color of VSCode editor to Dark color with One click, making coding more comfortable.

2.3 Code Beautify Beautify

  • Plugin name: Beautify
  • Plug-in address: marketplace.visualstudio.com/items?itemN…

Beautify allows you to quickly format your code, making it instantly more organized than it was when you were writing it. It’s a code compulsion, and a good code format is much easier to maintain and read.

Plugins support a wide range of languages, covering almost all of the current languages, and you can customize the structure of the code formatting.

2.4 Code inspection tool ESLint

  • Plugin name: ESLint
  • Plug-in address: marketplace.visualstudio.com/items?itemN…

ESLint is a syntax rule and code style checker that can be used to ensure that syntactically correct and consistent code is written.

The ESLint plugin in VSCode directly integrates ESLint functionality and can be used after installation. Details of the code format and specification can also be customized, and a team can share the same configuration file so that all code written by a team can use the same code specification. Everyone can complete their own code specification check before checking in.

2.5 Necessary Debugging Tool Debugger for Chrome

  • Debugger for Chrome
  • Plug-in address: marketplace.visualstudio.com/items?itemN…

This tool is a front end development must-have and will dramatically change the way you develop and debug.

In the old days of front-end debugging, mostly JavaScript debugging, you would go to the Chrome console to find the corresponding part of the code, add a breakpoint, and then step through the Chrome console and see the value change.

With Debugger for Chrome, when the code is running in Chrome, you can directly add a breakpoint in VSCode, click run, Chrome page continues to run, execute to the breakpoint you added in VSCode, You can step directly from VSCode.

For more information on how to use Chrome debugging Tools, you can refer to the original video tutorial “50 Essential Chrome Developer Tools Tips” that I shared with Our Knowledge Planet. This course will share 50 tips on how to use And debug Chrome Developer Tools to become a qualified front-end Developer.

2.6 Universal language running environment Code Runner

  • Plugin name: Code Runner
  • Plug-in address: marketplace.visualstudio.com/items?itemN…

If you need to learn or contact a variety of development languages, Code Runner plug-in can let you do not build a variety of language development environment, directly through the plug-in can directly run the corresponding language Code, very suitable for learning or testing a variety of development languages.

Supported languages are: 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, and some custom commands.

2.7 Quick notes Document This

  • Plugin name: Document This
  • Plug-in address: marketplace.visualstudio.com/items?itemN…

In addition to excellent performance and well-formatted code, comments are essential, and there should be a standard way to comment, especially in a language like JavaScript.

Document This can quickly help you generate annotations, such as some function annotations can also help you extract the definition of parameters, etc., is your standard code necessary tools.

2.8 Intelligent Hints for CSS Class Names

  • IntelliSense for CSS class names in HTML
  • Plug-in address: marketplace.visualstudio.com/items?itemN…

When calling a defined style name in HTML, you sometimes need to switch between HTML and CSS files frequently to see your defined CSS class name back and forth.

With IntelliSense for CSS Class Names in HTML, you can call CSS class names wherever you want in your HTML. IntelliSense will give you an intelligent reminder that you have defined CSS class names.

2.9 Code Spell Checker

  • Plugin name: Code Spell Checker
  • Plug-in address: marketplace.visualstudio.com/items?itemN…

After installing this plugin, you don’t need to worry about it. When you have spelling mistakes in your code, you will find it beneficial, because we write code after all is a large number of English word variable definitions, plug-ins can also give advice on spelling mistakes.

TODO Highlight

  • Plugin name: TODO Highlight
  • Plug-in address: marketplace.visualstudio.com/items?itemN…

In many other code editor has TODO annotation capabilities, such as when you write a part of the code, the function of the part of the need to implement it later, this is you can add a TODO in the corresponding code type annotation, then later can quickly jump to continue to write this part, and when the project is very big, TODO becomes even more useful, because sometimes there are dozens of toDos that help you map out which features need to be implemented or optimized.

3. Summary

Of course, these are only 10 of the must-have plug-ins. Depending on the language you’re developing, there are many other tools you can use to improve your development efficiency. You can download and install them from VSCode’s plug-ins center.

Our Knowledge Planet community will often recommend the latest necessary plug-ins and development skills, and other development questions can be asked and exchanged in the community. At the same time, there are entrepreneurial projects incubation, you can find like-minded friends to do something together.