7 Essential VS Code Extensions for Full-Stack JavaScript Developers
In this article, I will discuss about 7 essential VS code extensions that I used as a Full-Stack JavaScript developer which made my life easier.😎
1. Git graph —
If you are using the Git version control system and the remote repository is hosted on any service provider suh as Github, Bitbucket, GitLab or CodeCommit, then this extension will help you visualize the Git graph of the remote repository and easily perform Git actions from the graph. You can also configure it accordingto your preferences.
Extension — mhutchie.git-graph (https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)
2. Prettier —
Prettier is a code formatter that helps you to write the clean code. It enforces consistent style by parsing your code. Prettier works with JavaScript, HTML, CSS, GraphQL, Markdown & YAML files. It can also be configured to project and customize the rules by adding .prettierrc file to repo.
Extension — esbenp.prettier-vscode (https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
3. Code Spell Checker —
If you’re fed up with spelling mistakes and case-sensitive variable declarations, then this extension is for you. The goal of this spell checker is to help catch common spelling errors while keeping the number of false positives low.
Extension —streetsidesoftware.code-spell-checker
(https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
4. Git Lens —
This tool is handy for finding the history and author responsible for code changes in the repository. GitLens has deep level of integration, versatility, and ease of use. It sits directly within your editor, reducing context switching and promoting a more efficient workflow.
Extension — eamodio.gitlens
(https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
5. SonarLint —
This tool helps identify and fix coding issues that can lead to bugs, vulnerabilities, and code smells. Out of the box, it supports the analysis of JavaScript/TypeScript, Python, PHP, Java, C, C++, C#, Go, and more. You can also pair it with SonarQube or SonarCloud to achieve end-to-end code quality across the project.
Extension — SonarSource.sonarlint-vscode
(https://marketplace.visualstudio.com/items?itemName=SonarSource.sonarlint-vscode)
6. Rainbow Brackets —
If you’re fed up with finding open and close brackets in a complex block of code, this extension is for you. This extension provides color coding for round, square, and curly brackets, with isolated brackets highlighted in red.
Extension — 2gua.rainbow-brackets
(https://marketplace.visualstudio.com/items?itemName=2gua.rainbow-brackets)
7. Turbo Console log —
Logging into the application with the correct details to debug can be challenging. This extension makes debugging much easier by automating the process of writing meaningful log messages.
Extension — ChakrounAnas.turbo-console-log
(https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log)
Worth mentioning —
- Material Icon Theme — PKief.material-icon-theme (https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)
- One Dark Pro — zhuangtongfa.material-theme (https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme)
- ESLint — dbaeumer.vscode-eslint (https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
- Auto Import — steoates.autoimport (https://marketplace.visualstudio.com/items?itemName=steoates.autoimport)
Thank you for reading! If you found this article useful, please clap and share it with others.
Written by Karthik Srikanth, a software engineer at Airbus who codes by day and dreams of planes by night.
