Douiri

Best 15 VSCode Extensions for better coding experience

written by idriss douiri profile picture Idriss Douiri

3 min read

15 vs code extensions article poster

Visual Studio Code (VS Code) is a powerful code editor that gained popularity among developers worldwide. Giving you the flexibility to enhance your coding experience with a variety of extensions. In this article, we will dive into some of the top VS Code extensions that can take your productivity to the next level.

1. Live Server

LiveServer screenshot

Live Server allows you to start your project on a local server directly on your browser and automatically refresh the browser on every change, saving you time and effort. Great for web developers.

2. Material Icon Theme

material-icon-theme screenshot

Material Icon Theme replaces your default file and folder icons with good-looking Material Design Icons, Making navigating your project easier.

3. Prettier

prettier-vscode screenshot

Saving you from manual formatting, Prettier will automatically format your code to ensure consistency and readability across your projects. Set it as your default code formatter and allow formatting on save from the settings to format your code each time you save.

4. CodeSnap

codesnap screenshot

Take beautiful screenshots of your code with your current theme from VS Code with the CodeSnap extension. Share your code in a visually appealing way, making it easier for others to understand and follow your code.

5. TODO Highlight

vscode-todo-highlight screenshot

TODO Highlight extension highlights comments with specific keywords like TODO, FIXME, or any custom keyword. It makes your comments attractive and helps you finish your pending tasks.

6. Tabnine

tabnine-vscode screenshot

Tabnine is an AI assistant that analyzes your codebase and suggests relevant code completion as you type, boosting your productivity and saving you time.

7. Import Cost

vscode-import-cost screenshot

Import Cost will display the size of the imported package inline with your import statement, supporting both javascript and typescript. This helps you decide whether the dependency is good for you or not.

8. Quokka.js

quokka-vscode screenshot

Quokka.js extension will display an inline report for errors, warnings, and console logs directly next to your code as you type without running the file. Giving you instant feedback and boosting your productivity.

9. vscode-faker

vscode-faker screenshot

Save your time and let vscode-faker generate realistic fake data for your project, Offering you random names, addresses, and more.

10. Remote - SSH

remote-ssh screenshot

Work on a remote server from within VS Code with the Remote - SSH extension, and take advantage of the resources of a remote environment.

11. Path Intellisense

path-intellisense screenshot

Path Intellisense suggests files and folder paths as you type, saving you time and reducing the chance of making a typo.

12. Thunder Client

vscode-thunder-client screenshot

You can test and debug your REST APIs right into your editor with Thunder Client, a lightweight and easy-to-use REST client. With its Graphical User Interface, you can send requests and save your favorite ones for future use.

13. Code Runner

code-runner screenshot

Supporting multiple programming languages, Code Runner lets you run files or snippets of selected codes of various languages in VS Code.

14. Code Spell Checker

code-spell-checker screenshot

No more misspellings with Code Spell Checker. Name your variables safely and improve the readability of your code.

15. Template String Converter

template-string-converter screenshot

Template String Converter extension will convert your regular string into a template string automatically when ${ is been typed.

Conclusion

These are just some extensions I use in Visual Studio Code. Each extension brings its features enabling you to expand and customize your environment as needed for a better coding experience.