How To Auto-Correct Your Code: A Web Developer Guide

Learning to code can be tons of fun but it is often overwhelming. Web developers, especially new ones, are constantly learning new content. What makes it worse is that there are so many rules to learning how to write good code. 

Yes, the rules exist for a reason and we do eventually need to implement those practices ... but let’s face it, it's difficult to remember all the rules.

This leads me to my proposal: We ignore the rules.

Let the code editor fix the tedious rules, while we get the satisfaction of indented, formatted and bug-free code.

"Okay great, so how do we do this?"

The short answer: Linting.

“Lint, or a linter, is a tool that analyzes source code to flag programming errors, bugs, stylistic errors, and suspicious constructs.”

In other words, a linter runs through your code, checking if you broke any rules. The linter lets you know about the errors in your code and some linters can even fix them for you!

Linters have two categories of rules:

Formatting rules: These are the rules that make you and your team’s code look neat, similar and ordered, e.g. code-spacing, indents and line-breaks. 

Code-quality rules: These rules make sure your code runs as it should and is bug-free with the correct syntax, e.g. unused variables, syntax errors and open-brackets.

Tools and Setup for Linting

For the core of web development, we need these tools:

Prettier: My favourite tool for dealing with formatting. It works not only for HTML, CSS and Javascript but many other languages too!

Stylelint: A CSS/SCSS/LESS linting tool for dealing with code-quality issues.

ESLint: An awesome linter for javascript. I will not be going through setting up Javascript in this article. This tutorial will help with that. Check out this guide as well.

Prettier: Writing neat code

I am using VS Code in this guide, although many other editors such as Atom work as well.

1. Install and download VS Code.

2. Install the Prettier extension from the store.

3. (Recommended) Use format-on-save in settings. You can find the settings in file>preferences or the cog icon on the left bottom. You can use the search bar to find the setting and check the "Format On Save" box.

4. You can manually format your code by pressing "ctrl"+"shift"+"p" and searching “format document”.

That’s it! Prettier is set up.

You can alter other format settings, such as how the indentation works (spaces/tabs) as well. You can find this in the left tab in settings. Or, check out the prettier docs for the full list of options.

A neat tip: Prettier also lets you know if you have made a syntax errors in HTML by not formatting your code on save. This has saved me hours of work as I catch the error as soon as I’ve made it.

Stylelint: Tackling Code Quality

1. Install the Stylelint extension on VS Code.

2. Make sure you have NPM installed, for Windows, Mac or Linux.

3. Install the recommended configuration for Stylelint into your workspace directory:

npm install stylelint-config-recommended --save-dev

A few warnings(not errors) will come up, you can ignore them.

4. Place a custom Stylelint configuration file (stylelint.config.js) in your workspace directory. I use the one above from Microverse. You can also create your own configuration.

5. You will find the errors displayed in the “problems” tabs in the terminal block of VS Code. (A shortcut to toggling the terminal is “ctrl" + "`” )

6. To fix the issues, run:

npx stylelint --fix <location/of/stylesheet.css>

Note: This is not needed often as Prettier would already be fixing most of these issues.

7. You will need to fix the few code errors that remain. Soon enough you will be learning the rules without thinking about it!

All done! Your future self will thank you for this.

Let us run through a basic demo of how our set up should be working.

Some ugly looking CSS code with nine problems found by Stylelint.

Prettier formats the code on file save, fixing five errors with no effort:

Stylelint auto-fixes one more error when we run the npx command:

npx stylelint --fix <location/of/stylesheet.css>

Fixing the last few problems manually... and our code is looking good!

Stickler CI

Since we are dealing with linting, let’s mention the topic of Stickler CI on GitHub. This linter does the same code checking that we have set up in this article. Stickler also works with Javascript (ESlint) and other languages. 

The benefit of Stickler is that it can lint the code in a pull request on GitHub, ensuring there are no errors for you and your team before merging your new code. 

To set it up, check out this repository and this article for a more detailed guide.

That’s it, folks! I hope this will save you hours of tedious work and allow you to focus your efforts on coding. 

I would love to hear your thoughts and suggestions on this article.