Code Quality Check with Eslint

Code Quality Check with ESLint

We must have heard about words like white-box testing, ESLint, code styling rules, JavaScript linting and so on. The common thing in all the above is the word ‘lint’. A linter is a small program that checks the code for stylistic or programming errors. Let us discuss in detail on the significance of linting in JavaScript node projects in this article.

Nowadays, it is very simple to find some boilerplate code with the specified project requirements. But have we ever given a thought before we start any project, what characteristics form a good, optimized code base and why is it important?

Necessary characteristics of boilerplate

 Good and readable documentation

 Code structure with a deeper abstraction level

 Follows proper coding standards

 Scalable

 Easy testing tools

 Necessary API modules

 Support for internationalization and localization

 Code splitting

 Server and client code for setup

 Proper navigation and routing structure

Several times, we come across these terminologies, but as developers, we question ourselves, do we follow all of the above? With several people being in a team and various persons working on the code, it is important to make sure that the code looks uniform and should seem like it has been written by a single person.

Every developer has their own mindset behind writing a piece of logic. Due to this, with different minds coming together, it is difficult to maintain uniformity in code throughout the project. In order to overcome this, defining lint rules at different levels will enable developers to follow the standards and this process is also called as modern JavaScript linting. This is important, as a common set of rules will make the code to be understood easier, even though it has been written by many developers.

www.mouritech.com Code Quality Check with ESLint

Benefits of Linting

 Readability

 Pre-code review

 Finding (syntax) errors before execution

With the set of styling rules defined, there is better code readability, which helps in improving the code reviews to be more effective and faster. Reviewers will be able to focus more on code implementation rather than on syntax errors. module.exports = { extends: ["eslint:recommended", "plugin:react/recommended"], rules: { indent: ["error", 2],

"comma-dangle": [

"error",

{ arrays: "always-multiline", objects: "always-multiline", imports: "always-multiline", exports: "never", functions: "never",

"no-console": ["error", {allow: ["warn", "error"]}], quotes: ["error","double",{allowTemplateLiterals:true}],

};

With the above example, one can understand how rules can be defined at different levels like error or warning.

www.mouritech.com Code Quality Check with ESLint

ESLint

It provides a complete package, which identifies and reports on patterns found in ECMAScript. Its official documentation can help one get started. https://eslint.org/docs/user-guide/getting-started

Implementation of ESLint makes the code more consistent and free from bugs. It is easily pluggable in a project. Define the set of rules which best suit the behavior of the project. ESLint can be easily installed with the choice of package manager - either NPM or Yarn. Please follow the official documentation for configuration details.

Style Guide

Another important aspect is the choice of style guide with ESLint. A style guide is a collection of different rules defining code standards. Some of the most popular style guides are Google and AirBnB.

ESLint Recommended

"extends": "eslint:recommended"

This is not a very strongly opinionated style set. It is useful if we are interested in catching unused variables or syntax errors.

AirBnB

If React is being used, AirBnB offers smart React choices. AirBnB shares many of Google’s style choices in addition to few more. It is a strongly opinionated linter that provides additional validation. AirBnB style guide is available as ‘eslint-config-airbnb' in NPM repository. Few of the rules are mentioned below:

"extends": ["eslint:recommended", "airbnb"]

 Semicolon: Required

 Trailing commas: Required

 Template strings: Preferred

 Import extensions: None

 Space before function parentheses: None

 Object curly spacing: Yes

 Array bracket spacing: None

www.mouritech.com Code Quality Check with ESLint

 Underscored functions: None

 Object destructuring: Preferred

 React ordering: Opinionated

 React prop validation: Required

 Arrow functions return assignment: No

 Object property shorthand: Preferred

Conclusion In order to make a project sustain longer in future, coding standards and uniformity are required in writing code, so that it is understood well and supported by any group of new developers. Linting process plays a vital role and with a few configurations in a project, we can achieve this goal. We can switch within several style guides available at any time, understanding the nature of the project.

Contact for further details

Aakanksha Thakre

Team Lead - Digital Transformation

[email protected]

MOURI Tech