Skip to the content.

VSCode Extensions

Usefull VSCode Extensions

# Alignment
## align chars in selection. It helps creating clean, formatted code.
code --install-extension annsk.alignment

# Auto Rename Tag
## auto rename paired HTML/XML tag.
code --install-extension formulahendry.auto-rename-tag

# Bookmarks ( <kbd>CTRL</kbd> + <kbd>F2</kbd> & <kbd>F2</kbd> )
## it helps you to navigate in your code, moving between important positions easily and quickly.
code --install-extension alefragnani.bookmarks

# C/C++
## C/C++ extension adds language support for C/C++ to Visual Studio Code, including editing (IntelliSense) and debugging features.
code --install-extension ms-vscode.cpptools

# Chronicler
## chronicler is a cross-platform plugin for recording screens (windows) within VS Code. The application relies upon FFmpeg as the base for recording.
code --install-extension arcsine.chronicler

# Code Runner
## run code snippet or code file for multiple languages.
code --install-extension formulahendry.code-runner

# Codeium
## codeium is the modern coding superpower, a free code acceleration toolkit built on cutting edge AI technology. Currently, Codeium provides autocomplete, chat, and search capabilities in 70+ languages, with lightning fast speeds and state-of-the-art suggestion quality.
code --install-extension codeium.codeium

# CodeSnap
## take beautiful screenshots of your code in VS Code!.
code --install-extension adpyke.codesnap

# Console Ninja
## console Ninja is a VS Code extension that displays console.log output and runtime errors directly in your editor from your running browser or node application.
code --install-extension wallabyjs.console-ninja
### Console Ninja VSCode Extension - Coding in Public
### https://www.youtube.com/watch?v=OC-_fcJyz_c

# Draw.io Integration
## unofficial extension integrates Draw.io into VS Code.
code --install-extension hediet.vscode-drawio

# Docker
## makes it easy to build, manage, and deploy containerized applications from Visual Studio Code. It also provides one-click debugging of Node.js, Python, and .NET inside a container.
code --install-extension ms-azuretools.vscode-docker

# DotENV
## enables support for dotenv file syntax
code --install-extension mikestead.dotenv

# EditorConfig for VS Code
##  attempts to override user/workspace settings with settings found in .editorconfig files.
code --install-extension editorconfig.editorconfig

# Error Lens
## improve highlighting of errors, warnings and other language diagnostics.
code --install-extension usernamehw.errorlens

# ESLint
## integrates JavaScript into VSCode.
code --install-extension dbaeumer.vscode-eslint

# GistPad
## a Visual Studio Code extension that allows you to edit GitHub Gists and repositories from the comfort of your favorite editor.
code --install-extension vsls-contrib.gistfs

# Git Graph
## views a Git Graph of your repository, and easily perform Git actions from the graph. Configurable to look the way you want!
code --install-extension mhutchie.git-graph

# Git File History
## quickly browse the history of a file from any git repository
code --install-extension pomber.git-file-history

# Git History
## views git log, file history, compare branches or commits.
code --install-extension donjayamanne.githistory

# Github Pull Requests and Issues
## this extension allows you to review and manage GitHub pull requests and issues in Visual Studio Code.
code --install-extension github.vscode-pull-request-github

# Image preview
## shows image preview in the gutter and on hover.
code --install-extension kisstkondoros.vscode-gutter-preview

# Incrementor
## advanced increment / decrement actions for numbers, enumerators, or just about anything else!
code --install-extension nmsmith89.incrementor

# indent-rainbow
## this extension colorizes the indentation in front of your text, alternating four different colors on each step. Some may find it helpful in writing code for Python, Nim, Yaml, and probably even filetypes that are not indentation dependent.
code --install-extension oderwat.indent-rainbow

# Inline fold
## VSCode Inline Fold extension mimics VSCode's folding experience for inline code.
code --install-extension moalamri.inline-fold

# JavaScript and TypeScript Nightly
## Enables typescript@next to power VS Code's built-in JavaScript and TypeScript support
code --install-extension ms-vscode.vscode-typescript-next

