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

Editor to share with you which VSCode plug-ins are easier to use. I hope you will get something after reading this article. Let's discuss it together.

What is the use of vscode Visual Studio Code is a cross-platform editor for writing modern web and cloud applications, which runs on OS X web Windows and Linux. It provides developers with built-in support for a variety of programming languages, and as Microsoft pointed out in keynote at the Build conference, this editor also provides rich code completion and navigation features for these languages.

VSCode does not install plug-ins, which is equivalent to a gun without accessories, lack of accuracy when shooting, and heavy recoil when shooting. Of course, without plug-ins, you can write code well, but it's not that strong.

So this article will introduce you to the most commonly used plug-ins in VSCode, let our editor add a pair of wings, let us feel like a tiger in the process of writing code.

All plug-ins, as long as the search plug-in name can be found oh!

The "one" Chinese must gather.

These plug-ins are necessary for us as Chinese, and my mother is no longer afraid that we can't read English.

VSCode Chinese simplified package

Plug-in name: Chinese (Simplified) Language Pack for Visual Studio Code

This plug-in converts the text of the entire VSCode into Chinese with one click. An IDE of all Chinese culture is what we need very much. And this is the official Sinicization package, barrier-free understanding.

Code translation

Plug-in name: translation (English-Chinese Dictionary)

English is not very good for children's shoes, and "some translation" is often used when writing code, but in fact, for code, we often use humps, small humps, underscores and so on to write variable names, attribute names, class names and method names. In this way, it is impossible to use "some translation" to suspend translation in the editor.

After looking for a long time, I found a very useful plug-in that can solve this problem!

Local 770000-entry English-Chinese dictionary, do not rely on any online translation of API, no limit on the number of queries. Can translate hump and underline naming, and batch translation of identifiers in the whole document.

Detect English word errors in the code

Plug-in name: Code Spell Checker

A basic spell checker that can detect hump writing. The goal of this spell checker is to help catch common spelling mistakes. When writing code, we all use English words, and most of the time we will write the possibility of wrong words. Using the wrong words actually has a certain impact on maintainability.

Using meaningful words as method, class, and variable names will give your code more meaning and meaning. It is easier to understand the meaning of the code when you or others look at it. But if we misspell the word, sometimes we can't understand what the word means.

So this plug-in is very useful to us, even foreigners are using it. (there are currently more than 1 million downloads)

"two" topic collection

A programmer looks at editors and code for 8-12 hours a day. If our editor is not good-looking, without a certain degree of beauty and attractiveness, how can we not get tired of it? Coupled with a long-term look at the code, a comfortable theme is naturally one of the essentials.

Here are some of my favorite themes for you to use. There are more topics you like are welcome to mention in the comments, I will add here!

Dracula Theme

Topic name: Dracula Official

The main color of this theme is dark purple. I have used this theme for at least 2-3 years and have always liked it. The highlight and color of the code are very meticulous, which is very suitable for long-term reading. The colors of this theme are adapted to different languages, no matter what language we are developing.

Material Theme

Topic name: Material Theme

This is also a very famous theme, available in many IDE/ editors. Those who are used to this theme can be installed and used in VSCode. The usage is also more than 2 million +. I love this theme very much when I use SublimeText. (it also took several years.)

Nebula Theme

Topic name: Nebula Theme

This is the niche theme I'm using right now. The color matching is very similar to Dracula, but there are more bright colors, and the range of color change is not so great, which is more pleasing to the eye than Dracula. Of course, this also depends on personal preference.

Atom One Dark Theme

Topic name: Atom One Dark Theme

Some of the friends I know have used Atom, and some of them especially like this topic.

One Monokai Theme

Topic name: One Monokai Theme

