Skip to content

Visual Studio Code

A free, open source, constantly updating, multi-platform and full-stack IDE.

Supported Languages that I care for:
HTML, CSS, SASS, XML, JavaScript, TypeScript
Python, R
C++, Java, Go, F#, SQL
Dockerfile, Markdown

Plugins Index - Personal

Remember using Emmet built-in capabilities in the IDE

Personal Choice - Code Management
  • Settings Sync - Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist.
  • Project Manager - Easily switch between projects
Personal Choice - Visual Extensions
  • Material Theme - Most popular IDE UI theme so far
  • Material Icon Theme - Easy to identify files within the project
  • Prettier - Code Formatter - helps format your JavaScript/TypeScript/JSON/YAML/CSS/HTML/Markdown and Angular/Vue/GraphQL, colors keywords to make your code easily readable. beautify is another similar extensions. Remember to set "Format on save" setting after pressing "Cmd + comma".
  • Bracket Pair Colorizer 2 - Makes it easier to identify opening and closing brackets
  • TODO Highlight - highlight TODOs, FIXMEs, and any keywords, annotations
  • Personal Choice - Functional Extensions - UI

  • Auto Rename Tag - useful for HTML to rename start and ending tag on change without having to remember

  • Rest Client - like postman, calls API from the IDE

  • CSS Peek - Allows you to peek CSS definition from HTML file
  • HTML CSS Support - Missing CSS support for HTML documents
  • SVG Viewer - Lets you see an actual image for svg format file
  • Live Server - creates a development local server for your static and dynamic pages. Live Reload reloads the page as soon as you save your work.
  • Live Sass Compiler - compiles your scss files into css files just as swiftly and as real-time as node-sass
  • Paste JSON as Code - Copy JSON, paste as Go, TypeScript, C#, C++ and more.
Personal Choice - Functional Extensions - Frontend
  • Debugger for Chrome - Debug Javascript code in chrome browser
  • ES7 React/Redux/GraphQL/React-Native snippets - provides you Javascript and React/Redux snippets in ES7 with Babel plugin features.
  • Import Cost - Display import/require package size (Javascript/node) in the editor
Personal Choice - Backend
  • Maven for Java - Manage Maven projects, execute goals, generate project from archetype
  • Java Dependency Viewer - Manage Java Dependencies in VSCode
  • Java Extension Pack - collection of popular extensions that can help write, test and debug Java applications
Personal Choice - IoT
  • PlatformIO IDE - IDE for embedded development

Plugins Index

Must-Have
  • ESLint - linting for your Javascript and jsx.
  • Beautify - Beautify javascript, JSON, CSS, Sass, and HTML
  • VS Live Share - enables you to collaboratively edit and debug with others in real time, regardless what programming languages you're using
  • VS Live Share Extension Pack - includes integrated audio and text chat
  • Code Runner - Run code snippet or code file for multiple languages (pretty much everything)
  • YAML - YAML Language Support by Red Hat, with built-in Kubernetes and Kedge syntax support
  • Markdown Preview Enhanced - Markdown Preview Enhanced ported to vscode
Need-to-Have
  • Git Project Manager - Allows you to change easily between git projects.
  • Todo Tree - displays them in a tree view in the explorer pane. Clicking a TODO within the tree will open the file and put the cursor on the line containing the TODO.
  • markdownlint - Linter for Markdown. Some constructs don't work well in all parsers and should be avoided.
  • Git History - View git log, file history, compare branches or commits
  • GitLens - 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
  • Docker - easy to build, manage and deploy containerized applications. Automatic file creation, Syntax highlighting, hover tips, IntelliSense, Linting, etc
  • Terraform - Syntax highlighting, linting, formatting, and validation for Hashicorp's Terraform
  • Python - Supports versions 2.7, 3.4, including features such as linting, debugging, IntelliSense, code navigation, code formatting, refactoring, unit tests, snippets, and more
  • Jupyter - Data Science with Jupyter on Visual Studio Code
  • C/C++ - IntelliSense, debugging, and code browsing
  • Arduino - easy to develop, build, deploy and debug your Arduino sketches
Good-to-Have
  • Auto Import - Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX
  • npm Intellisense - plugin that autocompletes npm modules in import statements
  • NPM - helps in to manage the package.json file in every imaginable way. It also indicates discrepancies in version control of packages. It also provides for quick run of npm commands with easy shortcuts.
  • Path Autocomplete - Provides path completion for visual studio code
  • Highlight Matching Tag - Highlights matching closing or opening tag
  • CSS Peek - Allow peeking to css ID and class strings as definitions from html files to respective CSS. Allows peek and goto definition.
  • SVG Viewer - SVG Viewer for Visual Studio Code.
  • Javascript Code Snippets - provides javascript code snippets in ES6 syntax while using javascript, Typescript, Javascript React, Typescript React files
  • JavaScript (ES6) code snippets - Code snippets for JavaScript in ES6 syntax
  • React Native Tools - Code-hinting, debugging and integrated commands for React Native
  • REST Client - allows you to send HTTP request and view the response
  • Go - Rich Go language support for Visual Studio Code
  • Java Test Runner - Run and debug JUnit or TestNG test cases
  • Debugger for Java - A lightweight Java debugger
  • XML Tools - XML Formatting, XQuery, and XPath Tools
  • Anaconda Extension Pack - Includes Python and YAML support
  • Indent Rainbow - colorizes indentation in code to make readability easier
Yet to explore
  • IntelliSense for CSS, SCSS class names in HTML, Slim and SCSS
  • IntelliSense for CSS class names in HTML - CSS class name completion for the HTML class attribute based on the definitions found in your workspace.
  • Power Tools
  • Git Graph
  • Atom Keymap
  • Azure Pipelines
  • EditorConfig for VS Code
  • SQL Server (mssql) - Develop Microsoft SQL Server, Azure SQL Database and SQL Data Warehouse everywhere
  • Debugger for Chrome
  • LaTeX Workshop - Boost LaTeX typesetting efficiency with preview, compile, autocomplete, colorize, and more

Downsides

  • No support noticed for GCP yet.

Additional Notes

https://code.visualstudio.com/docs/nodejs/nodejs-tutorial