vs-code-extensions.md

VS Code extensions

Below is a list of extensions I use.

Utility

• Vim - Vim emulation.
• Prettier - Format your JavaScript / TypeScript / CSS using Prettier.
• Prisma - Adds syntax highlighting, formatting, auto-completion, jump-to-definition and linting for .prisma files.
• Dendron - Hierarchal note taking tool that grows as you do.
• Live Share - Real-time collaborative development from the comfort of your favorite tools.
• CodeStream - Developer collaboration.
• Liquid - Liquid language support for VS Code. (Code)

Go

• Go - Rich language support for the Go language. (Code)

JS/TS

• Version Lens - Shows the latest version for each package using code lens.
• GraphQL - Tightly integrate with the GraphQL Ecosystem. (Code)

Python

• Python - Rich support for the Python language.
• Pylance - Performant, feature-rich language server for Python. (Code)
• Jupyter - Jupyter notebook support.

Git

• GitLens - Visualize code authorship at a glance via Git blame annotations and code lens.

HTML

• Highlight Matching Tag - Highlights matching closing or opening tag. (Code)

CSS

• Tailwind CSS IntelliSense (Code)

Theme

• GitHub Theme (Code)

Interesting (not using)

Utility

• ModalEdit - Configurable Modal Editing in VS Code.
• Postcode - API client to test and create HTTP/s requests. (Code)
• Remote Repositories - Remotely browse and edit a GitHub repository. (Article)
• Error Lens - Improve highlighting of errors, warnings and other language diagnostics. (Code)
• Captain Stack - Code suggestion for VSCode. Similar to Github Copilot.
• Dance - Kakoune-inspired key bindings for VSCode. (Code)
• Thinking in Data - VS Code extension pack to help users visualize, understand, and interact with data. (Code)
• Live Frame - Run your web app inside VS Code. (Code)
• Excalidraw integration - Create and edit excalidraw compatible files in vscode directly. (Code)
• CodeSwing - Interactive coding environment for building web applications (aka swings). (Code)
• Tabnine - Autocomplete AI. (Code)
• Adobe XD - Design systems in VS Code.
• Docs View - Display documentation in the sidebar or panel. (Code)
• MetaGo - Provides fast cursor movement/selection for keyboard focused users in vscode.
• Code Runner - Run code snippet or code file for multiple languages.
• Remote Development - Allows you to open any folder in a container, on a remote machine.
• File Utils - Convenient way of creating, duplicating, moving, renaming and deleting files and directories.
• Real-Time Debugging (Code)
• GitHub Issue Notebooks (Code)
• HexEditor - Allows Hex Editing inside VS Code. (Code)
• Terminal Command Keys - Assign a terminal command to a keybinding. (Code)
• Code Tour - Allows you to record and playback guided tours of codebases, directly within the editor. (Code)
• Draw.io Integration (Code) (HN)
• CMake Tools - Extended CMake support. (Code)
• VSCode Essentials - Turn VSCode into a supercharged IDE. (Code)
• Duplicate action - Ability to duplicate files in VS Code. (Code)
• WakaTime - Automatic time tracking and metrics generated from your programming activity.
• Customize UI - Advanced VSCode user interface customizations. (Code)
• Task Manager - Manages tasks in Visual Studio Code in a custom activity view.
• CodeSandbox - Bring CodeSandbox into your favorite editor.
• Rewrap - Re-wraps comments and other text to a given line length.
• GistPad - Browse, edit and fork GitHub Gists, directly within Visual Studio Code.
• Better Comments - Improve your code commenting by annotating with alert, informational, TODOs, and more.
• Control Snippets - Disable or enable VS Code's built-in snippets and manually installed snippets from extensions.
• Syncing - Synchronize all of your VSCode settings across multiple devices.
• Dash - Dash documentation integration.
• Phi - Design components for web in VSCode. Generate code.
• RelativePath - Get relative URL paths from files in the current workspace.
• Debug Visualizer - Visualizes values while debugging. (Code) (Article)
• Path Intellisense - Autocomplete filenames.
• REST Client Extension - Allows you to send HTTP request and view the response in VS Code directly.
• Hero Icons (Code)
• Browser Preview - Real browser preview inside your editor that you can debug.
• Bump - Bump your project's version and update the changelog. Opinionated but configurable.
• Polacode - Polaroid for your code.
• Advanced New File - Create new files quickly.
• Calculate - Evaluate math expressions.
• Material Icon Theme - Material Design Icons.
• Code Outline - Display code outline tree in the explorer pane.
• Empty indent - Remove indent of empty lines on save.
• Endwise - Wisely add "end" in Ruby.
• NPM scripts - Run npm-scripts and validate package.json files.
• Shell - Execute shell commands from VS Code.
• SVG Viewer
• FTP Simple - Simple FTP/SFTP.
• Regex Previewer - Shows the current regular expression's matches in a side-by-side document.
• Import cost - Displays the import size of the package you are importing inside the code editor.
• Custom CSS and JS Loader
• Indent Rainbow - Makes indentation easier to read.
• Change case - Quickly change the case (camelCase, CONSTANT_CASE, snake_case, etc) of the current selection or current word.
• Terminal tabs - Adds tabs for each terminal process to the status bar.
• File Icons - File specific icons for improved visual grepping.
• TODO Highlight - Highlight TODO, FIXME and other annotations within your code.
• EditorConfig - EditorConfig Support.
• Sort Lines - Sorts lines of text.
• map-replace.js - Replace multi-selection text with custom JavaScript function.
• Unique Lines - Keep unique lines of text and remove duplicates from current selection.
• Custom CSS and JS Loader
• gitignore - Language support for .gitignore files.
• vscode-cli - Execute vscode command from vscode command prompt.
• Graphviz Preview - Preview Graphviz (DOT) files.
• Twitch Highlighter - Twitch Line Highlighter.
• Clever VS Code - Add many productivity useful commands to vscode.
• Apollo GraphQL - Rich editor support for GraphQL client and server development that seamlessly integrates with the Apollo platform.
• Bookmarks - Mark lines in the editor and easily jump to them. (Code)
• TODO+ - Manage todo lists with ease. Powerful, easy to use and customizable.
• VS Code Neovim Integration
• Snipsnap - Ultimate snippets collection for VS Code.
• VSpaceCode - Spacemacs' like keybindings. (Code)
• YAML - YAML Language Support, with built-in Kubernetes syntax support. (Code)
• Wardley Maps - Display and edit Wardley Maps. (Code) (Tweet)
• VSCode Icons (Code)
• Stripe (Web) (Tweet) (Code)
• VSCode Spell Checker
• Grammarly - Grammar checking. (Code)
• Footsteps - Keep your place when jumping between a different parts of your code. (Code)
• RayThis - Generate pretty code snippets right out of VSCode. (Code)
• Checkov - Static code analysis tool for infrastrucutre-as-code. (Code)
• Browse Lite - Embedded browser in VS Code. (Code)
• i18n Ally - All in one i18n extension for VSCode. (Code)
• Database Client - Supports databases MySQL/MariaDB, Microsoft SQL Server, PostgreSQL, SQLite, MongoDB, Redis, and ElasticSearch.

