Those VSCode extensions you should consider uninstalling

This article may offend some of the authors of VSCode extensions, but I can’t stand the fact that many articles on the web still recommend outdated extensions. As a long-time VSCode fan, I feel that I need to write an article to help popularize them.

There are a number of highly downloaded extensions in the VSCode extension market that should no longer be used. Obviously, it is not possible to tell you which extensions have been deprecated and which ones have serious bugs. Many new people because they have not in-depth understanding, read some articles or read the introduction of the extension market feel useful to install, in fact, VSCode extension installation will lead to a lot of problems:

1. Slow startA lot of extensions start loading when VSCode is started, so it’s not necessarily VSCode itself that is slowing down, it might be you loading too many extensions. You can invoke commands from VSCode’s command panelDeveloper: Startup PerformanceView the load time of each extension at VSCode startup.
2. Conflict between extensions, such as installing multiple extensions that change code colors,TODO highlight 和 Todo Treebetween
3. Function of repetition, such as:IntelliSense for CSS class names in HTML 和 HTML CSS Support
4. If you look at the Github Issues page, you will see a bunch of issues complaining about this issue, such as import-cost

This article introduces some of the deprecated VSCode extensions from two main perspectives:

1. Functionality is already built into VSCode
2. Maintain inactive extensions

This article is just to give some reasons why you should consider uninstalling, not to persuade you to uninstall them. Some extensions have problems, but some features are not built in or there are no better alternatives, but I think you should be aware of these things. Since I am currently mainly using VSCode to do front-end development, the extensions involved in this article are mostly related to the front-end.

Functionality is already built into VSCode

The data listed in this article is the date of the Last update of the article and is not guaranteed to be timely. The Last updated is the time when the extension was Last published to VSCode extension market.

Path Intellisense

Last updated: 2017/5/11

Issues open/close: 73/63

Download: 2.7 M

I often see people who have been using VSCode for only a few days without path completion, which I find baffling. You can see that this extension has not been maintained for nearly 3 years, which is another reason to abandon it. In fact, if a tool itself has good features, no bugs, and no dependencies on other projects, there is nothing wrong with not updating it for a long time. However, in fact, many projects will rely on other projects, especially VSCode extensions developed using JS, often see various NPM package reported security vulnerabilities, the most recent impact should be acorn.

VSCode already supports path completion in import/require statements, but there is no prompt for writing path strings in other scenarios. If you feel that path completion in import statements is enough for your needs, then I think this plugin should be uninstalled. Similarly, Path Autocomplete.

Auto Close Tag

Last updated: 2018/2/17

Issues open/close: 100/59

Download: 2.6 M

It can be seen from the sidebar that I have not opened any of the extensions. Actually, the automatic tag closing function has been built into HTML, JS, JSX and TSX files, but vUE still does not support it. Please take a look at the issue I mentioned: Auto close tag doesn’t work in vue file.

The authors of this extension have developed a number of excellent VSCode extensions, including this one and the Auto Rename Tag below, the most famous of which is probably Code Runner. I think it’s a good thing that some of the extensions are built in, because people’s energy is limited and maintaining open source projects is exhausting.

Auto Rename Tag

Last updated: 2019/10/27

Issues open/close: 453/71

Download: 2.6 M

Use the shortcut key F2 to refactor without installing the extension. Auto Close tag and Auto Rename tag extensions can also be uninstalled.

By setting “editor.renameOnType”: true (not enabled by default), you can achieve the same effect as auto Rename tag. If you want to enable this feature only in a specific language, see the following configuration:

// settings.json
"[html]": {
    "editor.renameOnType": true,},Copy the code

There is also an extension Terminal developed by this author, which was not maintained long ago on July 22, 2017/7/22, with 581 K downloads. The reason for not maintaining this extension is also stated by the author on the extension homepage. One is that Code Runner has more features than it, and the other is that VSCode already has some features of this extension built in.

npm Intellisense

Last updated: 2017/2/23

Issues open/close: 27/19