# Jupyter
## jupyter notebook support, interactive programming and computing that supports Intellisense, debugging and more.
code --install-extension ms-toolsai.jupyter
## this extension has the following extensions installed
### Jupyter Cell Tags, which provides support for notebook cell tags in Visual Studio Code for workng with tools like papermill, nbconvert, nbgrader and many more.
### Jupyter Keymap, which provides keymaps for notebooks in Visual Studio Code to match the keybindings in Jupyter Notebook. This extension comes with the Jupyter extension for Visual Studio Code and can be disabled or uninstalled.
### Jupyter Notebook Renderers, which is a Visual Studio Code extension that provides renderers for outputs of Jupyter Notebooks.
### Jupyter Slide Show, which is a jupyter Slide Show support for VSCode.

# JSON Crack
## visualizes your JSON data instantly into graphs.
code --install-extension aykutsarac.jsoncrack-vscode

# json2ts
## converts a JSON from clipboard to TypeScript interfaces. (Ctrl+Alt+V)
code --install-extension gregorbiswanger.json2ts

# LaTeX Workshop
## LaTeX Workshop is an extension for Visual Studio Code, aiming to provide core features for LaTeX typesetting with Visual Studio Code.
code --install-extension james-yu.latex-workshop

# Linter
## extension for code linting, all in one package. New linters can be easily added through an extension framework.
code --install-extension fnando.linter

# Live Server
## automatically reloads webpage when you save the code.
code --install-extension ritwickdey.liveserver

# Live Share
## a real-time collaborative development from the comfort of your favorite tools.
code --install-extension ms-vsliveshare.vsliveshare

# Markdown All in One
## all you need to write Markdown (keyboard shortcuts, table of contents, auto preview and more)
code --install-extension yzhang.markdown-all-in-one

# Markdown Preview Mermaid Support
## adds Mermaid diagram and flowchart support to VS Code's builtin markdown preview
code --install-extension bierner.markdown-mermaid

# markdownlint
## markdown linting and style checking for Visual Studio Code
code --install-extension davidanson.vscode-markdownlint

# Markmap
## visualizes your markdown files as markmap in VSCode
code --install-extension gera2ld.markmap-vscode

# Marp
## this extension creates slide deck written in Marp Markdown on VSCode.
code --install-extension marp-team.marp-vscode

# Material Icon Theme
## this extension enables you to change the color, theme, and etc. of the default folder icon using the command palette or via user settings.
code --install-extension pkief.material-icon-theme

# Material Theme
## manage pull requests and conduct code reviews in your IDE with full source-tree context. Comment on any line, not just the diffs. Use jump-to-definition, your favorite keybindings, and code intelligence with more of your workflow.
code --install-extension equinusocio.vsc-material-theme
## this extension has the following extension installed
### Material Theme Icons, which is the most epic icons theme for Visual Studio Code and Material Theme.

# Multipe cursor case preserve
## Preserves case when editing with multiple cursors.
code --install-extension cardinal90.multi-cursor-case-preserve

# Pandoc Citer
## autocomplete bibtex citations for markdown/pandoc
code --install-extension notzaki.pandocciter

# Path Intellisense
## autocompletes filenames.
code --install-extension christian-kohler.path-intellisense

# Peacock
## subtly change the color of your Visual Studio Code workspace. Ideal when you have multiple VSCode instances, use VS Live Share, or use VSCode's Remote features, and you want to quickly identify your editor.
code --install-extension johnpapa.vscode-peacock

# PHP Debug
## this extension is a debug adapter between VSCode and Xdebug by Derick Rethans. Xdebug is a PHP extension (a .so file on Linux and a .dll on Windows) that needs to be installed on your server.
code --install-extension xdebug.php-debug

# PHP Intelephense
## is a high performance PHP language server packed full of essential features for productive PHP development.
code --install-extension bmewburn.vscode-intelephense-client

# PHP IntelliSense
## it is an advanced autocompletion and refactoring support for PHP.
code --install-extension zobo.php-intellisense

