In our last article, “all of VSCode’s common shortcuts,” we learned about common shortcuts in VSCode. Learning shortcuts allows us to write code more efficiently and quickly. But without some of the accessibility features in the IDE, it’s still a fly in the ointment.

VSCode without plug-ins is like a gun without accessories, which still lacks accuracy when shooting and has a heavy recoil when firing. Of course, you can code pretty well without plug-ins, but not as well.

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

🌟 all plug-ins, as long as the search plug-in name can find oh!


“One” people must gather

These plug-ins are necessary for us as Chinese, my mother is no longer afraid that we can not understand English.


VSCode Simplified Chinese package

Chinese (Simplified) Language Pack for Visual Studio Code

This plugin converts entire VSCode text to Chinese in one click. An all-Chinese IDE is particularly needed. And this is the official Chinese package, understand barrier-free.



The code translation

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

When writing code, we often use “some translation”, but for code, we often use “camel”, “little camel”, “underline”, etc., to write variable names, attribute names, class names and method names. It is impossible to use “some translation” to hover translations in the editor.

I have been looking for a long time for you to find a very easy to use a plug-in can solve this problem!

Local 770,000 english-Chinese dictionary, does not rely on any online translation API, no query times limit. Translatable hump and underline naming, and batch translation of identifiers throughout the file.



Detect code English word error

Plugin name: Code Spell Checker

A basic spell checker that detects hump writing. The goal of this spell checker is to help catch common spelling mistakes. When we write code, we use English words, and many times we have the possibility of writing wrong words. Using the wrong word can actually have an impact on maintainability.

Using meaningful words for method, class, and variable names gives your code more meaning and meaning. It’s easier to understand the meaning of the code when you or someone else looks at it. But if we spell the word wrong, sometimes we can’t understand the meaning of the word.

So this plugin is very useful for us, even foreigners are using it. (Over 1 million downloads so far)



“Two” theme collection

A programmer spends 8-12 hours a day looking at editors and code. If our editor is not beautiful, not a certain aesthetic and attractive, how can it not be tired of looking at? With a long look at the code, a comfortable theme is naturally one of the requirements.

Here are a few of my favorite themes for you to use. More favorite topics are welcome in the comments and I will add them here!


Dracula Theme

Dracula Official

The main color of this theme is dark purple. I have used this theme for at least 2-3 years and always like it. The code is highlighted and colored carefully, which is good for long-term viewing. The color of the theme has been adapted to different languages, so it looks pretty regardless of what language we’re developing.

Material Theme

Theme name: Material Theme

This is also a very popular theme and is found in many IDES/editors. Those who are used to this theme can install it in VSCode. More than two million were used. This theme is a favorite of mine when I used SublimeText. (It took several years.)


Nebula Theme

Theme name: Nebula Theme

This one is the niche theme I’m using now. The color scheme is very similar to Dracula, but with more bright colors and less color variation, it is more pleasing to the eye than Dracula. Of course, it depends on personal preference.



Atom One Dark Theme

Theme name: Atom One Dark Theme

Some of the people I know have used Atom, and some of them really like the topic.



One Monokai Theme

Name: One Monokai Theme

This theme should be of interest to long-time users of SublimeText Monokai. After all, the Monokai theme has been with us for quite some time. (Not good to expose the age 😂)

Insert a picture description here

GitHub Plus Theme

GitHub Plus Theme

Yes, I finally have a white theme, but I don’t like the white theme. Even wechat has recently joined the dark world, so I’m used to all UI being dark mode. But there are children’s shoes that love white, after all.

Here I recommend a white theme with the same color as GitHub (I can say that it is the only one I can consider using white, if you have your favorite white theme, please leave a comment to me!)



🌟 summary VSCode has a lot of themes to choose from, if I do not recommend the theme you like, you can enter the plugin search box theme, there will be a lot of themes for you to choose freely oh!

Insert a picture description here

“Three” icon theme collection

If the editor theme is installed, if the icon theme is not installed, it is equivalent to 💐 flowers inserted in 💩 cow dung. Here are two ICONS that I’ve used myself.


Material Icon Theme

Theme name: Material Icon Theme

The majority of people use this icon theme, which contains a very complete set of ICONS, including almost every file you can think of. Highly recommended!



VSCode Icons

Name of the theme: vscode- ICONS

This is VSCode’s official icon themed pack, with over 5 million downloads. It can be said that like Material Icon, it accounts for another theme used by a large number of people. Use it according to personal preference. Personally, the biggest difference between the two is the folder. But I think the Icon made by Material Icon is relatively more coordinated.



