10 VSCode plug-ins worth collecting (recommended)

This article recommends 10 VSCode plug-ins worth collecting. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

【Recommended study: "vscode tutorial"】

1 Import Cost

##During the development process, you may often find yourself adding dependencies to your project. Although modular development has become a key part of software development today, it's still best to make sure to be careful with your input. The Import Cost plugin for JavaScript and TypeScript lets you be alerted to all your dependencies in real time.

When you add a dependency inline to your code, it displays the corresponding size. It is a lightweight plugin that provides predictability and helps in effective dependency management. Plug-in documentation also lists various import syntaxes, allowing the plug-in to display the size of dependencies for us.

Here is an article that details the original author's motivation for developing this plug-in.

2 File Utils

Although the core functionality of Visual Studio Code is to process files This works great when coding, but you may find it necessary to enhance Visual Studio Code's ability to manage multiple files in your project and dependencies. The File Utils extension lets you perform file operations through the command panel.

#You can bring up the command palette and select a file to perform simple file operations on it. In addition to basic folder-related operations, you can copy, move, delete, and rename files. It is a very useful plug-in that allows you to manage project files without leaving the scope of Visual Studio Code.

3 Project Manager

##Using the File Utils extension allows you to execute simple files operations, and the Project Manager plug-in allows you to further manage multiple projects. First, it adds a new sidebar to support working on multiple projects. Secondly, the extension can also help you manage Git, SVN or Mercurial repositories. It allows us to further manage remote repositories.

In addition to GUI-based functionality, this extension adds commands for use with projects. You can adjust the settings to further customize its functionality to your liking.

With advanced features like remote repository management and interactive commands, the Project Manager extension provides a library of tools within your toolkit that can extend your development cycle. .

4 SVG Viewer

SVG refers to scalable vector graphics, and SVG files are Text file that stores vector images for the web. If you open SVG files in a text editor, the text content of these files is usually displayed. If you are editing these files directly, you may want to see how Visual Studio Code renders these files.

The SVG Viewer plugin lets you visualize SVG files, saving you time using other applications to view your work. Essentially, it saves you time when making quick edits to SVG files.

5 Code Spell Checker

The large number of exceptions encountered by developers can usually be passed Corrected typos in variable, function and package names to resolve. Additionally, you may make spelling errors when writing comments, instructions, or documentation. This package helps highlight errors in files and it helps you check spelling in various popular programming languages. You can also adjust settings to make code spell checker work with specific file types.

#While it supports English when installed, additional dictionaries are available for eight languages ​​and medical terms. All in all, it's a small but powerful addition to your excellent library of Visual Studio Code extensions.

6 Remote — SSH

Due to the distributed nature of development, you may You need to log in to the remote server to update and test your code. While they can be easily managed via a third-party SSH client, there is a Visual Studio Code extension that lets you work remotely on the server without leaving the application entirely.

Microsoft's Remote-SSH plug-in lets you connect to a remote development environment without having to include any code on your local system. It also allows you to exchange between multiple remote environments, allowing you to perform multiple tasks across multiple remote systems. Additionally, the plugin supports connecting to remote systems based on Linux, Windows, or macOS. Nowadays, developing on remote servers is crucial, which makes "Remote SSH Plug-in" an essential extension for Visual Studio Code.

7 Trailing Whitespace Visualizer

Good programming practice is to ensure that your code does not Contains any trailing spaces. Trailing whitespace consists of any space or tab character (which is essentially invisible) after the last non-space character in any line of code that precedes the newline character. The Trailing Whitespace Visualizer plugin highlights all such trailing whitespace in your code.

Trailing spaces are a completely unnecessary addition to your code and will increase the file size, so it's a good idea to remove them. This plugin not only highlights them in your code, but also when you use code written by other team members.

8 Debugger for Chrome

When you are using front-end JavaScript code, test your A common way to check if the code is correct is to do it on the browser. Chrome Dev Tools provide a practical way to debug JavaScript through the console. The Debugger for Chrome plug-in integrates Visual Studio Code into Chrome or Chromium-based browsers that support the Chrome Developer Tools Protocol.

#There are many debugging features that allow you to identify errors in your code without leaving the IDE. In short, the Chrome debugger extension saves time during the usual debugging process.

9 ESLint

ESLint is a static JavaScript code analyzer. It scans your code and finds syntax errors and inefficient programming practices. ESlint Visual Studio The extension integrates ESLint with the Visual Studio Code IDE, which can analyze JavaScript code on demand. However, it requires ESLint to be installed locally or globally on your system.

10 Live Server

Visual Studio Code's Live Server extension lets you run a local development server to test your code. It features live reloading for static and dynamic web pages.

Original address: https://blog.bitsrc.io/top-10-visual-studio-extensions-in-2020-857ea6d692dd

Author: Shaumik Daityari

For more programming related knowledge, please visit: Programming Video! !

The above is the detailed content of 10 VSCode plug-ins worth collecting (recommended). For more information, please follow other related articles on the PHP Chinese website!