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

This article mainly introduces 10 must be installed efficient development VSCode plug-ins, the article introduces in great detail, has a certain reference value, interested friends must read it!

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

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

10 required editor plug-ins

Equivalent to the supplementary update of the video tutorial, here again to sort out 10 required VSCode editor plug-ins. The basic use of the editor and the installation of plug-ins can refer directly 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 to have an efficient and easy-to-use interface when coding, we need to beautify some unknown components.

The 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 list of files, we can quickly know the file type directly through the file icon instead of looking at the suffix of the file.

2. Dark theme One Dark Pro

Plug-in name: One Dark Pro

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

Coding for a long time, dark coding environment is less likely to cause visual fatigue, but also can make yourself more focused.

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

3. Code beautification Beautify

Plug-in name: Beautify

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

Beautify plug-in can quickly format your code format, so that you write code when the messy code structure becomes very regular, code obsessive-compulsive disorder is necessary, a better code format in later maintenance and others read will have a lot of convenience.

Plug-ins support a lot of languages, basically blocking all the current languages, and you can also customize the structure of the code formatting.

4. Code checking tool ESLint

Plug-in name: ESLint

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

ESLint is a tool for checking syntax rules and code style, which can be used to ensure that code with correct syntax and uniform style can be 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 specification can also be customized, and a team can share the same configuration file, so that the code written by all members of a team can use the same code specification, and everyone can complete their own code specification check before code check-in.

5. Debugger for Chrome, a necessary debugging tool

Plug-in name: Debugger for Chrome

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

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

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

After using Debugger for Chrome, after the contemporary code runs in Chrome, you can directly add breakpoints in VSCode, click run, the page in Chrome continues to run, and execute to the breakpoints you added in VSCode, you can directly debug in VSCode step by step.

About the use of Chrome debugging tools, you can refer to the original video tutorial "50 Chrome Developer Tools essential skills" that I share in our knowledge planet, which shares 50 necessary skills for using Chrome Developer Tools, a necessary browser debugging tool in front-end development, which is a necessary skill for you to become a qualified front-end developer.

6. Universal language runtime 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 come into contact with a variety of development languages, then the Code Runner plug-in allows you not to build a variety of language development environment, directly through this plug-in can directly run the corresponding language code, very suitable for learning or testing various development languages.

Supported languages are: C, Cruise languages, 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, Kotlin, Dart, Dart And some custom commands.

Features

● runs the code file of the currently active text editor

● runs the code file through the context menu of File Explorer

● runs the selected code snippet in a text editor

● every Shebang runs the code

● run code for each filename glob

● runs custom commands

● stops the code running

● views the output in the output window

● sets the default language to run

● chooses the language to run

● supports REPL by running code in the integrated terminal

7. Quickly comment Document This

Plug-in name: Document This

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

In addition to excellent code performance and standard format, annotations are also indispensable, and annotations should have a standard set of annotation methods, especially for the language JavaScript.

Document This can quickly help you generate comments, such as some function comments can also help you extract the definition of parameters, etc., is a necessary tool for you to write specification code.

8. Intelligent prompt for CSS class name

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 a defined style name in HTML, you sometimes need to switch between HTML and CSS files frequently, looking back and forth at your defined CSS class name.

With the IntelliSense for CSS class names in HTML plug-in, you can call the CSS class name in HTML where you need to, and this plug-in will intelligently give you a hint that the CSS class name has been defined.

Features

● provides you with automatic completion of CSS class definitions that can be found in the workspace (defined in the CSS file or in the file types listed in the supported language schemas section)

● supports external stylesheets referenced by elements in the linkHTML file

● commands for manually re-caching class definitions used in autocompletion

Which folders and files should be considered or excluded during caching by ● user settings override

9. Code spelling check Code Spell Checker

Plug-in name: Code Spell Checker

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

Don't worry about this plug-in after installation, when there are spelling mistakes in your code, you will find its benefits, because after all, we write code is a large number of English word variable definitions, plug-ins can also give advice on misspelling 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

There are TODO annotation functions in many other code editors. For example, when you write a certain part of the code, some of the functions need to be implemented later. You can add a TODO type comment to the corresponding code, so you can quickly jump to this part to continue writing later, and when the project is very large, TODO becomes more useful, because sometimes there may be dozens of TODO. Help you mark which functions need to be continued to be implemented or optimized.

The above is all the contents of the article "10 must-install efficient development VSCode plug-ins". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

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.