“Four” collection of utility plug-ins

Here are some super utility plug-ins and features that you might have used in other ides. These plug-ins mainly enhance the function of the editor, so that we can get a great help in the development process.


Code bookmarks

Plugin name: Bookmarks

It’s navigation through code, moving easily and quickly between important locations. Search code is no longer required. It also supports a set of selection commands that allow us to select the bookmark row and the area between the bookmark rows. It is useful for log file analysis.

Here are some of the features that bookmarks offer:

  • Mark/unmark locations in code
  • Mark the location and give the name in the code
  • Jump back and forth between bookmarks
  • View a list of all bookmarks in a file
  • View a list of all bookmarks in your project
  • Special side rod
  • A line with a bookmark
  • Select the area between bookmarks

Here are a few of the commands for this plugin that I often use:

  • Bookmarks: ListLists all bookmarks in the current file
  • Bookmarks: List from All FilesLists all bookmarks under the current project
  • Bookmarks: ClearDelete all bookmarks in the current file
  • Bookmarks: Clear from All FilesDelete all bookmarks under the current project

We can also view all the tabs by opening the bookmark TAB in the sidebar:


The parentheses are colorized

Bracket Pair Colorizer 2

This extension uses color to identify matching parentheses. The user can define how to match and which colors to use. In cases where there is a lot of code, the parentheses will become very large, and the color identifier will give the developer better recognition.



Enhancing Git functionality

Plug-in name: GitLens

Enhanced Git features built into VSCode — you can see the identity of the code author at a glance with Git blame annotations and code lenses, seamlessly navigate and explore Git repositories, gain valuable insights with powerful compare commands, and much more. Git code management developers, this is a must install plug-ins!



Git History

Git History

For developers who are used to using the Git management tool in the editor and don’t like to open another Git UI tool, this plug-in meets your need to query all Git records.

  • View and search for graphics and details in git logs.
  • View a previous copy of the file.
  • View and search history
  • Compare branches/commit records/files
  • More ~


Real-time collaborative editing

Plugin name: Live Share

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

Additionally, 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 for a seamless transition between following others and exploring ideas/tasks on our own. In practice, this ability to collaborate and work independently provides a more natural collaborative experience for many common use cases.


To use the collaboration software, you first need to log in (GitHub is recommended). Once logged in, click Live Share below:


The editor will then pop up with the following prompt, which means that our live sharing session has been opened and the invite connection has been copied and can be sent to your helper developer.


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

Just click on the Live Share icon in the sidebar, go to session details and click Join a collaboration… .

After clicking, an input box will appear at the top of the editor. The other party only needs to input the invitation link provided by us and press Enter.


Once the assistance is complete, we can click on the icon in the image belowAfter clicking the icon, a selection popup window will appear above, selectStop Collaboration SessionYou can stop the assist session.


Intelligent Path Prompt

Plug-in name: Path Intellisense

The addition of this plugin allows us to have intelligent path prompts when applying files (such as images).



“Five” front-end development plug-in collection

