How to Auto-Correct Your Code: A Web Developer’s Guide

Profile picture Ikraam Ghoor HackerNoon

Ikraam Ghoor

Freedom-oriented individual who enjoys engineering and technology.

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

Yes, rules exist for a reason and eventually we have to implement those practices…but let’s face it, it’s hard to remember all the rules.

picture

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

picture

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

picture

“Okay great, so how do we do that?”

The short answer: fluff.

“Lint, or a linter, is a tool that analyzes source code to report programming errors, bugs, style errors, and suspicious builds.”

In other words, a linter walks through your code, checking to see if you’ve broken any rules. The linter informs you of 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 look neat, similar, and tidy, such as code spacing, indents, and line breaks.

Code quality rules: These rules ensure that your code runs as it should and is free from bugs with the correct syntax, such as unused variables, syntax errors, and open brackets.

Tools and setup for linting

For core web development, we need these tools:

Prettier: My favorite tool to manage formatting. It works not only for HTML, CSS and Javascript but also for many other languages!

Stylelint: A CSS/SCSS/LESS linting tool to deal with code quality issues.

ESLint: An awesome linter for javascript. I won’t cover JavaScript configuration in this article. This Tutorial will help with this. look at this guide as well as.

Prettier: writing neat code

I use VS-Code in this guide, although many other editors such as Atom work too.

1. Install and download VS Code.

2. Install the Prettier store extension.

picture

3. (Recommended) Use format-on-save in settings. You can find the settings in file > preferences or the cog icon in the lower left. You can use the search bar to find the setting and check the “Format when saving” box.

picture

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

That’s it! Prettier is set up.

You can also change other format settings, such as how indentation (spaces/tabs) works. You can find it in the left tab in the settings. Or check out the prettiest docs for the full list of options.

A neat tip: Prettier also lets you know if you’ve made a syntax error in HTML by not formatting your code when saving. It saved me hours of work because I catch the error as soon as I made it.

Stylelint: tackling code quality

1. Install the Stylelint extension on VS Code.

picture

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

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

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

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

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

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

6. To troubleshoot, run:

npx stylelint --fix 

Note: This is not often necessary as Prettier would already solve most of these problems.

7. You will need to correct the few remaining code errors. Soon you will learn the rules without thinking about it!

Ended! Your future self will thank you for it.

Let’s walk through a basic demo of how our setup should work.

Ugly CSS code with nine issues found by Stylelint.

picture

Prettier formats the code when saving the file, fixing five errors effortlessly:

picture

Stylelint automatically fixes another error when we run the npx command:

npx stylelint --fix 
picture

Fix the last issues manually… and our code looks good!

picture

IC Stickler

Since this is fluff, let’s mention the Stickler CI topic on GitHub. This linter performs the same code check we implemented in this article. Stickler also works with JavaScript (ESlint) and other languages.

The advantage of Stickler is that it can fluff code into 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, friends! Hope this saves you hours of tedious work and allows you to focus your efforts on coding.

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

Key words