14 Best Visual Studio Code Extensions for Web Developers ⚙️
🧵👇🏻
1. Live Server
→ Live Server launches a local development server with a live reload feature both for static and dynamic pages.
→ Every time you save your code, you'll instantly see the changes reflected in the browser.
🖇️ marketplace.visualstudio.com/items?itemName…
2. Auto Rename Tag
→ With Auto Rename Tag, you just need to rename either the opening or closing tag, and the other will be renamed automatically. Simple, but effective!
🖇️ marketplace.visualstudio.com/items?itemName…
3. Better Comments
→ This extension color codes various types of comments to give them different significance and stand out from the rest of your code.
→There are also color codes for questions, alerts & highlights. You can also add your own.
🖇️ marketplace.visualstudio.com/items?itemName…
4. Prettier - Code formatter
→ Prettier formats your files on a save once you configure it in your settings.
→ Instead of spending hours a day making your code look clean, use Prettier.
🖇️ marketplace.visualstudio.com/items?itemName…
5. GitLens
→ Git lens, git with superpowers. This extension is the best one for git and GitHub.
→ Know who contributed each line, seamlessly navigate and explore git repositories, and perform powerful comparisons, and so much more.
🖇️ marketplace.visualstudio.com/items?itemName…
6. Thunder Client
→ Thunder Client is Rest API Client Extension for Visual Studio Code, with a simple and clean design.
→ The extension makes API testing very easy with Scriptless GUI-based testing.
🖇️ marketplace.visualstudio.com/items?itemName…
7. Browse Lite
→ Embedded browser in VS Code.
🖇️ marketplace.visualstudio.com/items?itemName…
8. ES7 React/Redux/React-Native/JS snippets
→ This extension provides you JavaScript and React/Redux snippets in ES7 with Babel plugin features for VS Code.
🖇️ marketplace.visualstudio.com/items?itemName…
9. Color Highlight
→ This extension styles CSS/Web colors found in your document.
🖇️ marketplace.visualstudio.com/items?itemName…
10. Import Cost
→ This extension will display inline in the editor the size of the imported package.
🖇️ marketplace.visualstudio.com/items?itemName…
11. Quokka.js
→ Quokka.js is a developer productivity tool for rapid JavaScript / TypeScript prototyping.
→ Runtime values are updated and displayed in your IDE next to your code, as you type.
🖇️ marketplace.visualstudio.com/items?itemName…
12. Tailwind CSS IntelliSense
→ It provides VSCode users with advanced features such as autocomplete, syntax highlighting, and lining.
🖇️ marketplace.visualstudio.com/items?itemName…
13. Headwind
→ This extension sorts classes automatically for you based on a preferred sorting order.
🖇️ marketplace.visualstudio.com/items?itemName…
14. Code Spell Checker
→ A basic spell checker that works well with camelCase code. The goal of this spell checker is to help catch common spelling errors while keeping the number of false positives low.
🖇️ marketplace.visualstudio.com/items?itemName…
That's all guys!
If you liked this thread:
1. Follow @manvi_mandar for more content like this.
2. Retweet the first tweet and help others discover it.
Thank you💙
Share this Scrolly Tale with your friends.
A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.