Here is the world’s most comprehensive collection of front-end development plug-ins, there is no “one”. (Of course, to achieve the strongest also need everyone to give me more advice, welcome friends to give me some I have not used the practical front-end plug-in oh! Leave a comment in the comments section!

A programmer’s best friend is a plug-in in an editor, and there is a world of difference between development with and without plug-ins. This reminds me of my experience of using notepad++ to type code line by line when I first learned programming. There are so many ides out there that almost no one is typing code by hand with a text editor anymore.


Automatic closing label

Plug-in name: Auto Close Tag

Automatically adds HTML/XML closing tags, same as Visual Studio IDE or SublimeText. When we fill in the start label, the end label is automatically added. This is very useful and reduces the amount of time we spend writing HTML and XML.


If you are using SublimeText or are used to SublimeText, you can turn on SublimeText 3 and add this configuration to your settings.json file:

{

   "auto-close-tag.SublimeText3Mode": true

}

Copy the code


Automatically synchronize label names

Plug-in name: Auto Rename Tag

Automatically renames paired HTML/XML tags, same as the Visual Studio IDE. Use this plugin to eliminate the need to repeatedly modify the header and tail tags every time you change them. Especially when the contents of the label are very much, it is really difficult to change.



The CSS color is highlighted

Plugin name: Color Highlight

This plugin will highlight all CSS/ Web color coding on the page. The highlighted color is the corresponding color of the coding. Very useful when writing CSS.



Highlight the matching label

VSCode Highlight Matching Tag

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

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



HTML, CSS support

Plugin name: HTML CSS Support

Added CSS support missing from VSCode. Class attribute completion, ID attribute completion, full file search CSS and SCSS prompt, etc.



Applets support

Plugin name: minapp-vscode

Smart completion of wechat applet tags and attributes (supports native applet, MPvue and WEpy frameworks with snippets)



Vue support

Plugin name: Vetur

Develop one of Vue’s children’s shoes must be installed plug-ins. Intelligent completion of tags, attributes and so on is supported.


I often use children’s shoes developed by Vue, I recommend another plug-in for you. Vue2 Snippets, which adds Vue2 code blocks, allows us to quickly generate Vue2 templates during development.

Insert a picture description here

The React to support

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

This extension provides you with JavaScript and ES7’s React/Redux code snippets, as well as VSCode’s Babel plugin feature. This plugin is a must for writing React.


NPM support

Plugin name: NPM

This extension supports running NPM scripts defined in the package. And validate the installed modules against the dependencies defined in the package. One of my favorite features of this plugin is the ability to automatically detect whether a dependency is installed or not, as well as prompt for the dependency version and specific project address. One of the necessary plug-ins for children’s shoes to use NPM.



NPM intelligent prompt

Plugin name: NPM Intellisense

Adding this plugin allows us to be alerted to NPM dependencies when writing JavaScript. In particular, there will be rich hints in the process of reference.



Powerful code formatting

Prettier-code formatter prettier-code Formatter

Prettier is a code formatter. It enforces a consistent style by parsing the code and reprinting it with its own rules that allow for maximum line length and wrap the code when necessary.

In a multi-person team, it is important to have a common code writing specification. A set of specifications allows us to write code in a consistent style, improving readability and consistency. Natural maintainability will also improve.


🌟 tip We can force certain languages to use this formatting tool in settings.json. Add the following configuration in settings.json.

{

  "editor.defaultFormatter": "esbenp.prettier-vscode".

  "[javascript]": {

    "editor.defaultFormatter": "esbenp.prettier-vscode"

  }

}

Copy the code

🌟 Tips I also recommend setting the editor to automatically format when saving. Add the following configuration in settings.json.

// Global configuration

"editor.formatOnSave": false.

// By language

"[javascript]": {

    "editor.formatOnSave": true

}

Copy the code

Live preview in the editor

Plugin name: Browser Preview

VSCode’s browser preview plug-in allows us to open a real browser preview in the editor. 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 in-editor debugging! No more hassle switching back and forth between the browser and the editor!

Insert a picture description here

This plug-in needs the support of another plug-in for Chrome. After installing this plug-in, you can configure it according to the following configuration format (the configuration depends on our project and needs to be slightly modified).

{

    "version": "0.1.0 from".

    "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

        }

    ]

}

Copy the code

Real-time preview

Plugin name: Live Server

If we’re doing a static page layout, this plugin provides us with a local live preview server that opens in Google Chrome. This is relatively lightweight compared to the plugins described above.



Browser open

Plugin name: Open in Browser

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


PHP development plugins

VSCode is certainly 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 ides.

I’ve been using PHPStorm for a long time, but I’ve found that even on a high spec PC, these heavy ides can eat away at your CPU and memory.

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 found in the IDE can be found in the lightweight editor. So I ended up going back to the lightweight editor.

Finally, I started looking into using VSCode as the IDE for PHP development. Here are some of the most useful VSCode plug-ins for PHP development:


PHP enhancement plugin

Plugin name: PHP Intelephense

PHP Intelephense is a high-performance PHP language server that provides a number of basic features for efficient PHP development. With this plug-in installed, you basically have 70-80% of the accessibility of a heavyweight IDE.

