eslint-config-xbsoftware

Description

XBSoftware's ESLint rules. Package provides configuration presets to extend:

eslint-config-xbsoftware/javascript

Basic configuration for JavaScript projects. It doesn't include any framework-specific rules

eslint-config-xbsoftware/typescript

Basic configuration for TypeScript projects. Includes specific rules for TypeScript files

eslint-config-xbsoftware/react

Specific configuration for React projects

eslint-config-xbsoftware/react-typescript

Additional configuration for React TypeScript projects

Installation

Install eslint-config-xbsoftware:

npm install --save-dev eslint-config-xbsoftware

or

yarn add -D eslint-config-xbsoftware

Then, add a configuration to the "extends" array in your .eslintrc.* file. Make sure to put it first, so it adds the chance to override the configuration.

Configuration examples

Basic configuration for JavaScript project

{
  "extends": [
    "xbsoftware/javascript"
  ]
}

Basic configuration for TypeScript project

{
  "extends": [
    "xbsoftware/typescript"
  ]
}

Basic configuration for React JavaScript project

{
  "extends": [
    "xbsoftware/javascript",
    "xbsoftware/react"
  ]
}

Basic configuration for React TypeScript project

{
  "extends": [
    "xbsoftware/typescript",
    "xbsoftware/react",
    "xbsoftware/react-typescript"
  ]
}

Experimental rules

xbsoftware/typescript: TypeScript's consistent types

TypeScript team highly recommends to use "import/export type" for type definitions. More details: https://devblogs.microsoft.com/typescript/announcing-typescript-3-8/#type-only-imports-exports

Use ESLINT_XBSOFTWARE_CONFIG_RULE_CONSISTENT_TYPE=true variable to enable the rules:

{
    "@typescript-eslint/consistent-type-imports": "error",
    "@typescript-eslint/consistent-type-exports": "error"
}

Both rule are autofixable and replace import/export to import/export type if it's possible. More details: @typescript-eslint/consistent-type-imports, @typescript-eslint/consistent-type-exports

Migration guide

from 4.x to 5.x

Replace require('eslint-config-xbsoftware') with extends

Examples:

Case 1

4.x

// .eslintrc.js
const xbsConfigPathBuilder = require('eslint-config-xbsoftware');
const {PLUGINS} = require('eslint-config-xbsoftware/constants');

module.exports = {
    extends: [
        xbsConfigPathBuilder({
            plugins: [
                PLUGINS.CORE
            ]
        })
    ]
}

5.x

// .eslintrc.js
module.exports = {
    extends: [
        'xbsoftware/javascript'
    ]
}

Case 2

4.x

// .eslintrc.js
const xbsConfigPathBuilder = require('eslint-config-xbsoftware');
const {PLUGINS} = require('eslint-config-xbsoftware/constants');

module.exports = {
    parser: '@typescript-eslint/parser',
    extends: [
        xbsConfigPathBuilder({
            plugins: [
                PLUGINS.CORE,
                PLUGINS.TYPESCRIPT,
            ]
        })
    ]
}

5.x

// .eslintrc.js
module.exports = {
    parser: '@typescript-eslint/parser',
    extends: [
        'xbsoftware/typescript'
    ]
}

Case 3

4.x

// .eslintrc.js
const xbsConfigPathBuilder = require('eslint-config-xbsoftware');
const {PLUGINS} = require('eslint-config-xbsoftware/constants');

module.exports = {
    parser: '@typescript-eslint/parser',
    extends: [
        xbsConfigPathBuilder({
            plugins: [
                PLUGINS.CORE,
                PLUGINS.TYPESCRIPT,
                PLUGINS.REACT
            ]
        })
    ]
}

5.x

// .eslintrc.js
module.exports = {
    parser: '@typescript-eslint/parser',
    extends: [
        'xbsoftware/typescript',
        'xbsoftware/react',
        'xbsoftware/react-typescript'
    ]
}

Replace require('eslint-config-xbsoftware/constants') with equivalent overridden rules

Note: ENVS.DEVELOPMENT/ENVS.PRODUCTION were replaced with standard variable NODE_ENV. Production configuration mode can be enabled by NODE_ENV=production

Examples

Case 1

4.x

// .eslintrc.js
const xbsConfigPathBuilder = require('eslint-config-xbsoftware');
const {INDENT, QUOTES, PLUGINS, ENVS} = require('eslint-config-xbsoftware/constants');

const isDevelopment = process.env.NODE_ENV !== 'production';

module.exports = {
    parser: '@typescript-eslint/parser',
    extends: [
        xbsConfigPathBuilder({
            env: isDevelopment
                ? ENVS.DEVELOPMENT
                : ENVS.PRODUCTION,
            config: {
                indent: INDENT.SPACES_2,
                quotes: QUOTES.SINGLE
            },
            plugins: [
                PLUGINS.CORE,
                PLUGINS.TYPESCRIPT
            ]
        })
    ]
}

5.x

// .eslintrc.js

module.exports = {
    parser: '@typescript-eslint/parser',
    extends: [
        'xbsoftware/typescript'
    ]
}

Case 2

4.x

// .eslintrc.js
const xbsConfigPathBuilder = require('eslint-config-xbsoftware');
const {INDENT, QUOTES, PLUGINS, ENVS} = require('eslint-config-xbsoftware/constants');

module.exports = {
    extends: [
        xbsConfigPathBuilder({
            env: ENVS.PRODUCTION,
            config: {
                indent: INDENT.SPACES_4,
                quotes: QUOTES.DOUBLE
            },
            plugins: [
                PLUGINS.CORE
            ]
        })
    ]
}

5.x

// .eslintrc.js
process.env.NODE_ENV = 'production'; // enables strict production mode
const {rules} = require('eslint-config-xbsoftware/core');

module.exports = {
    extends: [
        'xbsoftware/javascript'
    ],
    rules: {
        indent: [rules.indent[0], 4, rules.indent[2]],
        quotes: [rules.quotes[0], 'double', rules.quotes[2]],
    }
}

Case 3

4.x

// .eslintrc.js
const xbsConfigPathBuilder = require('eslint-config-xbsoftware');
const {INDENT, QUOTES, PLUGINS, ENVS} = require('eslint-config-xbsoftware/constants');

const isDevelopment = process.env.NODE_ENV !== 'production';

module.exports = {
    parser: '@typescript-eslint/parser',
    extends: [
        xbsConfigPathBuilder({
            env: isDevelopment
                ? ENVS.DEVELOPMENT
                : ENVS.PRODUCTION,
            config: {
                indent: INDENT.TAB,
                quotes: QUOTES.DOUBLE
            },
            plugins: [
                PLUGINS.CORE,
                PLUGINS.TYPESCRIPT,
                PLUGINS.REACT
            ]
        })
    ]
}

5.x

// .eslintrc.js
const {rules: coreRules} = require('eslint-config-xbsoftware/core');
const {rules: reactRules} = require('eslint-config-xbsoftware/react');

const CUSTOM_INDENT = 'tab';

module.exports = {
    parser: '@typescript-eslint/parser',
    extends: [
        'xbsoftware/typescript',
        'xbsoftware/react',
        'xbsoftware/react-typescript'
    ],
    rules: {
        '@typescript-eslint/quotes': [coreRules.quotes[0], 'double', rules.quotes[2]],
        '@typescript-eslint/indent': [coreRules.indent[0], CUSTOM_INDENT, rules.indent[2]],
        'react/jsx-indent': [reactRules['react/jsx-indent'][0], CUSTOM_INDENT],
        'react/jsx-indent-props': [reactRules['react/jsx-indent-props'][0], CUSTOM_INDENT]
    }
}