Software systems to innovate and grow

Save Time By Improving Your JavaScript Code Quality With Linters

By Engineering Team February 25, 2019 10 mins read

Code linting is an important thing to have incorporated in your project because it is a way to increase the code quality. Linting consists of checking a source code for programmatic and stylistic errors. In addition, you are saving time by formatting your javascript code with some automatic tools. Let’s dive a bit deeper!

JavaScript Linters

A linter is a tool that analyzes the code using a set of rules defined by the developer (or can be extended from a predefined set), which warns you when it finds any suspicious looking code. Their main utility is to detect potential bugs and code that’s difficult to maintain. Linters are automated tools that only need to be configured one time. Most programming languages have code linters available, and sometimes they come incorporated in the compilers compilation process.

JavaScript, because of its dynamic and loosely-typed language, doesn’t have a compilation process, therefore, is prone to development errors. This means it needs to be executed in order to find an error. Javascript linting tools allow developers to discover problems on their applications code without executing it.

Javascript Formatter

After running a code linter on your project, the code formatter modifies or fixes your source code, according to the defined configuration previously set up. It’s a tool that allows enforcing consistent styles across development teams no matter what source code editor is used. Let’s now learn more about the tools available.

ESLint

ESLint is an open source code linting Javascript tool, originally created by Nicholas C. Zakas in June 2013. It analyzes the code of your application, detects problems by the use of patterns and if it is able to, resolves them. ESLint allows you to discover issues on the JavaScript code without the need to execute it.

ESLints main purpose is to allow developers to create their own set of linting rules, all of which are rules pluggable with ESLint. It comes with a predefined set of rules, which are useful to start using it right away. You are also able to extend the rules and add more to them at any point in time. The default rules are written like any plugin rules are. ESLint is written using Node.js to provide a fast runtime environment and can be easily installed with the Node.js package manager (npm)..

Prettier

Prettier is an opinionated code formatter with support for many languages like:

  • JavaScript, including ES2017
  • JSX (React)
  • Angular
  • Vue
  • TypeScript
  • HTML & CSS including preprocessors like Less, and SCSS
  • JSON

And many others…

It integrates with most text editors available today. Prettier ensures that all output code follows a consistent style. It disregards the original styling by parsing it away and re-printing the parsed abstract syntax tree (AST) with its own set of rules, taking the maximum line length into account, and wrapping code when necessary.

Integrating ESLint and Prettier Into Your Project

Installing Packages

Add Eslint and required packages

The good thing about Prettier is that it can be integrated with ESLint very easily.

Creating Configuration Files

After ESLint is installed you need to set the rules

For ESLint create an .eslintrc file on the root and add the following:

For Prettier create a file called .prettierrc
Add the following content:

  • useTabs: false
  • tabWidth: 2
  • singleQuote: true
  • trailingComma: es5
  • bracketSpacing: true
  • semi: true
  • printWidth: 80

With this set of rules, Prettier formats your code in the following way:

  • Add a semicolon at the end of each line
  • Indent code with 2 spaces
  • Change double quotes for simple quotes
  • Add a comma to the last element of an object or array according to the ES5 documentation
  • Adds a space between ({}) and the content
  • Divide a line if it is longer than 80 characters

Defining the Tasks to Run

Finally, you need to add to your package.json file the following scripts:

And then just run each script:

And to solve the fixable formatting issues use:

You’ll see the name of the file in the console with all the warnings and errors listed.
For example.

That’s a Wrap

When you create Javascript applications together with a development team, it can be very difficult to maintain the source code without programmatic and stylistic errors. Linters and formatters are useful tools that allow you to check, detect errors, and modify your source code helping you to follow coding patterns with your development team. You can achieve a source code that is legible, readable, less polluted, and easier to maintain by incorporating a linter tool into your project. As a result, you will have a better and more consistent code, getting rid of some annoying refactor tasks and ultimately optimizing the code style and useless diffs in commits (indentation, newline, etc).