Shell

• ShellCheck - ShellCheck linter for VSCode.

React

• SVGR - SVG to React - Converting SVG's to an optimized JSX file, works for both ReactJS & React Native.

GraphQL

• GraphQuill - Performs GraphQL API endpoint testing within the VS Code environment.

Lisp

• Parinfer - Simplify the way you write Lisp.

Python

• Neuron - Interactive Programming Experience for Data Scientists. (Code)
• VSCode Python Docstring Generator - Quickly generate docstrings for python functions.
• TypeScript Notebooks - TypeScript with Jupyter Notebooks. (Code)
• Python Dependencies - Utilities for managing Python dependencies. (Code)

Git

• History in Sublime Merge - Open files in Sublime Merge.
• GitHub Pull Requests - Review and manage your GitHub pull requests directly in VS Code.
• GitHub - Integrates GitHub and its workflows into VSCode.
• Git History - Git History, Search and More.
• Open in GitHub - Jump to a source code line in GitHub, Bitbucket, GitLab.
• edamagit - Magit for VSCode, inspired by the awesome original Magit. (Code) (Intro Guide)
• Git Graph - View a Git Graph of your repository, and perform Git actions from the graph. (Code)

JS/TS

• ESLint - Integrates ESLint into VS Code.
• React Native - Debugging and integrated commands for React Native. (Code)
• ast-query - Search and highlight JavaScript and TypeScript via Abstract Syntax Tree queries. (Code)
• Deoptigate - Visualize deoptimizations in your JavaScript and TypeScript code running in V8 (i.e. NodeJS, Chrome, etc.).
• Search node_modules - Quickly search the node_modules folder.
• TSLint - Supports TSLint.
• Debugger for Chrome - Debug your JavaScript code running in Google Chrome from VS Code.
• JavaScript Snippet Pack
• Yarn - Manage yarn commands.
• Quokka - Live Scratchpad for JavaScript.
• NPM Intellisense - Autocomplete npm modules in import statements.
• js-debug - Upcoming VS Code JavaScript debugger.
• VS Code Folder Source Actions - Adds a context menu that allows you to apply VS Code's organize imports code action to all files in a folder.
• Flow - Flow support.
• Abracadabra - Automated refactorings for VS Code (JS & TS). (Code)
• Vite - VS Code for Vite. (Code)
• Typehole - Automatically generate TypeScript types and interfaces for all serializable runtime values. (Code)

React

• Glean - Extension provides refactoring tools for your React codebase.

Svelte

• Svelte (Code)

Java

• Java Extension Pack (Code)

R

• R - Support for R language(run,snippet, lint,R documentation,R Markdown).

CSS

