Linting Process in Web Development: Introduction

Coders have their tastes – some keep the code simple, others like a bit of chaos, and others don't give a shit about anything at all. Who hasn't witnessed fights over which approach is better - tabs or spaces? Camel case or snake case? Brace in the same line or in the new one?  It's like arguing about your favorite flavor but for code.

Now, think of a world where your code's style isn't only about what you like but a team decision. It's like an agreed local law, a compromise that must be restricted no matter what opinions each of us has. Sounds fine, right?

But how to make sure the rules are followed? Should we hire someone to validate each line of the code pushed to the repository for rule breaks? Yes! But it won't be a person. We'll hire tools called linters to guard code quality and consistency for us. Let's start!

What is the Linting Process?

It was a calm Sunday evening, 22 years ago. I was just 8 years old, slowly getting ready for my evening routine when suddenly I remembered I had to write an essay for school due the next day! The first thought that crossed my mind? "Mom's going to kill me." I quickly sat down to write. I was a bit worried about the outcome, but I knew I had to act.

After drafting a rough version, I went to my mom and asked her to check my work. It wasn't without nerves, of course, but my mom agreed to help me – after all, she chose I didn't embarrass myself at school. After a quick analysis and some revisions, the task was ready. So, I could peacefully go to bed, knowing I had done my best – mom checked my assignment, giving me a better chance of positive result at school.

And that was my first time with a linting process! The process of analyzing work for potential grammatical mistakes, spelling errors, or stylistic issues before it gets read by the teacher. Now, 20 years later I use a similar process in coding, but I don't ask my mother for help anymore. I use linting tools that do what my mother did years back.

What are the Coding Standards?

They are a set of guidelines, conventions, and recommended practices that developers follow when coding. Coding style defined by them applies to the whole project codebase eliminating debates about what to use - tabs or spaces for example.

They can be maintained with a tools called linters and formatters:

• Linters: Analyze the code for errors, potential bugs, or style violations based on predefined rules. They catch issues that might slip through unnoticed, helping you write cleaner, more error-free code and maintain consistency.
• Formatters: Automatically tidy up the code, ensuring consistent formatting across the project. They handle things like indentation, spacing, and code layout, making your code nice-looking and organized without manual work.

Why to use the Linting Process?

That's a classic definition that all similar articles repeat over and over. It all sounds great, but how does it translate into real benefits for you? How can it enhance the projects you're working on? I'll share my perspective and real experiences as a team lead and engineer to answer these questions in plain language.

#1 It helps me stay calm and avoid burnout.

As the lead engineer at Coditive, I barely have time for simple redundant things. Dealing with them makes me angry because I mostly have other more crucial things to focus on. If I have to write "fix formatting" more than 0, especially in the long-term projects that the team should know well already, I reject the pull request right away and don't check anything else. It shouldn't be my job to verify obvious code aspects.

Such simple things can impact how others see you and whether you become a source of frustration for them. I'm sure that under pressure, my anger can be felt and it makes me sad. Trust me, these seemingly small matters can contribute to burnout, and not many people talk about it. That's where linters come in handy!

They save time by handling those checks, e.g. before pushing the code to the repository ensuring that obvious things are already handled. I allow focusing on giving valuable feedback rather than dealing with formatting checks which should be handled earlier.

#2 It learns consistency and attention to details.

I make learning code quality a daily habit. As I can spot the code mistakes right away as I write, I naturally get better and my code improves over time. After a while, I'm writing code that's so clean, that it doesn't even need formatting - practice makes perfect.

Sometimes, people ask how do I do auto-reviews so fast. It's easy. With regular practice, I've made it a habit to check that the code is well-formatted as I write. So, when it's time to check a pull request, it takes much less time because I've already done the work!

#3 It helps avoids unreadable code.

I hate dealing with spaghetti code, especially when I'm under pressure for a high-stakes project. If something goes wrong, and I have to dig into the code, seeing a mess like this makes me seriously consider throwing my Mac by the window. I'm not even able to roll up the function, because formatting breaks this.

Coding standards help me create code that is not a headache maker for others. I'm aware that devs spend a huge amount of time on reading code than writing so I try to help them just as I write! I hope that karma will pay me in the future.

#4 It helps dealing with problems under pressure.

There are cases when I need to whip up a solution quickly just to save my ass. Let's say I misunderstood the client's requirements, created a feature that's slightly off and realized it at the last moment. In a rush, I patch it up with a quick-and-dirty code to get job done and run a tool that transforms the code into a nice-looking one in the blink of an eye.

Coding standards combined with tools like linters and formatters allow writing code that looks like shit but becomes pretty at the end, just with one command. You might find it surprising, but time is at the heart of another crucial aspect!

What tools to use for linting?

Many tools can be used to support the linting process. I believe that each programming language has its own tools, but in this course, I'll focus mainly on tools that enhance the classic web development stack. I'll discuss:

• EditorConfig for general formatting.
• PHP Code Sniffer for linting PHP code.
• Prettier for formatting JS/CSS code.
• Stylelint for linting CSS code.
• ESLint for linting JS code.

Each of them will get a separate article, so stay tuned! I will show you how to build your own listing setup for WordPress (and not only) projects from scratch!