# PHP Snippets
## this extension contains code snippets for PHP and other frameworks to help you to type faster.
code --install-extension vsc-snippets.vsc-php-snippets

# PlatformIO IDE
## your gateway to embedded software development excellence
code --install-extension platformio.platformio-ide

# Prettier-Code formatter
## an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
    **NOTE:** If extension is not working properly, follow [instructions for Prettier](https://bobbyhadz.com/blog/fix-prettier-not-working-in-vs-code).
code --install-extension esbenp.prettier-vscode

# Pretty TypeScript Errors
## make TypeScript errors prettier and more human-readable in VSCode
code --install-extension yoavbls.pretty-ts-errors

# Project Manager
## it helps you to easily access your projects, no matter where they are located. Don't miss those important projects anymore.
code --install-extension alefragnani.project-manager

# Pylance
## an extension that works alongside Python in Visual Studio Code to provide performant language support.
code --install-extension ms-python.vscode-pylance

# Python
## a Visual Studio Code extension with rich support for the Python language including features such as IntelliSense (Pylance), linting, debugging, code navigation, code formatting, refactoring, variable explorer, test explorer, and more!
## the Python extension will automatically install the Pylance and Jupyter extensions to give you the best experience when working with Python files and Jupyter notebooks.
code --install-extension ms-python.python

# Rainbow CSV
## it makes your codes, writings, files, and etc. more readable with making them colorful.
code --install-extension mechatroner.rainbow-csv

# Remote Explorer
## complements the Remote - SSH and Remote Tunnels extensions by enabling the Remote Explorer view that shows a list of remote machines available to connect to.
code --install-extension ms-vscode.remote-explorer

# Tabnine: AI Autocomplete & Chat for Javascript, Python, Typescript, PHP, Go, Java & more
## aI coding assistant with AI code completions and AI code chat right in the IDE, helping developers by generating code, writing unit tests and documentation, explaining legacy code, and much more. Tabnine supports all major languages including JavaScript, Python, Java, Typescript c/c++ and more.
code --install-extension tabnine.tabnine-vscode

# tldraw
## lets you use tldraw inside of VS Code, using offline .tldr files.
code --install-extension tldraw-org.tldraw-vscode

# TODO Highlight
## highlight TODO, FIXME and other annotations within your code.Sometimes you forget to review the TODOs you've added while coding before you publish the code to production. So I've been wanting an extension for a long time that highlights them and reminds me that there are notes or things not done yet. Hope this extension helps you as well.
code --install-extension wayou.vscode-todo-highlight

# Todo Tree
## this extension quickly searches (using ripgrep) your workspace for comment tags like TODO and FIXME, and displays them in a tree view in the activity bar. The view can be dragged out of the activity bar into the explorer pane (or anywhere else you would prefer it to be).
code --install-extension gruntfuggly.todo-tree

# Quarto
## extension for the Quarto scientific and technical publishing system.
code --install-extension quarto.quarto

# Quasar Docs
## the Quasar Docs - integrated in VSCode!
code --install-extension codecoaching.quasar-docs

# vscode-pdf
## helps you to display pdf in VSCode.
code --install-extension tomoki1207.pdf

# vscode-reveal
## this extension lets you to display a reveal.js presentation directly from an opened markdown document.
code --install-extension evilz.vscode-reveal

# Vue Language Features (Volar)
## a language support extension built for Vue, Vitepress and petite-vue. This is based on @vue/reactivity to calculate everything on-demand, to implement native TypeScript language service level performance.
code --install-extension vue.volar

# Vue VSCode Snippets
## snippets that will supercharge your Vue workflow.
code --install-extension sdras.vue-vscode-snippets

# WakaTime
## an open source VSCode plugin for metrics, insights, and time tracking automatically generated from your programming activity.
code --install-extension wakatime.vscode-wakatime

Content of projects.json File for Project Manager

[
  {
    "name": "full-stack-roadmap",
    "rootPath": "~/source/full-stack-roadmap",
    "paths": [],
    "tags": [],
    "enabled": true
  }
]