Children's shoes who have been using SublimeText's Monokai for a long time should be interested in this theme. After all, the Monokai theme has been with us for a long time. (no, it's going to expose the age.)

GitHub Plus Theme

Topic name: GitHub Plus Theme

Yes, there is finally a white theme, but personally I am not very interested in the white theme. Recently, even Wechat has joined the dark world, so I'm used to all UI in dark mode. But after all, there are still children's shoes that love white.

Here I recommend a white theme with the same color as GitHub (I can say that I can only consider using white, children's shoes have their own favorite white theme, you can leave a message for me in the comments! )

There are many topics to choose from in the small summary VSCode. If you don't like any of the topics I recommend, you can type theme in the plug-in search box, and there will be a lot of topics for everyone to choose freely.

"three" icon theme collection

With the editor theme installed, not installing the icon theme is tantamount to inserting flowers on cow dung. Here are two icon themes that I have used by myself.

Material Icon Theme

Topic name: Material Icon Theme

Most people use this icon theme, which contains a very full range of icons, including almost all the files you can think of. It is highly recommended!

VSCode Icons

Topic name: vscode-icons

This is VSCode's official icon theme package, with more than 5 million + downloads. It can be said that, like Material Icon, it occupies a theme that is used by a large number of people. Choose to use it according to your personal preference. Personally, I think the biggest difference between the two is the folder. But I think the icons made by Material Icon are relatively more coordinated.

"four" utility plug-in collection

Here are some super utility plug-ins and functions that may have been used in other IDE. These plug-ins are mainly to strengthen the function of the editor, so that we get great help in the development process.

Code bookmark

Plug-in name: Bookmarks

It is the navigation in the code, moving easily and quickly between important locations. The search code is no longer needed. It also supports a set of selection commands that allow us to select the area between the bookmark line and the bookmark line. It is very useful for log file analysis.

Here are some of the features that bookmarks provide:

Mark / unmark the location in the code

Mark the location in the code and give the name

Jump back and forth between bookmarks

View a list of all bookmarks in a file

View a list of all bookmarks in the project

Special side bar

Lines with bookmarks

Select the area between bookmarks

Here are a few commands for this plug-in that I often use:

Bookmarks: List lists all bookmarks in the current file

Bookmarks: List from All Files lists all bookmarks under the current project

Bookmarks: Clear deletes all bookmarks in the current file

Bookmarks: Clear from All Files deletes all bookmarks under the current project

We can also view all the tags by opening the bookmark tab in the sidebar:

Coloring of parentheses

Plug-in name: Bracket Pair Colorizer 2

This extension uses colors to identify matching parentheses. You can define how to match and which colors to use. In the case of a large amount of code, parentheses will also become very many, with the color logo will bring better recognition ability to developers.

Enhanced Git function

Plug-in name: GitLens

Enhance the Git capabilities built into VSCode-through Git blame comments and code lenses, you can see the identity of the code author at a glance, seamlessly navigate and explore the Git repository, gain valuable insights through powerful comparison commands, and so on. For developers using Git code management, this is one of the required plug-ins!

Git History

Plug-in name: Git History

For some developers who are used to using the Git management tool in the editor, do not like to open another Git UI tool, this plug-in meets your needs to query all Git records.

View and search the graphics and details in the git log.

View the previous copy of the file.

View and search history

Compare branches / submit records / files

More ~

Real-time collaborative editing

Plug-in name: Live Share

Visual Studio Live Share allows us to collaborate with others on editing and debugging in real time, regardless of the programming language we are using or the type of application we are building. It allows us to share our current project immediately (and securely), and then share debug sessions, terminal instances, local host web applications, voice calls, and so on as needed! Developers who join our session receive all editor contexts (for example, language services, debugging) from our environment, which ensures that they can start collaborating effectively immediately without having to clone any code or install any sdk.

In addition, unlike traditional pair programming, Visual Studio Live Share allows developers to work together while retaining their personal editor preferences (such as themes, key bindings) and having their own cursors. This allows us to make a seamless transition between following others and exploring ideas / tasks for ourselves. In practice, this ability to collaborate and work independently provides a more natural collaboration experience for many common use cases.

To use this collaborative software, we first need to log in (GitHub login is recommended). After logging in, click the Live Share below:

Then the editor will pop up the following prompt, which means that our real-time sharing session has been opened, the invitation connection has been copied and can be sent to your assistant developer.

At this point we can send the connection to our helper, who must have the Live Share plug-in installed and must be logged in.

At this point, the other person only needs to click the Live Share icon in the sidebar, then find it in the session details and click to join the collaboration session.

After clicking, an input box appears at the top of the editor, the other party only needs to enter the invitation connection provided by us and press enter.

When the assistance is finished, we can click the icon in the picture below.

After clicking the icon, a selection pop-up window appears at the top, and select Stop Collaboration Session to stop the assist session.

Path intelligent prompt

Plug-in name: Path Intellisense

Adding this plug-in allows us to have intelligent path prompts when applying files (such as pictures).

"five" collection of front-end development plug-ins

Here is the most complete collection of front-end development plug-ins in the world for children's shoes. There is no "one". (of course, in order to be the strongest, I still need more suggestions. I am welcome to add some practical front-end plug-ins that I have not used yet. You can leave a message in the comments area. )

Programmers' best friends are nothing more than plug-ins in the editor, and there is a big difference between having plug-ins and not using plug-ins in development. This reminds me of my experience of hand-tapping with notepad++, line by line, when I first learned to program. Now that there are all kinds of IDE, it is estimated that almost no one is still typing code by hand with a text editor.

Automatically close the label

Plug-in name: Auto Close Tag

Automatically add the HTML/XML close tag, the same as Visual Studio IDE or SublimeText. When we fill in the start tag, the end tag is automatically added. This is very practical and reduces a lot of the time we spend writing html and xml.

If you are using SublimeText or are used to SublimeText children's shoes, you can turn on SublimeText 3 mode and add this configuration to the settings.json file:

{"auto-close-tag.SublimeText3Mode": true}

Automatic synchronization signature

Plug-in name: Auto Rename Tag

Automatically renames pairs of HTML/XML tags, the same as Visual Studio IDE. With this plug-in, you can say goodbye to changing the header and tail tags repeatedly every time you change the tag. Especially when there is a lot of content in the tag, it is really difficult to change it.

CSS color highlight

Plug-in name: Color Highlight

This plugin highlights the color codes of all CSS/web on the page, and the highlighted color is the corresponding color of the code. It is very practical when writing CSS.

Highlight pair label

Plug-in name: VSCode Highlight Matching Tag

This plug-in highlights the start and / or end tags of the match. You can also display the path of the label in the status bar. The plug-in will try to match tags anywhere: from tag attributes, inside strings, to any file, while providing a wide range of styling options to customize how tags are highlighted.

Officially supported tags: HTML and JSX. Other styles (XML, Vue, Angular, PHP) are also available.

HTML CSS support

Plug-in name: HTML CSS Support

Added CSS support that is missing in VSCode. Class attribute completion, ID attribute completion and full file search CSS and SCSS prompts, etc.

Mini Program support

Plug-in name: minapp-vscode

Intelligent completion of WeChat Mini Programs tags and attributes (also supports native Mini Program, mpvue and wepy frameworks, and provides snippets)

Vue support

Plug-in name: Vetur

Develop one of the necessary plug-ins for children's shoes in Vue. Support tags, intelligent completion of attributes, and so on.

I often use the children's shoes developed by Vue. I recommend another plug-in for you. Is Vue2 Snippets, this plug-in adds the code block of Vue2, so that we can quickly generate the Vue2 template in the process of development.

React support

Plug-in name: ES7 React/Redux/GraphQL/React-Native snippets

This extension provides you with React/Redux code snippets in JavaScript and ES7, as well as VSCode's Babel plug-in features. Write React children's shoes, this plug-in is one of the must.

NPM support

Plug-in name: npm

This extension supports npm scripts defined in the runtime package. And validate the installed module against the dependencies defined in the package. The favorite feature of this plug-in is that it can automatically detect whether the dependency is installed, and you can also prompt the version of the dependency and the specific project address. One of the necessary plug-ins for children's shoes using npm.

NPM Smart Tip

Plug-in name: npm Intellisense

Adding this plug-in gives us a hint of the npm dependency package when writing JavaScript. In particular, there will be rich hints in the process of citation.

Powerful code formatting

Plug-in name: Prettier-Code formatter

Prettier is a code formatter. It enforces consistent styling by parsing the code and reprinting the code using its own rules that take into account the maximum line length and wrap the code if necessary.

In a multi-person collaborative development team, a unified coding specification is very important. A set of specifications can make the code we write achieve a consistent style and improve the readability and unity of the code. The maintenance of nature will also be improved.

Tips we can do by forcing some specific languages to use this formatting tool in settings.json. Add the following configuration to settings.json.

{"editor.defaultFormatter": "esbenp.prettier-vscode", "[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}}

Tips are also recommended to set the editor to format automatically when saving. Add the following configuration to settings.json.

/ / Global configuration "editor.formatOnSave": false,// configure "[javascript]": {"editor.formatOnSave": true} by language

Real-time preview in the editor

Plug-in name: Browser Preview

VSCode's browser Preview plug-in allows us to open a real browser preview in the editor. The browser preview is provided by Chrome Headless, which works by launching an instance of Headless Chrome in a new process. Provides a secure way to render web content in VSCode and supports some interesting features, such as debugging in the editor! You don't have to switch back and forth between browsers and editors anymore.

Insert a picture description here

This plug-in needs another plug-in to support Debugger for Chrome. After installing this plug-in, you only need to configure it according to the following configuration format (the configuration depends on our project and requires minor modifications).

{"version": "0.1.0", "configurations": [{"type": "browser-preview", "request": "attach", "name": "Browser Preview: Attach"}, {"type": "browser-preview", "request": "launch" "name": "Browser Preview: Launch", "url": "http://localhost:3000" / / change this to the address of your local project}]}

Real-time preview

Plug-in name: Live Server

If we are doing a static page layout, this plug-in can provide us with a local real-time preview server, which opens in Google browser. This is lightweight compared to the plug-ins mentioned above.

Browser open

Plug-in name: open in browser

When developing local files, you can install the plug-in and open it with the default browser. Of course, you can set up our favorite browser to open.

"six" PHP development plug-in

VSCode is really powerful as a front-end development editor, but this editor is not limited to the front-end, and as a back-end editor is not much worse than other IDE.

I have been using PHPStorm for a long time, but I find that even a computer with a high configuration can not escape the infinite engulfment of the computer's CPU and memory by these heavyweight IDE.

With the development of several lightweight editors, including SublimeText, Atom and VSCode. With these lightweight editors and an active plug-in development community, many of the features available in IDE are available in lightweight editors. So in the end I went back to the lightweight editor.

Finally, I began to study how to use VSCode as an IDE for PHP development. Here are some very useful collections of VSCode required plug-ins for PHP development:

PHP enhanced plug-in

Plug-in name: PHP Intelephense

PHP Intelephense is a high-performance PHP language server that provides a large number of basic features for efficient PHP development. Installed this plug-in basically has 70-80% heavyweight IDE auxiliary functions.

Its functions include the following:

Fast hump / underscore case code completion (IntelliSense). Provides detailed tips for documents, projects, and built-in symbols and keywords. Automatically add usage declaration.

Projects and built-in constructors, methods and functions all have detailed signatures (parameters) to help.

Jump definition support in fast projects.

Find all references within the project.

Quickly search for "hump / underline" symbols within the project

Full document symbol search, also supports breadcrumb and outline UI.

Diagnose open files with a fault-tolerant parser and a powerful static analysis engine.

Compatible with PSR-12 document / range format. Formatting also applies to HTML/PHP/JS/CSS files.

The HTML request is forwarded to the HTML/JS/CSS/PHP language server to complete the HTML code intelligent prompt.

Mouse over displays a detailed link to the official PHP document.

Intelligently highlight references and keywords.

Read PHPStorm metadata for more advanced type analysis and prompts.

Intelligently rename symbols. Files / folders are also automatically renamed when appropriate. (advanced version) (https://intelephense.com)

Can accurately collapse code definitions, blocks, usage declarations, heredoc, comments, and custom areas. (advanced version) (https://intelephense.com)

Quickly find and jump interfaces and abstract classes and related methods. (advanced version) (https://intelephense.com)

Quickly go to the variables and parameters of the type definition. (advanced version) (https://intelephense.com)

Quickly declare a method that implements an interface or abstract method declaration. (advanced version) (https://intelephense.com)

Automatic phpdoc creation can be configured to infer the return type and identify the exception thrown. (advanced version) (https://intelephense.com)

The premium features mentioned need to be purchased separately, which can be purchased at https://intelephense.com practical Alipay. The one-time purchase price is 70 yuan (I think it's a good deal compared with other IDE's annual fee).

This plug-in provides you with almost all the other functions of IDE. With this plug-in, our VSCode instantly programmed an omnipotent IDE editor. The key point is that it is relatively lightweight.

PHP specification detection

Plug-in name: phpcs

This linter plug-in provides an interface to phpc for Visual Studio code. It will be used with files that have a "PHP" language pattern.

If friends have been using linter, then this plug-in can be used with the linter set by phpCS in our project, and the code can be automatically formatted or the wrong format will be prompted in VSCode.

"Seven" Java development plugin

Personally, I haven't done too much JAVA development, so I haven't studied it in depth, but VSCode is also used by many Java developers. Therefore, there is also corresponding support.

There are several plug-ins used to support Java, but officials have made a Java plug-in family bucket to install all the plug-ins supported by Java with one click.

Plug-in name: Java Extension Pack

Java Extension Pack (Java plug-in Family Bucket) is a popular set of plug-ins that help you write, test, and debug Java applications in Visual Studio Code.

This family bucket contains the following plug-ins:

Java language support (provided by Red Hat)

Code navigation

Automatic completion

Reconstruct

Code snippet

Java Debugger

Java Test Runner

Project scaffolding

Custom target

Java dependent Viewer

View Java projects, reference libraries, resource files, packages, classes, and class members

Visual Studio IntelliCode

Development assistance

Complete code fill

Other language support

It is also possible to use VSCode to develop other languages, as long as you enter the language we want in the plug-in search bar, you can find the relevant plug-ins and support for that language.

Summary of to be continued

For a personalized editor, a box of useful plug-ins is a must, and VSCode without plug-ins is soulless. This article introduces a large box of super-useful, easy-to-use and commonly used plug-ins for different categories.

But do you want to give up all these plug-ins, one installation at a time? Some children's shoes will say, "IDE plug-ins are basically installed, this is too troublesome." To tell you the truth, it is really troublesome, especially a computer in the company, another laptop at home, both computers need to install these plug-ins, think about it.

Of course, there is a solution to every problem, and VSCode also has plug-ins to solve this problem. VSCode's Setting Syn can help us synchronize our plug-ins, editor configurations and custom shortcuts. Let's pull all the previous configurations right away on the new environment or computer, and we don't need to reconfigure them one by one again.

After reading this article, I believe you have a certain understanding of "which VSCode plug-ins are easy to use". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

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.