- Published on
The importance of taking time out to check your code and html markup
- Authors
- Name
- interglobalmedia
- @letsbsocial1
- Link to The importance of taking time out to check your code and html markup on anchorfm
I am noticing more and more that developers, new and experienced, rush to get their code deployed or sent for review, etc., and don't check their code carefully before doing so. As a result, silly errors, which could cause not so silly issues, are overlooked. This means sloppy code.
It is so important to check your code as you go along. JavaScript linters
such as ESLint for VS Code
(that is the editor I use, for example), Prettier Formatter for VS Code
for JavaScript
code formatting are helpful and important to have, but oftentimes, the errors reside in the html
! It is equally important to check for errors in the html
markup. There are three VS Code extensions
I find extremely helpful in checking for errors in html
markup:
HTMLHint VS Code
extension by Mike KaufmanCode Spell Checker
extension by Street Side SoftwareHighlight Matching Tag
extension by vincasIt
HTMLHint
is a static code analysis tool for HTML
. The way it works is that errors in HTML
files are highlighted with squiggly lines
and you can hover over the squiggly lines
to see the error message. HTMLHint
will only analyze the currently open HTML
file, and does not search for HTML
files to analyze within your project folder.
Code Spell Checker
is a spelling checker for source code
. It also works well with camelCase code
.
Highlight Matching Tag
highlights opening
or closing
matching tags. This extension will try to match from anywhere: tag attributes
, from inside strings
, any file
, while also providing extensive styling options to customize how tags are highlighted
.
These extensions are especially useful when the code base/html
markup becomes very large, and it would become very difficult to find errors without them!
When you are working on a project, take the time to check for errors after creating your code
or html markup
, and use tools such as these three plugins, along with the EsLint
(dbaeumer.vscode-eslint) extension for VS Code
by Dirk Baeumer, and Prettier Code Formatter
extension for VS Code
by Esben Petersen. Those few extra minutes you take to check your code
will save you much time and aggravation in the long run. Things can get very sticky when you are going through thousands of lines of code
or html markup
!
I will be embedding this episode of Plugging in The Holes along with a transcript in the form of a post on interglobalmedianetwork.com for your hearing and reading pleasure. I will be including the related resource links mentioned in the podcast of course. Always do. Bye for now!