Make VSCode Home With These Extensions

This content originally appeared on DEV Community and was authored by Braingoop

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.

Theme/Icons

• Current theme:
  • GitHub Dark Mode ♥️
• Icons:
  • Material Icon Theme
• Font:
  • Fira Code

Workflow

• 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.
• Live Preview
  • Hosts a local server in your workspace for you to preview your webpages on in VSC!
• HTML CSS Support
  • HTML id and class attribute completion for Visual Studio Code.

GitHub

• 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

Style/Formatting

• 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.

Useful/Extra

• 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

See my full list of extensions here

This content originally appeared on DEV Community and was authored by Braingoop

Print Share Comment Cite Upload Translate Updates

APA

Braingoop | Sciencx (2022-06-23T07:52:05+00:00) Make VSCode Home With These Extensions. Retrieved from https://www.scien.cx/2022/06/23/make-vscode-home-with-these-extensions/

MLA

" » Make VSCode Home With These Extensions." Braingoop | Sciencx - Thursday June 23, 2022, https://www.scien.cx/2022/06/23/make-vscode-home-with-these-extensions/

HARVARD

Braingoop | Sciencx Thursday June 23, 2022 » Make VSCode Home With These Extensions., viewed ,<https://www.scien.cx/2022/06/23/make-vscode-home-with-these-extensions/>

VANCOUVER

Braingoop | Sciencx - » Make VSCode Home With These Extensions. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/06/23/make-vscode-home-with-these-extensions/

CHICAGO

" » Make VSCode Home With These Extensions." Braingoop | Sciencx - Accessed . https://www.scien.cx/2022/06/23/make-vscode-home-with-these-extensions/

IEEE

" » Make VSCode Home With These Extensions." Braingoop | Sciencx [Online]. Available: https://www.scien.cx/2022/06/23/make-vscode-home-with-these-extensions/. [Accessed: ]

rf:citation

» Make VSCode Home With These Extensions | Braingoop | Sciencx | https://www.scien.cx/2022/06/23/make-vscode-home-with-these-extensions/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.