Linting tools play a crucial role in our development process when building web applications. Every developer should know what a Linter is, how to install and configure one, and how to use them efficiently, ensuring that the best code standards apply to our project.
At Imaginary Cloud, we had delivered several React apps for our clients, so we created one open-source ESLint config - @imaginary-cloud/eslint-config-react to be used in-house and shared with the community, where comments and pull-requests are welcome on our GitHub repository. The goal is to have one centralized configuration that everybody can use, easy to install and configure using the best JS code standards in the community and linting on jsx code without the hassle of configuring a Linter.
But why use Imaginary Cloud configuration instead of others available? Because we bundled the best and most used open-source configurations in a centralized package, making it's installation and configuration process quick and painless. The main advantage of using @imaginary-cloud/eslint-config-react over the well known Airbnb configuration is that we also use Airbnb config for their best code practices plus the code style of Prettier to have a more pleasant and readable code.
By the end of this article, you should be able to know what Linting tools are and how to install/configure ESLint and Prettier for React applications with just a couple of steps.
What is Linting
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.
JavaScript Linting Tools
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:
- JSLint: a code quality tool, looks for problems on JavaScript programs.
- JSHint: a community-driven tool that detects errors and potential problems in JS code.
- ESLint: completely pluggable linter, allows the developer to create their own linting rules.
- Flow: using data flow analysis, infers types, and tracks data flows in the code.
- Prettier: an opinionated code formatter.
- TSLint: extensible static tool analyzer for TypeScript.
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.
Why use ESLint and Prettier
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.
Why use @imaginary-cloud/eslint-config-react
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:
-
Rules for JavaScript best practices and code standards. Examples can be found in Airbnb documentation
-
Disable conflicting rules with
Prettiertool and adds code style format rules, this is also applied tojsxcode 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!
How to install ESLint and Prettier
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
npm install --save-dev eslint prettier
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.
How to configure ESLint for React using @imaginary-cloud/eslint-config-react
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 install-peerdeps --dev @imaginary-cloud/eslint-config-react
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
(
export PKG=@imaginary-cloud/eslint-config-react;
npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
)
After installing @imaginary-cloud/eslint-config-react configuration, add the next two lines to the package.json file
"eslintConfig": {
"extends": "@imaginary-cloud/react"
},
"prettier": "@imaginary-cloud/prettier-config"
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
{
"extends": ["@imaginary-cloud/react"]
// more configuration options here!
}
How to configure Prettier
The package.json file needs to have the following line
"prettier": "@imaginary-cloud/prettier-config"
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
npm install --save-dev @imaginary-cloud/prettier-config
To finish the configuration make sure that the package.json file has "prettier": "@imaginary-cloud/prettier-config" to use the proper Prettier configuration
How to use ESLint
The simplest way is to add under the scripts object in the package.json file the next two scripts:
"lint": "eslint ./ --ignore-path .gitignore",
"lint:fix": "npm run lint -- --fix"
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.
How to use Prettier
We will follow the same approach as above and add a script to execute our Prettier
"format": "prettier --write \"{,!(node_modules)/**/}*.js\""
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!
Advantages of using ESLint and Prettier
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!