Its features include the following:

  • Fast hump/underline case code completion (intellisense). Provides detailed hints on documents, projects, and built-in symbols and keywords. Automatically add usage statements.
  • Projects and built-in constructors, methods, and functions are assisted with detailed signature (parameter) help.
  • Jump definition support in fast projects.
  • Find all references within the project.
  • Do a quick search for the “hump/underline” symbol within the project
  • Full document symbol search, also supports breadcrumb and Outline UI.
  • Diagnose opened files with a fault-tolerant parser and a powerful static analysis engine.
  • Compatible with PSR-12 document/range format. Formatting also works for HTML/PHP/JS/CSS files.
  • HTML requests are forwarded to the HTML language server to complete the HTML/JS/CSS/PHP code intelligent prompt.
  • Hover over displays detailed links to official PHP documentation.
  • Smart highlighting of references and keywords.
  • Read PHPStorm metadata for more advanced type analysis and hints.
  • Intelligent renaming symbols. Files/folders are also automatically renamed when appropriate. (Premium edition)(https://intelephense.com)
  • Ability to accurately collapse code definitions, blocks, usage declarations, hereDoc, comments, and custom areas. (Premium edition)(https://intelephense.com)
  • Quickly find and jump to interfaces and abstract classes and related methods. (Premium edition)(https://intelephense.com)
  • Quickly go to the variables and parameters defined by the type. (Premium edition)(https://intelephense.com)
  • Quickly declare methods that implement interface or abstract method declarations. (Premium edition)(https://intelephense.com)
  • Automatic PHPDoc creation can be configured to infer return types and identify thrown exceptions. (Premium edition)(https://intelephense.com)

The advanced version of the functions mentioned need to be purchased separately, you can go to https://intelephense.com to purchase practical Alipay. The one-time purchase price is 70 RMB (I think this is a good deal compared to other ides with annual fee).

This plugin provides you with almost all the functionality of other ides, and with this plugin our VSCode has instantly programmed a versatile IDE editor. The point is that it is relatively lightweight.



PHP specification checking

Plug-in name: PHPCS

The Linter plug-in provides an interface to PHPC for Visual Studio code. It will be used with files that have the “PHP” language pattern.

If your friends have always used linter, then this plug-in can be installed and used together with linter set by phpCS in our project, so that the code can be automatically formatted or the format error will be prompted in VSCode.



“Seven” Java development plug-ins

I don’t personally do a lot of JAVA development, so I don’t go into it, but VSCode is used by a lot of JAVA developers. So there’s support for that.

There are several plugins to support Java, but there is an official Java plug-in bucket to install all the plugins supported by Java in one click.

Plug-in name: Java Extension Pack

The Java Extension Pack 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 plugins:

  • 📦 Java Language support (provided by Red Hat)
    • Code navigation
    • Done automatically
    • refactoring
    • Code snippet
  • 📦 Java debugger
  • 📦 Java test runner
    • Project scaffolding
    • Custom goals
  • 📦 Java depends on the viewer
    • View Java projects, reference libraries, resource files, packages, classes, and class members
  • Visual Studio IntelliCode
    • Development assistance
    • Complete code padding


Other language support

It is also perfectly possible to develop other languages using VSCode, just type the language you want to use into the plug-in search bar and you will find plugins and support for that language.



Summary of “to be continued”


For a personalized editor, a box of good plug-ins is a must, and VSCode without plug-ins has no soul. This article introduces a large box of super useful, useful, and commonly used plug-ins in different categories.

But so many plug-ins, one by one installation, do you want to give up? Some children will say “IDE plug-ins are basically installed, this is too much trouble”. To tell the truth, it is really troublesome, especially a company computer, a laptop at home, two computers need to install these plug-ins, think about the crash.

Of course, there is a solution to every problem, and VSCode also has plug-ins for this kind of problem. VSCode’s Setting Syn allows us to synchronize our own plugins, editor configurations and custom shortcuts. Let’s pull up all the previous configurations in a new environment or on a new computer without having to reconfigure them one by one.

In the next article I will go into detail on how to configure and use the configure synchronization plug-in. Stay tuned!

Good article recommendation

  • 🔥 “VSCode commonly used shortcut keys encyclopedia | VSCode senior players of the first book” — so for a good programmer, a good code editor can play a great role in the development process can bring us a lot of convenience, help, efficiency and influence. Even a good editor can bring a greater sense of joy to daily programming.
  • 🔥 8 HTML+CSS Tips to See on the Front End – CSS is a very unique language. It looks very simple, but a particular effect that looks simple is very difficult to implement. The purpose of this article is to share some new CSS tricks for kids on the front end, things that are not covered in front end tutorials and training classes. The second is to rekindle the love and enthusiasm for front end layout and special effects for those who are still in front end development. 🔥
  • 🔥 7 Benefits of Learning to program for those of you who want to and are learning to program — Choosing to learn to program can be life-changing. Maybe a lot of people learn to program at first and sign up for a programming class in order to get a higher salary or a better working environment. Finally stick to stick to, we will find that programming will also bring us a lot of personal ability and skill improvement.
  • 🔥 5 Rules to Be a Better Developer — This article teaches us 5 rules to be a better developer, how to stand out from the crowd, and how to help us in our tech careers.

This article is formatted using MDNICE