eslint-plugin-quintoandar

eslint-plugin-quintoandar

Table of Contents

• Getting started
• Rules
• Versioning
• Contributing

Getting started

This package provides QuintoAndar's custom eslint rules, that are created by our engineers' demand. All these rules are accessible in the eslint config that is plugged in. For example, the package eslint-config-quintoandar-pwa uses it as a plugin.

These custom rules can be used in two ways:

• use directly, applying to everybody
• use new custom rule progressively

How to add in a project as an eslint plugin

Install

npm install --save-dev eslint-plugin-quintoandar

Usage

  "plugins": [
    "quintoandar"
  ],

or

  "plugins": [
    "eslint-plugin-quintoandar"
  ],

Rules

No dynamic import index

Do not allow dynamically importing index files i.e. import('./index'), import('../index'). This rule was created because if multiple react-loadable components used the same path in the import() call, it would cause problems during chunk resolution and a page would load more JS chunks than necessary. Since most of the problems arose with multiple files named 'index', this rules suggests to rename them with a more specific name.

How to use it

Just add the code below in your rules array:

"quintoandar/no-dynamic-import-index": 2,

No target blank

Do not allow the usage of target="_blank" without rel="noopener noreferrer because of a security problem.

How to use it

Just add the code below in your rules array:

"quintoandar/no-target-blank": 2,

No typo components

Create a new custom rule is also a way to move from the deprecated approach to new one. This rule does exactly this, enforce to do not use any component from the file called Typo.

How to use it

Just add the code below in your rules array:

"quintoandar/no-typo-components": 2,

Versioning

We use SemVer for versioning. For the versions available, see the CHANGELOG.md

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

How to write a new custom rule

Just go to /rules folder, create a new file and export as default one function receiving context and write the condition.

module.exports = function(context) {
  return {
    ....
    context.report({ /*... something */ })
  }
}

In order to make it easy, there're two interesting tools:

• Eslint rules generator
• AST explorer to help verify how to get what you need;

Plus: Always to remember to update this readme and create unit tests when adding a new custom rule.

Reference: https://medium.com/@btegelund/creating-an-eslint-plugin-87f1cb42767f