Download: 2M

The function of this extension is to provide NPM module completion in the import statement. From the last update time, it is speculated that this function should have been supported 3 years ago, but the downloads are terrible, there are still 9 days ago issue on Github, human confusion behavior.

Another extension that has the same functionality as this extension and also has very high downloads is Node.js Modules Intellisense.

Document This

Last updated: 2018/6/4

Issues open/close: 64/124

Download: 638K

VSCode already has built-in jsdoc generation and comment completion capabilities.

HTML Snippets

Last updated: 2017/12/28

Issues open/close: 19/21

Download: 3.3 M

The number of downloads of this extension speaks volumes about how some people install an extension based on its name, even if they look at its home page:

TypeScript related

Search for TypeScript in the extensions market and check sort by number of installs. The most popular typescript-related extensions are almost all built into VSCode. VSCode itself is written in TypeScript, and typescript-related utility features are a high priority. So I don’t see the need for VSCode to install extensions to basic TypeScript features, such as automatic module import and module name refactoring. VSCode is still evolving. Although VSCode is not an IDE yet, there are a lot of developers who use it as an IDE, especially for front-end development, so basic features that are not built in now will be built in some version of the future. Auto Import, TypeScript Hero, TypeScript Importer, Move TS, etc. Auto Import was the most installed with 867K downloads, and the lowest with more than 250K.

Inactive maintenance

Color Highlight

Last updated: 2017/7/12

Issues open/close: 49/25

Download: 894K

Consider vscode-colorize as an alternative.

TODO Highlight

Last updated: 2018/7/22

Issues open/close: 45/93

Download: 953K

Todo Tree: Todo Highlight: Todo Tree: Todo Tree: Todo Highlight: Todo Tree

Recommended configuration:

// settings.json
"todo-tree.general.tags": ["TODO:"."FIXME:"]."todo-tree.highlights.defaultHighlight": {
    "gutterIcon": true
},
"todo-tree.highlights.customHighlight": {
    "TODO:": {
        "foreground": "#fff"."background": "#ffbd2a"."iconColour": "#ffbd2a"
    },
    "FIXME:": {
        "foreground": "#fff"."background": "#f06292"."icon": "flame"."iconColour": "#f06292"}}Copy the code

Live Server

Last updated: 2019/4/17

Issues open/close: 332/326

Download: 4.8 M

Live server is a really nice thing to do. It allows you to automatically refresh your web page when you modify your HTML code. The main thing is that it’s hosted on a real server, rather than using the file:// protocol when you open files in a browser. The file:// protocol can also cause cross-domain problems.

In fact, this extension is not too long from the update time, mainly because you go to its Github issue page, there are a lot of issues related to performance, the author of this extension is an Indian brother, in the homepage of the extension market also said that he is very busy recently, looking for someone to maintain this project.

I went through the author’s Github repository and found that he had forked liver-Server as an NPM package that had not been updated since October 2018. So far I have not found a suitable substitute, and I think readers who need it can continue to use it. One of the problems I had with actual use was that the console had some useless warnings that didn’t affect use, but were uncomfortable to look at.

Bracket Pair Colorizer 2

Last updated: 2019/11/29

Issues open/close: 187/38

Download: 779K

The github Issues page shows a bunch of issues that have not been addressed. Like many unmaintained extensions, the most common one is CPU usage. I feel it is unlikely for the official to integrate this function. After searching the issues mentioned by the author in VSCode, there are nearly 60 of them, but the issue was not mentioned so that the official would consider integrating this function. Some comments asked me if there are any good substitutes for this extension. In fact, I have not found any good substitutes. There is even one Rainbow Brackets of the same type, which was put on the shelves on May 9, 2016 and has not been updated since May 12. I currently use the built-in indent line, which is fine, and I find the code color palette much cleaner since I don’t use the plugin.

Another indent line related extension, Indent-Rainbow, hasn’t been maintained in a year.

import-cost

Last updated: 2018/11/30

Issues open/close: 81/57

