Monday, October 12, 2020

ESLint basics

When building web applications, Linting tools take a crucial role in our development process. Every developer should know what a Linter is, how to install and configure one, and how to use them efficiently making sure that the best code standards are applied to our project.


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.

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.


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!



References:

https://www.imaginarycloud.com/blog/how-to-configure-eslint-prettier-in-react/


No comments:

Post a Comment