An Interest In:
Web News this Week
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
December 17, 2021 11:01 am GMT
Original Link: https://dev.to/notmahnoor/kickass-vs-code-extensions-to-make-your-life-easy-27mn
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:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To