• Stylelint - Lint CSS/SCSS/Less with Stylelint.
• Color Info - Provides quick information CSS colors.
• Twind Intellisense - VSCode extension for twind.

ReasonML

• Reason Language Server - IDE & Syntax support for Reason/OCaml.
• OCaml and Reason IDE - OCaml and Reason language support.

Markdown

• Markdown Preview GitHub Styling - Changes VS Code's built-in markdown preview to match GitHub's style.
• Markdown - Keyboard shortcuts, table of contents, auto preview and more.
• Markdown Notes (Code)
• Zeta Note - Integrates Zeta Note language server into VSCode for delightful note taking experience.

HTML

• Auto Rename Tag - Automatically rename paired HTML/XML tag.

Haskell

• Simple Haskell support using only GHCi
• Haskell Language Server Client - Client interface to the Language Server Protocol server for Haskell, as provided by the Haskell IDE Engine.
• Haskell Language - Adds highlighting support for Haskell.

Clojure

• Calva - Integrated REPL, linting, inline eval and more for VSCode. Powered by Cider & nRepl.

Ruby

• Ruby - Provides Ruby language and debugging support.

Rust

• Rust Analyzer - Experimental Rust compiler front-end for IDEs.
• Rust - Adds language support for Rust.
• Crates - Helps Rust developers managing dependencies with Cargo.toml. Only works with dependencies from crates.io.
• CodeLLDB - Native debugger based on LLDB.

Lua

• Lua - Provides Intellisense and Linting for Lua.
• VSCode Lua Format

Elm

• Elm - Improving your Elm experience since 2019.

Elixir

• ElixirLS - Elixir support and debugger.

Julia

• Julia - Julia Language Support. (Code) (Web) (Docs) (Docs Code)

Deno

• Deno - Adds Deno support for VS Code using the TypeScript Deno language service plugin.

Vue

• Vetur - Vue tooling for VS Code. (Code)
• Vue VSCode Snippets (Code)

Bash

• Bash IDE - Language server for Bash.

Deno

• Deno - Adds Deno support for VS Code using the TypeScript Deno language service plugin.

LaTeX

• TexLab - Provides rich editing support for the LaTeX typesetting system powered by the TexLab language server. (Code)
• LaTeX Workshop - Provide all-in-one features and utilities for LaTeX typesetting.

Lean

• Lean for VS Code - Adds support for Lean.
• Lean 4 VSCode - Provides VSCode editor support for the Lean 4 programming language.

Coq

• VSCoq (Code)

TLA

• TLA+ language support

OCaml

• vscode-ocaml-platform

SQL

• SQLite - VSCode extension to explore and query SQLite databases.

Nix

• Nix IDE - Nix language support with formatting and error report. (Code)
• Nix language support
• Nix Environment Selector - Allows you switch environment for Visual Studio Code and extensions based on .nix config files.

Nim

• Nim - Provides support for the Nim language.

Flutter

• Flutter (Code)
• Dart (Code)

Erlang

• Erlang - Uses Erlang LSP.

AppleScript

• AppleScript - Language syntax, snippets and build system for AppleScript and JavaScript for Automation.

Racket

• Magic Racket - Top notch syntax highlighting for Racket.

C/C++

• CPP tools - C/C++ IntelliSense, debugging, and code browsing.

Swift

• Swift Development Environment (Code)

Deploy

• Kubernetes - Develop, deploy and debug Kubernetes applications.
• Docker - Easily build and deploy containerized applications from VS Code.

Protocol buffers

• Protobuf 3 support

TOML

• Better TOML

Agda

• Agda Mode (Code)

Idris

• Idris VSCode - Idris front-end for VS Code.

Zig

• VSCode Zig

Fun

• VSinder - Dating app for programmers where you swipe on code. (Tweet) (API)

Theme

• Poimandres - Minimal, frameless dark theme. (Code)
• Night Owl (Code) (Web)
• Horizon - Beautifully warm dual theme. (Code)
• Overnight
• Monochrome - Monochromatic theme collection, for those who seeks. (Code)
• Monokai Night
• Overnight - Soft vibrant VSCode theme.
• Subliminal
• Alabaster
• Monokai Pro
• Dracula Pro
• Moxer (Code)

Notes

• In Go plugin ife snippet will create an error catching block.

Links

• VS Code API
• Extensibility Reference
• Awesome VS Code
• Why I wrote 33 VSCode extensions and how I manage them
• vsce - VS Code Extension Manager.
• Lobsters: What's your VS Code setup like? (2019)
• vscode-private-extension
• Hot Reload for VS Code Extension Development (2029)
• VS Code Extension Samples
• VSCodeVim Tips (2020)
• How to Code a VSCode Extension (2020)
• Open VSX Registry - Open-source registry for VS Code extensions. (Code)
• VS Code Theme Editor - Create VS Code Themes Easily. (HN)
• VSColors
• vscode-chrome-debug-core - Library for building VS Code debug adapters for targets that support the Chrome Debugging Protocol.