39 Visual Studio Code Plugins I Have
Tags: productivity, visualstudiocode, editor, discuss
Published: 2019-07-27 19:55:28

I have used Visual Studio Code since I enrolled in NYU-ITP(2016)
At that time I used to use Atom & Sublime Text. But now I'm using VSCode and Vim(for server stuff)

The initial title was `39 Visual Studio Code Plugins I Use` but during editing, I noticed that I haven't used some of them anymore and actually, I removed around 10 plugins 😆 

Anyway, I want to show the plugins I'm having now. Hopefully, some of you leave a comment to show your sets.


### Auto Close Tag 
>Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does.


This plugin can close html tags automatically. However, sometimes cause typo. Maybe I'm not a good user lol.

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag


### Bash Debug
>A bash debugger GUI frontend based on awesome bashdb scripts (bashdb now included in package).

Not use often, but sometimes I write bash code, so I keep this.

https://marketplace.visualstudio.com/items?itemName=rogalmic.bash-debug

### Bracket Paire Colorizer2
>This extension allows matching brackets to be identified with colours. The user can define which tokens to match, and which colours to use.

Some languages do not need to use the bracket, but js and c++ need to use it so this plugin helps me a lot. 

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2


### C/C++ for Visual Studio Code
>This preview release of the extension adds language support for C/C++ to Visual Studio Code including:

I use Xcode for C++ since I write C++ for openFrameworks but sometimes write C++ with Visual Studio. (I may need to remove this)

https://marketplace.visualstudio.com/items?itemName=ms-vscode.cpptools

### css2react
>Convert the current selection between CSS and React's inline style syntax.

I don't use often, but sometimes this is really helpful since I don't write CSS every day.

https://marketplace.visualstudio.com/items?itemName=gottfired.css2react


### Docker
>The Docker extension makes it easy to build, manage and deploy containerized applications from Visual Studio Code.

I recently started this because started learning and using Docker.

https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker

### DotENV
>A port of DotENV for vscode.`

I use this for creating a new nodejs project.

https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv
 

### ES7 React/Redux/GraphQL/React-Native snippets
>This extension provides you JavaScript and React/Redux snippets in ES7 with Babel plugin features for VS Code`

https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets


### ESLint 22M
>The extension uses the ESLint library installed in the opened workspace folder. If the folder doesn't provide one the extension looks for a global install version. If you haven't installed ESLint either locally or globally do so by running npm install eslint in the workspace folder for a local install or npm install -g eslint for a global install.

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


### exports autocomplete 44K
>Collects ES6 exports from your project and autocompletes them. Upon completion, item is also imported using a relative path. Import is placed after last import in that file.

This is very useful, but sometimes this is tricky for me. For example, I comment out an import on purpose, then I think why this function still active????? and need to back to the top lol. But, super nice plugin

https://marketplace.visualstudio.com/items?itemName=capaj.vscode-exports-autocomplete


### GitLens 24.4M
>GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.

Just installed and seems really useful to me. Recently, I had worked on several branches and this had helped me to know what I was doing lol

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

### GLSL Lint 21K
>This extension supports linting of GLS (OpenGL Shading Language). It uses the OpenGL and OpenGL ES shader validator

I'm writing fragment shader with VSCode.

https://marketplace.visualstudio.com/items?itemName=CADENAS.vscode-glsllint


### Hyper JavaScript Snippets 39K
>Hyper JavaScript Snippets is a snippets collection for JavaScript and TypeScript. The snippets follow some rules to make it more friendly to intellisense, point-free-style programming etc. Prettier is highly recommanded to work with this extension.

Basically, use cl for console.log. Maybe I need to remove this.

https://marketplace.visualstudio.com/items?itemName=t7yang.hyper-javascript-snippets

### Import Cost 992K
>This extension will display inline in the editor the size of the imported package. The extension utilizes webpack with babili-webpack-plugin in order to detect the imported size. 

Very helpful to know how big libraries are. 


https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

### JavaScript(ES6)code snippets
>This extension contains code snippets for JavaScript in ES6 syntax for Vs Code editor (supports both JavaScript and TypeScript).

This is good because supports TypeScript.

https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets


### JSON Viewer
> JSON viewer

I'm using Chrome's JSON Viewer, so that is the reason why I use this.

https://marketplace.visualstudio.com/items?itemName=ccimage.jsonviewer

### Log File Highlighter 214K

>A Visual Studio Code extension for adding color highlighting to log files. It is based on standard conventions for log4net log files but it's general enough to be useful for other variations of log files as well. The colors are customizable but by default the current color theme's colors are used.

Just installed a couple of days ago since sounds good. Now I just realized that generally, I use Vim to check log files lol I may not need to this...

https://marketplace.visualstudio.com/items?itemName=emilast.LogFileHighlighter

### npm Intellisense 1.6M
>Visual Studio Code plugin that autocompletes npm modules in import statements.

To reduce import errors by type.

https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense

### Output Colorizer 208K
>Language extension for VSCode/Bluemix Code that adds syntax colorization for both the output/debug/extensions panel and *.log files.

Just installed a couple of days ago since sounds good.


https://marketplace.visualstudio.com/items?itemName=IBM.output-colorizer

