Extensions for Visual Studio Code that will help elevate your code quality
This is the list of extensions for VSC that I use daily. They help me to keep the code high in quality and at least to some extent bug-free. They will be focused around web development but will not be limited to (especially the multilanguage tools list that follows… Hope this helps you in your day to day adventure in coding.
TLDR; for those who want names and links:
2. Code Spell Checker (well checks your spelling)
4. Gremlins tracker for Visual Studio Code (Unicode characters)
5. W3C Validation (HTML and CSS)
6. Error Gutters (Visual aid in the editor)
Disclaimer about ratings on VSC marketplace:
Always take marketplace ratings with a grain of salt ie. the rating is low for SonarLint because people complained that it requires Java… with complete disregard for a fact that SonarQube requires Java.
This one is not so obvious, but if your native language isn’t English its a huge help to keep the codebase clear of misspelt variable names or even if you are it still might be helpful. Misspelt function names, variables, comments, tags and so on are re obstacle when somebody tries to search ie. after a conversation: you said that everything is in function tomorrow() but in the code its: function tomorow(). This will save you from such scenarios. It’s not Grammarly grade but it will do the job.
Hint: Additional languages can be found as extensions in the marketplace ie. Dutch Language Pack
Keeps your JS code more readable, standardized and points out common mistakes ie. left out “console.logs” ;)
This one might save your sanity. It shows invisible Unicode characters that might be harmful or look like legit ones.
You know there is this really silly joke you can do to your colleagues or friend…
This is a real semi-colon: ;
This is a “semi-colon” — greek question mark: ;
They look the same right? Guess what happens to JS when you exchange them… FYI: ESLint and JSHint will catch this one also, but you get the point?
This extension will validate your HTML and CSS against W3C validation rules and will provide you with an explanation of what is exactly wrong with your markup. Unfortunately, this extension uses Java in the background so it will have some delay on startup and use some bigger chunk of memory.
An alternative which I don’t use: HTMLHint
In theory something very small, yet allows you to notice problems much sooner — it ads error, warning, info icon in the left-hand side of the editor in the gutter. It is language and extension agnostic so it all linters like ESLint, W3C Validation etc…
Markdown is a popular markup language used in all sorts of situations (ie. readme.md on github/other git scm sites). Will help you keep your markdown files valid and clean