Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
December 17, 2021 11:01 am GMT

Kickass VS Code Extensions To Make Your Life Easy

Here is a list of some of the extensions that could be useful for primarily front-end developers who want to get the most out of their VS Code. You might be familiar with a lot of them, or you might be not. Either way, these extensions can drastically improve your workflow and make your IDE more attractive.

For Faster Coding

  • Kite: You just have to press the TAB button to have your code auto-completed, saving you a ton of time. Kite works with almost every language!
  • Live Server: A live reload feature reflected on a local server with whatever it is youre coding.
  • Live SASS Compiler: Compiles your SASS/SCSS file to CSS files in real time all with a live browser reload.
  • blox: helps you access the full code of pre-built UI kit components with just a click.
  • Code Spell Checker: This will tell you when youve mistyped something in your code.
  • stylint: Amazing to clean up your messy CSS.
  • CSS Peek: Manages pull requests and conducts code reviews in your IDE with full source-tree context.
  • Path Intellisense: Automatically suggests paths youre currently working with if you forget the location of your image or you need to fill href and src tags.
  • DotENV: Supports and highlights .env files.

For Easy Reading

  • Beautify: de-minifies and properly spaces your ugly markup.
  • Prettier: Very similar to Beautify, Prettier makes your code pretty and more readable like placing brackets and properly spacing everything automatically.
  • Better Comments: Creates human-friendly comments in your code.
  • Bookmarks: Helps you navigate your code, jumping from one section to the other easily.
  • Log File Highlighter: This gives your VS Code .log file support so the next time youre reading a log dump, you wont go bonkers.
  • MetaGo: Focused on more keyboard usage with fast cursor movements/selections.
  • Material Icon Theme: Adds visual icons for every file youre currently using to help you keep track of all the files.
  • Bracket Pair Colorizer 2: Helps you find where one bracket starts and ends, and helps you understand the structure of a function.
  • Image Preview: Helps you check if youve referenced the correct image/icon by showing a preview on hover and in the gutter.
  • Rainbow Brackets: Highlights the current bracket-set you are in to identify your location easily.

Other Fun Extensions

  • Discord Presence: Displays your discord status as coding so your friends know when its best to not disturb you.
  • Settings Sync: Syncs your settings, themes, snippets, launch, file icons, keybindings, extensions, and workspaces between multiple VS Code instances using a private gist.
  • Polacode: Highlights your code and snaps a clean screenshot with your codes theme colors. Great tutorials and documentation.
  • One Dark Pro: This is for when you dont quite like VS Codes default design theme. You can configure everything as you want itfont size, italics, etc.

A lot of these have been tried and tested by me and my fellow devs, so if you spot the one that's your ideal choice and a choice you cant live without, give a hoot! And if this article helps you find the one for you, please comment and let others know so they could hop on the bandwagon as well!


Original Link: https://dev.to/notmahnoor/kickass-vs-code-extensions-to-make-your-life-easy-27mn

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To