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.
Top comments (5)
What an amazing list, thanks. I'd like to add one more plugin - A MySQL plugin for Visual Studio designed to automate and simplify MariaDB and MySQL database development and enhance data management capabilities. When you integrate it, all database development and administration tasks become available from the Visual Studio. devart.com/dbforge/mysql/fusion/
You should check out Remote Development it allows you to run VS Code server side as well. No need for VIM. It works in docker containers too
Thanks!
Interesting...for the keeping the code complexity( such as cyclomatic complexity) in check, what do you uses?
we are checking it with tslint.json
palantir.github.io/tslint/rules/cy...