Download: 581K

Import-cost is one of the VSCode extensions under the wix open source project. Another highly downloaded extension is glean, which is a React refactoring extension. Back when I first got into VSCode this was one of the highest rate extensions installed. Same as the previous extension, there are high CPU issues, no one to maintain.

Output Colorizer

Last updated: 2017/7/6

Issues open/close: 10/13

Download: 240K

I am afraid to use the latest update time, ah, from the perspective of issues said that the function of this extension has been invalid. If you just want log files to have color highlighting, I don’t think you need to install the extension. It seems that this is what VSCode themes should do. The default theme already supports log file color highlighting:

SVG Viewer

Last updated: 2019//28

Issues open/close: 21/20

Download: 431K

This extension was developed by a Japanese guy, the project has given up maintenance, github warehouse has been sealed, recommend the replacement developed by Chinese: VScode-svG2.

Regex Previewer

Last updated: 2018/4/27

Issues open/close: 23/13

Download: 172K

The recommended online tool is Regex101.

vscode-fileheader

Last updated: 2016/8/10

Issues open/close: 19/5

Download: 143K

This extension hasn’t been updated since it was first released… Recommend a substitute developed by Chinese people: koroFileHeader.

XML Tools

Last updated: 2019/6/1

Issues open/close: 53/171

Download: 1.7 M

From github Issues, no one seems to maintain it, and the recommended alternative is Red Hat XML.

Some other extensions are not recommended

TSLint

If you didn’t know that TSLint was deprecated early last year and is now integrated into ESLint as a plug-in, you’re probably a fake front-end.

Beautify

VSCode’s built-in formatter uses js-beautify, but prettier is currently the most popular formatting tool in the front end. It is advisable to install prettier, and then set VSCode to use prettier as the formatter. Similarly, formatting plug-ins such as JS-CSS-HTML Formatter and Prettify JSON are not recommended.

// settings.json
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[yaml]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}
Copy the code

jshint

There are few open source projects that still use jshint. ESLint is recommended.

JavaScript (ES6) code snippetsJavaScript (ES6) code snippets

If you develop the React at ordinary times, you may also install the great ES7 React/story/GraphQL/React – Native snippets, you can go to contrast it both provide snippets, which basically covered the former provide snippets, Except for the CommonJS import statement, which means that the latter does not have two code snippets of RQR and MDE. Having too many snippets extensions slows down the speed of code prompts because each completion list is filtered into the snippets of the corresponding language.

GitHub

The authors of this extension recommend using Github Pull Requests developed by Github as an alternative.

IntelliSense for CSS class names in HTML

HTML CSS Support and IntelliSense for CSS class names in HTML are two similar extensions, and I recommend using the former because it has some of VSCode’s core developers among its contributors.

How to recommend some extensions to others

You can configure Recommended and not Recommended extensions in the.vscode/extensions.json file at the root of your project. You can see the Recommended extensions in the Extensions market by selecting Show Recommended Extensions.

// .vscode/extensions.json
{
    "recommendations": [
        "editorconfig.editorconfig"."dbaeumer.vscode-eslint"."esbenp.prettier-vscode"."yutengjing.view-github-repository"."yutengjing.open-in-external-app"]."unwantedRecommendations": [
        "hookyqr.beautify"."ms-vscode.vscode-typescript-tslint-plugin"."dbaeumer.jshint"]}Copy the code

The last

VSCode has been working on setting synchronization for the last few months, which is what Settings Sync does, and it will probably be uninstalled when it launches. Having written about recommending VSCode extensions in the past, I had over 100 installed extensions at the time, now I have around 50, and am getting more picky. I also wrote two simple extension View GitHub Repository and Open in External App. After developing the extension, I also refined a VSCode extension development template: Vscode-extension-boilerplate, if you are interested, you can understand it. If there is something wrong with this article or if readers have suggested a better alternative, feel free to point it out in the comments section.

Finally, here is my VSCode extension gist address: cloudSettings, which can be used with Settings Sync.