# VSCode Extensions for Front End Development

# 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

# 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

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

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

# 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

# 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

# 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

# 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

# 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

# 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

# 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

# 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

# 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

# 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

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

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