Getting started with Visual Studio Code and/or looking for some new plugins to fit seamlessly with your workflow? Well, look no further! Below, I have included some of the most useful and recommended extensions that are completely free to install and use.
- Current theme:
- Icons:
- Font:
- Auto Close Tag
- Automatically add HTML/XML close tag
- Auto Rename Tag
- Automatically rename paired HTML/XML tag
- Foam Research
- note-taking tool that lives within VS Code, which means you can pair it with your favorite extensions for a great editing experience.
- Better Comments
- Comments extension will help you create more human-friendly comments in your code.
- CodeSwing
- It's like having the magic of a traditional web playground (e.g. CodePen, JSFiddle), but available directly from your highly-personalized editor.
- Code Runner
- Run code snippet or code file for multiple languages: C, C++, Java, JavaScript, PHP, Python, Perl, e.c.t.
- advanced-new-file
- Create files anywhere in your workspace from the keyboard
- Error Lens
- Error Lens turbo-charges language diagnostic features
- ESDoc MDN
- This extension lets you quickly bring up helpful MDN documentation in the editor by typing
//mdn [object.property];
for example.
- This extension lets you quickly bring up helpful MDN documentation in the editor by typing
- Live Preview
- Hosts a local server in your workspace for you to preview your webpages on in VSC!
- HTML CSS Support
- HTML
id
andclass
attribute completion for Visual Studio Code.
- HTML
- JavaScript (ES6) code snippets
- Code snippets for JavaScript in ES6 syntax (ex: clg + tab -> console.log())
- Todo Tree
- Show TODO, FIXME, etc. comment tags in a tree view
- Magick Image Reader
- Uses ImageMagick to add read-only views of over 100 image formats in Visual Studio Code.
- Gist
- Access your GitHub Gists within Visual Studio Code.
- GistPad
- GistPad is a Visual Studio Code extension that allows you to edit GitHub Gists and repositories from the comfort of your favorite editor
- Git History
- View git log, file history, compare branches or commits
- gitignore
- Lets you pull .gitignore templates from https://github.com/github/gitignore
- GitLens
- Supercharge Git within VS Code
- Open in GitHub, Bitbucket, Gitlab, VisualStudio.com
- Open in GitHub, Bitbucket, Gitlab, VisualStudio.com
- ESLint
- Integrates ESLint JS
- Prettier
- Automatically format javascript, JSON, CSS, Sass, and HTML files.
- Color Highlight
- This extension styles css/web colors found in your document.
- Import Cost
- Display inline the size of the required/imported package
- VS Live Share
- Collaborative editing, debugging, and more inside VS Code
- npm Intellisense
- Autocompletes npm modules in import/require statements
- Path Intellisense
- Autocompletes filenames
- Image Preview
- Shows image preview in the gutter and on hover
- FontSize ShortCuts
- Change the font size with keyboard shortcuts.
- WakaTime
- Metrics, insights, and time tracking automatically generated from your programming activity.
- indent-rainbow
- Makes indentation easier to read
- Discord Rich Presence
- Show what you're working on in Discord!
- Lorem ipsum
- A tiny VS Code extension made up of a few commands that generate and insert lorem ipsum text into a text file.
- vscode-faker
- Generate fake data for name, address, lorem ipsum, commerce and much more
See my full list of extensions here