Skip to main content

VS Code Extensions

VS Code extensions are add-ons that enhance the functionality of Visual Studio Code. Extensions can provide language support, linters, debuggers, themes, utilities, and much more. The VS Code Marketplace offers thousands of extensions for every workflow.

🌟 Why Use Extensions?​

  • Add support for new programming languages and frameworks.
  • Improve code quality with linters and formatters.
  • Integrate with version control systems like Git and GitHub.
  • Customize the editor’s appearance and behavior.
  • Boost productivity with utilities and shortcuts.

🛠️ How to Install Extensions​

  1. Open the Extensions panel:
    • Ctrl+Shift+X (Windows/Linux)
    • Cmd+Shift+X (macOS)
  2. Search for the extension name.
  3. Click Install.

Or install from the command line:

code --install-extension <extension-identifier>
# Example:
code --install-extension ms-python.python

📦 Recommended Extensions​

Utility​

  • Vim — Vim emulation for modal editing.
  • File Icons — File-specific icons for improved navigation.
  • Prettier — Code formatter for JavaScript, TypeScript, CSS, and more.
  • Code Runner — Run code snippets or files in multiple languages.
  • Remote Development — Work with remote containers, SSH, or WSL.
  • TODO Highlight — Highlight TODO, FIXME, and other annotations.
  • TODO+ — Manage and track TODO lists in your code.

Python​

  • Python — Rich support for Python language, linting, debugging, and Jupyter notebooks.

Git​

HTML​

TOML​

CSS​

  • Stylelint — Lint CSS/SCSS/Less with Stylelint.

Markdown​

Ruby​

  • Ruby — Ruby language and debugging support.

Bash​

🧑‍💻 Example: Using Prettier​

  1. Install the Prettier extension.
  2. Open a JavaScript, TypeScript, or CSS file.
  3. Format the file:
    • Right-click and select Format Document
    • Or use the shortcut: Shift+Alt+F

📚 Useful Links​

📝 Notes​

  • Disable or uninstall unused extensions to keep VS Code fast.
  • Many extensions have customizable settings in the Settings UI or settings.json.
  • Extensions can be updated automatically or manually from the Extensions panel.