### Partial Diff 386K
>You can compare (diff) text selections within a file, across different files, or to the clipboard.
Multi cursor text selection.
User defined text normalization rules to reduce the noise in the diff >(e.g. replace tab characters to spaces).
User defined text normalization rules can be toggled off without removing them from the configuration.
Compare text in 2 visible editors (i.e. tabs) with one action.
https://marketplace.visualstudio.com/items?itemName=ryu1kn.partial-diff

I just installed this to understand helpful to me.

https://marketplace.visualstudio.com/items?itemName=ryu1kn.partial-diff

### Path Autocomplete 836K
>Provides path completion for visual studio code.

I guess many are using a similar plugin with other editors. To me, this is one of the most important plugins. I think I've been using this a couple of years.

https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete

### PlantUML 1.5M
>Rich PlantUML support for Visual Studio Code.

To create UML

https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml


### Polacode 154K
>You have spent countless hours finding the perfect JavaScript grammar, matching it with a sleek-looking VS Code theme, trying out all the best programming fonts.

To be honest, I have forgotten that I installed this lol. I think I won't have this next week 😂 

https://marketplace.visualstudio.com/items?itemName=pnp.polacode

### Prettier 9.7M
>VS Code package to format your JavaScript / TypeScript / CSS using Prettier.

I guess most people use this, even people don't really like 😝 
Actually, other teams are using this to make code clean.

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

### Python
>A Visual Studio Code extension with rich support for the Python language (for all actively supported versions of the language: 2.7, >=3.5), including features such as IntelliSense, linting, debugging, code navigation, code formatting, Jupyter notebook support, refactoring, variable explorer, test explorer, snippets, and more!

For python and for my personal project, I always try to use python.

https://marketplace.visualstudio.com/items?itemName=ms-python.python

### Rainbow CSV 1.1M
>Highlight columns in comma (.csv), tab (.tsv), semicolon and pipe - separated files in different colors
Provide info about column on hover
Automatic consistency check for csv files (CSVLint)
Multi-cursor column edit
Run queries in SQL-like language
Lightweight and dependency-free

Just installed a couple of days ago since looks really good. As you know, watching CSV file with an editor isn't really fun.

https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv

### React Pure To Class 58K
>Replaces pure functional react components with class components. Works both for JavaScript and TypeScript.
Select a block of code, choose React Pure To Class from the Command Palette.

Right now I don't really use this because the team uses classes, so initially start writing class. Probably I will remove this after publishing this post.

https://marketplace.visualstudio.com/items?itemName=angryobject.react-pure-to-class-vscode


### Shader languages support for VS Code 207K
>HLSL - High-Level Shading Language
>GLSL - OpenGL Shading Language
>Cg - C for Graphics

Sometimes I convert my GLSL code to HLSL for Unity. However, I think I may not need this.

https://marketplace.visualstudio.com/items?itemName=slevesque.shader


### Shades of Purple
This is not a plugin but a theme. 

NYU's color is purple so that is the reason why I'm using this now.
If you know a nice one, please let me know in a comment

https://marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple

### Simple React Snippets 292K
>The essential collection of React Snippets and commands.

To reduce typing.

https://marketplace.visualstudio.com/items?itemName=burkeholland.simple-react-snippets

### Sort lines 294K
>Sort lines of text in Visual Studio Code. The following types of sorting are supported:

I don't remember why I have this one.

https://marketplace.visualstudio.com/items?itemName=Tyriar.sort-lines

### TODO Highlight 1M
>Highlight TODO, FIXME and other annotations within your code.

I use a similar plugin with Xcode. 

https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight

### Trailing Spaces 323K
>highlight trailing spaces and delete them in a flash!

I just knew this a couple of days ago. To me, this is an awesome plugin since I leave unnecessary spaces quite often. This can help me to clean code as much as possible.

added the following to remove space
```json
"files.trimTrailingWhitespace": true,
```

https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces

 
### TSLint(1.2.2) 2.2M `Removed`
>Adds tslint to VS Code using the TypeScript TSLint language service plugin.
Please refer to the tslint documentation for how to configure the linting rules.

1.0.x was deprecated so recently I switched.

https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-tslint-plugin

### Typescript React code snippets 155K
>This extension contains code snippets for React with Typescript.

While I'm writing this post, I notice I have installed snippets plugins too many lol. I think I need to select the best one to me.

https://marketplace.visualstudio.com/items?itemName=infeng.vscode-react-typescript

### vscode-icons 17.3M
>Bring icons to your Visual Studio Code (minimum supported version: 1.18.1)

This can make VSCode fun. 

https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

### vscode-styled-components 515K
>Syntax highlighting and IntelliSense for styled-components.

For the project. Before joining the team I didn't know styled-components, now I like it so much.

https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components

### WebGl Syntax Hing 659
>For WebGL

Learning WebGL to build a fancy website lol

https://marketplace.visualstudio.com/items?itemName=nieyuyao.vscode-plugin-webgl-syntax


I noticed that I have many unused plugins lol I will need to clean up them since VSCode sometimes is working very slowly.

<a href="https://www.buymeacoffee.com/koji"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--kA3wM6t6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.buymeacoffee.com/buttons/default-red.png" alt="Buy Me A Coffee" height="41" width="174" loading="lazy"></a>