Package Exports

eslint-plugin-base-style-config

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (eslint-plugin-base-style-config) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

A Set of Essential ESLint rules for JS, TS and React

It's part of a Set of Essential Configuration Files for Backend/Frontend/Build code style checking: base-style-config

Quick Start

1 . Add dependencies:

package.json:

  ..
  "devDependencies": {
    "eslint": "^7.1.0",
    "eslint-plugin-base-style-config": "2.2.0",
    "eslint-plugin-import": "^2.18.2",
    "@typescript-eslint/eslint-plugin": "^3.2.0",
    "@typescript-eslint/parser": "^3.2.0",
    "eslint-plugin-react": "^7.14.3",
    "eslint-plugin-react-hooks": "^2.0.1",
    "eslint-plugin-regex": "^1.1.0",
    "eslint-plugin-unused-imports": "0.1.2",
    ..

2 . Configure eslint to use rules from base-style-config:

eslintrc.json:

{
  "extends": [
    "plugin:base-style-config/js-rules, import-rules, typescript-rules, react-with-hooks-rules, regex[copyright], regex[jsx], regex[quotes.jsx]",
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "base-style-config"
  ],
  "rules": {
    ..
  }
}

Remove the rule sets that are not necessary according to your needs.

Take a look to Regex rules:

Custom Eslint Regex rules
Mixing rules

Goals

The idea is to have a common and "single" source of code styling rules, which can be used across different projects:

Provides a similar set of rules for Backend's, Frontend's and Build's code.
Provides a "single" source of configuration files.
Allow to merge different Eslint Regex Rules.

In the future, Set of rules will be extracted to an eslint-config and Mechanism for Merging Eslint configurations will be extracted to an eslint-plugin.

Background

Background/Conventions/Voids

Using/Configuration

JS Rules

Set of Eslint Rules for JS.

1 . Add dependencies:

package.json:

  ..
  "devDependencies": {
    "eslint": "^6.3.0",
    "eslint-plugin-base-style-config": "2.1.1",
    ..

2 . Configure eslint:

eslintrc.json:

{
  "extends": [
    "plugin:base-style-config/js-rules"
  ],
  "plugins": [
    "base-style-config"
  ],
  "rules": {
    ..
  }
}

Remember order of sets in extends is important since each new set will override rules of the previous ones.

3 . Add to the respective ESLint script task:

package.json:

  "scripts": {
    "someESlintTask": "eslint ..",
  },

if using Gradle:

  task assessSomeESLint(type: NpmTask) {
    args = [
      'run',
      'someESlintTask'
    ]
  }

Import Rules

Set of Eslint Rules for Import.

1 . Add dependencies:

package.json:

  ..
  "devDependencies": {
    "eslint": "^6.3.0",
    "eslint-plugin-base-style-config": "2.1.1",
    "eslint-plugin-import": "^2.18.2",
    ..

2 . Configure eslint:

eslintrc.json:

{
  "extends": [
    "plugin:base-style-config/import-rules"
  ],
  "plugins": [
    "base-style-config"
  ],
  "rules": {
    ..
  }
}

Remember order of sets in extends is important since each new set will override rules of the previous ones.
There is no need to add import plugin, it will be automatically added by base-style-config plugin.

3 . Add to the respective ESLint script task:

package.json:

  "scripts": {
    "someESlintTask": "eslint ..",
  },

if using Gradle:

  task assessSomeESLint(type: NpmTask) {
    args = [
      'run',
      'someESlintTask'
    ]
  }

Unused Import Rules

unused-imports-rules: Set of Eslint Rules for Unused imports.

1 . Add dependencies:

package.json:

  ..
  "devDependencies": {
    "eslint": "^6.3.0",
    "eslint-plugin-base-style-config": "2.1.1",
    "eslint-plugin-unused-imports": "0.1.2",
    ..

2 . Configure eslint:

eslintrc.json:

{
  "extends": [
    "plugin:base-style-config/unused-import-rules"
  ],
  "plugins": [
    "base-style-config"
  ],
  "rules": {
    ..
  }
}

Remember order of sets in extends is important since each new set will override rules of the previous ones.
There is no need to add unused-import plugin, it will be automatically added by base-style-config plugin.

3 . Add to the respective ESLint script task:

package.json:

  "scripts": {
    "someESlintTask": "eslint ..",
  },

if using Gradle:

  task assessSomeESLint(type: NpmTask) {
    args = [
      'run',
      'someESlintTask'
    ]
  }

TS Rules

Set of Eslint Rules for Typescript.

1 . Add dependencies:

package.json:

  ..
  "devDependencies": {
    "eslint": "^6.3.0",
    "eslint-plugin-base-style-config": "2.1.1",
    "@typescript-eslint/eslint-plugin": "~1.13.0",
    "@typescript-eslint/parser": "^1.9.0",
    ..

2 . Configure eslint:

eslintrc.json:

{
  "extends": [
    "plugin:base-style-config/typescript-rules"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "base-style-config"
  ],
  "rules": {
    ..
  }
}

Remember order of sets in extends is important since each new set will override rules of the previous ones.
There is no need to add @typescript-eslint plugin, it will be automatically added by base-style-config plugin.
Must add parser: "parser": "@typescript-eslint/parser".
@typescript-eslint/parser will have a default project: ./tsconfig.json.

3 . Add to the respective ESLint script task:

package.json:

  "scripts": {
    "someESlintTask": "eslint ..",
  },

if using Gradle:

  task assessSomeESLint(type: NpmTask) {
    args = [
      'run',
      'someESlintTask'
    ]
  }

React Rules

Set of Eslint Rules for React.

1 . Add dependencies:

package.json:

  ..
  "devDependencies": {
    "eslint": "^6.3.0",
    "eslint-plugin-base-style-config": "2.1.1",
    "eslint-plugin-react": "^7.14.3"
    ..

with hooks:

  ..
  "devDependencies": {
    "eslint": "^6.3.0",
    "eslint-plugin-base-style-config": "2.1.1",
    "eslint-plugin-react": "^7.14.3",
    "eslint-plugin-react-hooks": "^2.0.1",
    ..

2 . Configure eslint:

eslintrc.json:

{
  "extends": [
    "plugin:base-style-config/react-rules"
  ],
  "plugins": [
    "base-style-config"
  ],
  "rules": {
    ..
  }
}

with hooks:

Set of Eslint Rules for React with Hooks.

eslintrc.json:

{
  "extends": [
    "plugin:base-style-config/react-with-hook-rules"
  ],
  "plugins": [
    "base-style-config"
  ],
  "rules": {
    ..
  }
}

Remember order of sets in extends is important since each new set will override rules of the previous ones.
There is no need to add react plugin and respective configuration, it will be automatically added by base-style-config plugin.

3 . Add to the respective ESLint script task:

package.json:

  "scripts": {
    "someESlintTask": "eslint ..",
  },

if using Gradle:

  task assessSomeESLint(type: NpmTask) {
    args = [
      'run',
      'someESlintTask'
    ]
  }

Regex Rules

1 . Add dependencies:

package.json:

  ..
  "devDependencies": {
    "eslint": "^6.3.0",
    "eslint-plugin-base-style-config": "2.1.1",
    "eslint-plugin-regex": "^1.1.0",
    ..

2 . Configure eslint:

eslintrc.json:

{
  "extends": [
    "plugin:base-style-config/regex[jsx]"
  ],
  "plugins": [
    "base-style-config"
  ],
  "rules": {
    ..
  }
}

Remember order of sets in extends is important since each new set will override rules of the previous ones.

3 . Add to the respective ESLint script task:

package.json:

  "scripts": {
    "someESlintTask": "eslint ..",
  },

if using Gradle:

  task assessSomeESLint(type: NpmTask) {
    args = [
      'run',
      'someESlintTask'
    ]
  }

Custom Regex

regex[copyright]: Eslint Regex Rules for Copyright:

It has only 1 rule to check that "Copyright (c)" is present in the file.

regex[immutable.ts]: Eslint Regex Rules for Immutable Typescript:

It has only 1 rule to check that public fields are readonly.
Inspects only .ts and .tsx files.

regex[void.function.ts]: Eslint Regex Rules for Void Function Typings:

It has only 1 rule to check that VoidFunction is used instead of () => void.
inspects only .ts and .tsx files

regex[jsx]: Set of Eslint Regex Rules for JSX: inspect only jsx and tsx files, has the following rules:

JSX code should start in its own line,
JSX code should end at its own line,
Only One JSX tag per line, , except for <span>, <a> or <i>.
No Opening Brace at the end of the line.

regex[quotes.jsx]: Eslint Regex Rules for Quotes in JSX:

It has only 1 rule to check that " are not use in jsx.
Inspects only .jsx and .tsx files.

regex[react.import]: Eslint Regex Rules for React Import:

It has only 1 rule to check that import * as React from 'react' instead of import React from 'react'.
- React exports a namespace, not a Module.

regex[no-html-entities.jsx]: Eslint Regex Rules that disallow the use of HTML entities:

It has only 1 rule to check that &abc123; or {are not use in jsx.
- Use UTF-8 characters which are "universal" and more Readable.
Inspects only .jsx and .tsx files.

regex[test]: Set of Eslint Regex Rules for Test.

It has only 1 rule to check that name of variables create with jasmine.createSpy() or jest.fn() are prefixed with mock or stub.

Some of these rule may be obsolete in the future as other "core" lint rules arise.

Mixing Regex/Rules

Due to the way eslint merge rules, it's not possible to merge Eslint Regex rules. this plugin provide [1] a mechanism for merging any set of rules (not just Regex rules [2]) => just use commas to separate rules names after plugin:base-style-config:

e.g. Mixing:

eslintrc.json:

{
  "extends": [
    "plugin:base-style-config/typescript-rules",
    "plugin:base-style-config/regex[jsx], regex[quotes.jsx]"
  ],
  "plugins": [
    "base-style-config"
  ],
  "rules": {
    ..
  }
}

{
  "extends": [
    "plugin:base-style-config/typescript-rules, regex[jsx], regex[quotes.jsx]"
  ],
  "plugins": [
    "base-style-config"
  ],
  "rules": {
    ..
  }
}

When using only one regex rule:

{
  "extends": [
    "plugin:base-style-config/typescript-rules",
    "plugin:base-style-config/regex[jsx]"
  ],
  "plugins": [
    "base-style-config"
  ],
  "rules": {
    ..
  }
}

When using more than one regex rule, must be mixed:

{
  "extends": [
    "plugin:base-style-config/typescript-rules",
    "plugin:base-style-config/regex[jsx], regex[quotes.jsx]"
  ],
  "plugins": [
    "base-style-config"
  ],
  "rules": {
    ..
  }
}

Be aware that:

If some extension has regex/required and/or regex/invalid rules will override any merging for those.
- If extending locally, re-add "plugin:base-style-config/..", e.g. .eslintrc.js has "plugin:base-style-config/regex[jsx], regex[quotes.jsx]", and src/.eslintrc.js extends .eslintrc.js and add regex[immutable.ts], then src/.eslintrc.js should use "plugin:base-style-config/regex[jsx], regex[quotes.jsx], regex[immutable.ts]".
  - this only applies to regex rules, mixing other rules have no issues, e.g. .eslintrc.js has "plugin:base-style-config/js-rules, import-rules", and src/.eslintrc.js extends .eslintrc.js and add typescript-rules, then src/.eslintrc.js may be just "plugin:base-style-config/typescript-rules".
having local regex/required and/or regex/invalid rules will override any merging for those.

[1] In the future, the Mechanism for Merging Eslint configurations will be extracted to its own eslint-plugin.
[2] For the moment, only base-style-config rules.

Errors

When using the plugin, if the following error appears for some rule:

1:1  error  Definition for rule 'some...rule' was not found   some..rule

It means the rule is not found in the version of the respective plugin.

Check devDependencies version for the set of rules using in the project, i.e. check version for eslint, eslint-plugin-import, eslint-plugin-react, eslint-plugin-react-hooks and/or @typescript-eslint/eslint-plugin

Extending/Developing

Developing

Contributing

Use it.
Share it.
Fork it.
Give it a Star ⭐.
Propose changes or improvements.
Report bugs.

Documentation

CHANGELOG.md: add information of notable changes for each version here, chronologically ordered [1].

[1] Keep a Changelog

License

MIT License

Remember

Use code style verification tools => Encourages Best Practices, Efficiency, Readability and Learnability.
Code Review everything => Encourages Functional suitability, Performance Efficiency and Teamwork.
If viable, Start testing early => Encourages Reliability and Maintainability.

Additional words

Don't forget:

Love what you do.
Learn everyday.
Learn yourself.
Share your knowledge.
Think different!.
Learn from the past, dream on the future, live and enjoy the present to the max!.
Enjoy and Value the Quest (It's where you learn and grow).

At life:

Let's act, not complain.
Be flexible.

At work:

Let's give solutions, not questions.
Aim to simplicity not intellectualism.