10 must-install VSCode plug-ins for efficient development

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

VSCode (Visual Studio Code) is a free, open source cross-platform text (code) editor developed by Microsoft. It can be regarded as an almost perfect software development for front-end development. tool.

The official website is: https://code.visualstudio.com/

10 must-install editor plug-ins

Equivalent to a supplementary update to the video tutorial, here are 10 must-install VSCode editor plug-ins for everyone. For the basic use of the editor and the installation of plug-ins, you can directly refer to the video tutorial above.

1. File icon vscode-icons

Plug-in name: vscode-icons
Plug-in address: https://marketplace.visualstudio.com/items?itemName =robertohuertasm.vscode-icons

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

vscode-icons plug-in can optimize the display of icons in front of files of various file types, so that when we view a long file list, we can quickly know the file directly through the icon of the file. Type, rather than looking at the file suffix.

2. Dark theme One Dark Pro

Plug-in name: One Dark Pro
Plug-in address: https:// marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme

After a long period of coding, a dark-colored coding environment is less likely to cause eyesight fatigue, and it can also make you more focused.

After installing the One Dark Pro plug-in, you can adjust the color of the VSCode editor to a dark color with one click, making coding more comfortable.

3. Code beautification Beautify

Plug-in name: Beautify
Plug-in address: https://marketplace.visualstudio. com/items?itemName=HookyQR.beautify

The Beautify plug-in can quickly format your code, making your messy code structure instantly become very regular when writing code, a must-have for code obsessive-compulsive disorder, better The code format will be a lot more convenient for later maintenance and reading by others.

The plug-in supports many languages, basically covering all current languages, and you can also customize the code formatting structure.

4. Code checking tool ESLint

Plug-in name: ESLint
Plug-in address: https://marketplace.visualstudio .com/items?itemName=dbaeumer.vscode-eslint

ESLint is a checking tool for grammar rules and code style, which can be used to ensure that code with correct grammar and unified style is written.

The ESLint plug-in in VSCode directly integrates the functions of ESLint and can be used after installation. The details of the code format and specifications can also be customized, and a team can share the same configuration file, so The code written by everyone in a team can use the same code specification, and everyone can complete their own code specification check before the code is checked in.

5. Essential debugging tool Debugger for Chrome

Plug-in name: Debugger for Chrome
Plug-in address: https: //marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

This tool is simply a must-have for front-end development and will greatly change your development and debugging mode.

In the past, front-end debugging was mainly JavaScript debugging. You need to find the corresponding code part in the Chrome console, add a breakpoint, and then step through the debugging in the Chrome console and view the value changes. .

After using Debugger for Chrome, when the code is running in Chrome, you can directly add breakpoints in VSCode. After clicking Run, the page in Chrome will continue to run until you are in VSCode. After adding breakpoints, you can perform single-step debugging directly in VSCode.

Regarding the use of Chrome debugging tools, you can refer to the original video tutorial "50 Essential Chrome Developer Tools Tips" that I shared on our Knowledge Planet. The course shares the essential browsers for front-end development. 50 essential usage and debugging skills when using the debugging tool Chrome Developer Tools. These knowledge are essential skills for you to become a qualified front-end developer.

6. Universal language running environment Code Runner

Plug-in name: Code Runner
Plug-in address: https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

If you need to learn or be exposed to various development language, then the Code Runner plug-in allows you to run the code of the corresponding language directly through this plug-in without setting up a development environment for various languages. It is very suitable for learning or testing various 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.

Features

● Run code files from the currently active text editor

● Run code files through the context menu of File Explorer

● Run the selected code segment in the text editor

● Run code per Shebang

● Run code per filename glob

● Run a custom command

● Stop the code from running

● View the output in the output window

● Set the default language to run

● Select the Running language

● Support REPL by running code in the integrated terminal

7, quick comment Document This

Plug-in name: Document This
Plug-in address: https://marketplace.visualstudio.com/items?itemName=joelday.docthis

In addition to excellent performance and standardized format, excellent code is also indispensable, and comments are also indispensable. There should be a standard set of annotation methods, especially for languages ​​like JavaScript.

Document This can quickly help you generate comments. For example, the comments of some functions can also help you extract the definition of parameters, etc. It is an essential tool for you to write standardized code.

8. IntelliSense for CSS class names in HTML

Plug-in name: IntelliSense for CSS class names in HTML
Plug-in address: https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

When calling the defined style name in HTML, sometimes it is necessary to frequently switch between HTML and CSS files Switch back and forth to view the CSS class names you have defined.

With the IntelliSense for CSS class names in HTML plug-in, you can call the CSS class name wherever you need to in HTML, and the plug-in will intelligently give you a prompt for the defined CSS class name.

Features

● Provides you with auto-completion for CSS class definitions that can be found in the workspace (either defined in a CSS file or under the "Supported defined in the file types listed in the "Language Mode" section)

Support for external stylesheets referenced through elements in linkHTML files

Used for manual recaching of classes used in autocomplete Defined commands

● User settings override which folders and files should be considered or excluded from the cache process

9. Code Spell Checker

Plug-in name: Code Spell Checker
Plug-in address: https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

Just don’t worry about it after installing this plug-in Now, when there are misspelled words in your code, you will find its benefits, because after all, we write code with a large number of English word variable definitions, and the plug-in can also give suggestions for misspelled words.

10. Memo plug-in TODO Highlight

Plug-in name: TODO Highlight
Plug-in address: https://marketplace .visualstudio.com/items?itemName=wayou.vscode-todo-highlight

Many other code editors have TODO annotation functions. For example, when you write a certain part of the code, part of it The function needs to be implemented later. This way, you can add a TODO type comment to the corresponding code, and then you can quickly jump to this part to continue writing later. And when the project is large, TODO becomes more important. Useful, because sometimes there may be dozens of TODOs, helping you mark those functions that need to be implemented or optimized.

Summary

Of course, the plug-ins introduced here are only 10 of the necessary plug-ins. In fact, Depending on the language you develop, there are many tools that need to be installed that can greatly improve development efficiency. You can check, download and install them in the plug-in center of VSCode.

Recommended tutorial: vscode tutorial

The above is the detailed content of 10 must-install VSCode plug-ins for efficient development. For more information, please follow other related articles on the PHP Chinese website!