39 Visual Studio Code Plugins I Have

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

"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.