VSCode Extensions You Should Have
Tags: vscode, extensions, jannatinnaim
Published: 2022-07-15 22:43:40

Extensions are a key component of VSCode. They can add so much functionality to this seemingly simple code editor. Here's an exhaustive list of extension that I use in my day to day workflow in VSCode.

- Python
  [Download](https://marketplace.visualstudio.com/items?itemName=ms-python.python)

  Get Python language support with linting, debugging, running tests and lots more.

- Prettier - Code Formatter
  [Download](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

  Format your JavaScript code according to an opinionated standard or your own.

- ESLint
  [Download](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

  Lint your code to follow a certain code style.

- IntelliCode
  [Download](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode)

  Get intelligent suggestions (not just word auto completion) based on your code.

- GitLens
  [Download](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

  Interact with git from VSCode through a powerful UI.

- Code Run
  [Download](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner)

  Run any script you want.

- Material Icon Theme
  [Download](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)

  Good looking icon theme.

- Live Share
  [Download](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)

  Collaborate with multiple people on the same file.

- Path Intellisense
  [Download](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)

  Autocomplete paths in your files.

- GitHub Pull Requests and Issues
  [Download](https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github)

  Manage GitHub issues and pull requests directly from VSCode.

- One Dark Pro
  [Download](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme)

  Best color scheme ever made. (#controversial)

- ES7+ React/Redux/React-Native snippets
  [Download](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)

  Useful snippets if you're using React.

- EditorConfig
  [Download](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)

  Standardized editor configuration.

- Code Spell Checker
  [Download](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)

  Never make a spelling mistake ever again.

- markdownlint
  [Download](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint)

  Lint markdown files to follow a certain standard.

- Better Comments
  [Download](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)

  Colorful comments to easily navigate around important parts of the code.

- CSS Peek
  [Download](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek)

  Go to definition for CSS.

- Git Graph
  [Download](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)

  Git log... but cooler.

- DotEnv
  [Download](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv)

  Highlight dotenv files.

- Quokka.js
  [Download](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode)

  Prototype your JavaScript code.

- Peackcock
  [Download](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock)

  Distinguish between multiple VSCode instances.

- gitignore
  [Download](https://marketplace.visualstudio.com/items?itemName=codezombiech.gitignore)

  Generate gitignore template.

- Version Lens
  [Download](https://marketplace.visualstudio.com/items?itemName=pflannery.vscode-versionlens)

  Manage package versions.

- Image Preview
  [Download](https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview)

  Preview images in the gutter for quick reference.

- Error Lens
  [Download](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens)

  Why have tiny squiggly lines when you can have **chungus** line highlights.

- SCSS IntelliSense
  [Download](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss)

  Autocompletion for SCSS.

- Microsoft Edge Tools for VS Code
  [Download](https://marketplace.visualstudio.com/items?itemName=ms-edgedevtools.vscode-edge-devtools)

  Suggest best practices for web development and integrate with Microsoft Edge browser.

- Formatting Toggle
  [Download](https://marketplace.visualstudio.com/items?itemName=tombonnike.vscode-status-bar-format-toggle)

  Toggle formatting files.

- GitHub Repositories
  [Download](https://marketplace.visualstudio.com/items?itemName=GitHub.remotehub)

  Browse remote GitHub repositories without cloning them.

- GitHub Markdown Preview
  [Download](https://marketplace.visualstudio.com/items?itemName=bierner.github-markdown-preview)

  Have the same markdown previewer as GitHub.

- WakaTime
  [Download](https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime)

  Track your coding time.

- Sort Lines
  [Download](https://marketplace.visualstudio.com/items?itemName=Tyriar.sort-lines)

  Sort lines by any order.

- Live Preview
  [Download](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server)

  Preview your HTML files inside VSCode.

- Code Snap
  [Download](https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap)

  Take cool screenshots of your code to share around.

- Lorem ipsum
  [Download](https://marketplace.visualstudio.com/items?itemName=Tyriar.lorem-ipsum)

  Generate random lorem ipsum text for any file.

- Colorize
  [Download](https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize)

  Highlight CSS colors.

- Fluent Icons
  [Download](https://marketplace.visualstudio.com/items?itemName=miguelsolorio.fluent-icons)

  Cleaner app icons.

- :emojisense:
  [Download](https://marketplace.visualstudio.com/items?itemName=bierner.emojisense)

  Autocompletion for markdown emojis.

- Relative Path
  [Download](https://marketplace.visualstudio.com/items?itemName=jakob101.RelativePath)

  Get relative path to any file in the project.

- .ENV Switcher
  [Download](https://marketplace.visualstudio.com/items?itemName=EcksDy.env-switcher)

  Switch between .env files.

- audio-preview
  [Download](https://marketplace.visualstudio.com/items?itemName=sukumo28.wav-preview)

  Preview audio files.

- Choose A License
  [Download](https://marketplace.visualstudio.com/items?itemName=ultram4rine.vscode-choosealicense)

  Generate a license file.

- Discord Rich Presence
  [Download](https://marketplace.visualstudio.com/items?itemName=LeonardSSH.vscord)

  Show off to your friends what you're working on.

- Draw.io Integration
  [Download](https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio)

  View draw.io files inside VSCode.

- Gif Player
  [Download](https://marketplace.visualstudio.com/items?itemName=bierner.gif-player)

  Preview GIF files.

- Numbered Bookmarks
  [Download](https://marketplace.visualstudio.com/items?itemName=alefragnani.numbered-bookmarks)

  Put bookmarks throughout your code.

- SCSS Everywhere
  [Download](https://marketplace.visualstudio.com/items?itemName=gencer.html-slim-scss-css-class-completion)

  Autocompletion for CSS classes.

- Thunder Client
  [Download](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client)

  Make API requests from VSCode.

- Todo Tree
  [Download](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree)

  All your TODOs in one place.

- vscode-spotify
  [Download](https://marketplace.visualstudio.com/items?itemName=shyykoserhiy.vscode-spotify)

  Control Spotify from VSCode.

PS: If you speak Bangla you can also check out this [YouTube video](https://youtu.be/J1_rYxfUxPI) showcasing these settings.