Linting is the process of evaluating and debugging the source code in the background by analyzing against a set of rules for programmatic and stylistic errors. This allows the developer to find errors before running the code. Rules also enforce best code standards and practices, better code quality, more readable, and easier to maintain.
According to GitHub Octoverse survey, JavaScript continues to be the most used language in the last five years. This allowed the JS ecosystem to grow and evolve giving more and better tools for the developer.
To ensure good practices and standards several JavaScript Static Analyzer Tools emerged such as:
With such a variety of tools, the hard thing to do is select the best linter for our project. As a developer, I feel that the most important characteristic of any tool is how configurable and easy to integrate they are. So for any JavaScript project, I would choose ESLint and integrate it with Prettier. This should give me all the goodness of a linting tool highly configurable with a code formatter.
When building apps, it's important to have a good setup of automated and manual tools that ensures the best standards and code quality. Each project must have a linting tool to fulfill these needs. Both tools are configurable and they work well together, each one having a different linting responsibility between programming and stylistic errors, making it easy to catch errors.
ESLint is one of the most used linting tools and there is a reason for it. Highly configurable, it has a huge adoption from the community having hundreds of open-source configurations and plugins. It allows the configuration of several options like coding rules, environments, parser options, extend configurations, and use plugins.
On one hand, ESLint is responsible for checking against programming errors, on the other hand, we have Prettier an opinionated code formatter capable of finding any stylistic errors. It comes with some code style standards and is also easy to configure. It's easy to integrate with ESLint and has Code Editor extensions that can format the code on save!
At Imaginary Cloud we develop React projects for our frontend rich applications so it became important to automate as much as possible the development process with proper tools in place. This need lead us to build one open-source ESLint configuration called @imaginary-cloud/eslint-config-react to use on our projects. The main advantages were a fast installation/configuration and the same code standards and style in a different project.
Configuring a linting tool is time-consuming especially for the first time. Several different open-source configurations and plugins can be used and selecting the needed ones can be overwhelming plus the manual configuration of a linter can be error-prone.
We researched and bundled the ones with the best code practices, standards, and code styles. So the result was to use two of the most used ESLint configurations:
Prettier tool and adds code style format rules, this is also applied to jsx code from React applications
And since we work heavily with React applications, we do have some preferences in code styles so we also added those rules to this config, making it easy to switch from project to project and being able to deliver code - all the standards are the same since we share the same configuration, yeah!
Like any other JavaScript package, these can be installed by npm or yarn. The installation is pretty simple. Both packages, ESLint and Prettier, need to be listed as development dependencies in the package.json file. One way to quickly add them to the project is running the command on the terminal
This will install and add ESLint and Prettier as project dependencies and everything is set. For a better development experience, it's possible to install one ESLint extension to your Code Editor allowing highlight code errors in the editor while developing.
There are several ways to configure ESLint as explained in the official documentation. The most common one is to create a .eslintrc (YAML and JS files can also be used!) with all the configurations wanted for the project. To achieve this more efficiently, several different open-source configurations can be used as explained above.
For React projects we just need to install @imaginary-cloud/eslint-config-react package and extend our ESLint configuration. Since this configuration also adds the required dependencies for the full configuration, we used the same approach as Airbnb config.
To install the config just run the command in the terminal
npx is a command bundled with npm on the latest versions that allow npm packages to be executed without having them installed on the project. The install-peerdeps package will run and look to the peer dependencies of @imaginary-cloud/eslint-config-react and install them as development dependencies alongside with the configuration. This step will save to the project package.json file all the dependencies needed automatically.
With older versions of npm (< v5.2) npx is not available but it's possible to install the configuration by running the following script in the terminal
After installing @imaginary-cloud/eslint-config-react configuration, add the next two lines to the package.json file
Everything is set and ready to use. This shows how easy is to install and configure ESLint and Prettier for a React project in just two steps using @imaginary-cloud/eslint-config-react configuration package.
For more advanced configuration, it is easier to create one .eslintrc file and extend the @imaginary-cloud/eslint-config-react configuration. Remove the eslintConfig from the package.json file and check ESLint documentation for more options.
.eslintrc example file
The package.json file needs to have the following line
To use the same Prettier configuration from @imaginary-cloud/eslint-config-react as a stand-alone Prettier config install the @imaginary-cloud/prettier-config package
To finish the configuration make sure that the package.json file has "prettier": "@imaginary-cloud/prettier-config" to use the proper Prettier configuration
The simplest way is to add under the scripts object in the package.json file the next two scripts:
The script npm run lint will run linter in the project leaving out the files from .gitignore file. If any best practices, standards, or code styles are not meet in our code, it will display the actual error or warning. This is extremely important to use in any project that has a CI/CD setup. The script npm run lint:fix is useful to fix automatically any error found, if the linter knows how to fix it. When adding a linter configuration to an existing project, this script can help to fix lots of errors, improving the overall code quality without any effort.
We will follow the same approach as above and add a script to execute our Prettier
Running the script npm run format will format the code style of all JavaScript files. Like ESLint, it has amazing Code Editors extensions that enable the Prettier to run on files when they are being saved, formating them on the fly without the need to run the script manually!
More and more frameworks and libraries emerge to deliver more complex and dynamic applications, so it has extreme importance to have the proper static code analyzers in place. This guarantees that best code practices, standards, and good code styles are delivered. This improves readability and maintainability, making it easier to develop new features in small amounts of time. Following standards is also important because developers can work with one unknown codebase without much effort.
Time is everything in a fast pace environment, so it's important to have a good setup of tools allowing the developers to be more efficient and spend more time developing new features than looking for errors in the code.
Using and running our linting tools in our CI/CD pipelines alongside automated tests and code reviews in each new piece of code is important. These are the basic tools that any project should have to guarantee that the best solution is always delivered. All in all, these are the small and clever tools that leverage our everyday development!
Found this article useful? You might like these ones too!
Full-stack developer and JavaScript lover. Top notch front-end is my thing where I like to experiment new stuff. Kayak fisher, brewer and beer drinker!
People who read this post, also found these interesting:
.png)
