eslint-config-typedigital

typedigital JavaScript style guide


Keywords
eslint, coding, rules, style, guide, typedigital, react, react-native, jsx, js
License
Unlicense
Install
npm install eslint-config-typedigital@2.4.0

Documentation

@typedigital/eslint-config

code style typedigital npm Conventional Commits

Installation

npm i @typedigital/eslint-config --save-dev

ESLint 8 support

Since version 7.0.0 we updated our used plugins and are supporting ESLint 8. Note that the peer-dependency eslint has to be greater or equal v8.0.0.

Configurations

@typedigital - the base config

To use our eslint coding guidelines add an .eslintrc to the project's root directory with following content:

{
    "extends": [
        // base rule set
        "@typedigital/eslint-config"
    ],
    "env": {
        // add the environment you use - refer to https://eslint.org/docs/user-guide/configuring/language-options#using-configuration-files
        "node": true
    },
    // ignore configs in other directories
    "root": true
}

This will tell eslint to use our basic configuration for JavaScript projects.

@typedigital/eslint-config/react

Additional rules for React development. To add them to your project adjust your .eslintrc like this:

{
    "extends": [
        "@typedigital/eslint-config",
        "@typedigital/eslint-config/react"
    ],
    "root": true
}

@typedigital/eslint-config/react-native

Additional rules for React Native development. Should be used with typedigital/react rules. To add them to your project adjust your .eslintrc like this:

{
    "extends": [
        "@typedigital/eslint-config",
        "@typedigital/eslint-config/react",
        "@typedigital/eslint-config/react-native"
    ],
    "root": true
}

@typedigital/eslint-config/typescript

Due to the fact that TypeScript has gained so much popularity in the last few years and most of our new developments are based on TypeScript, we decided to extend our code guidelines. To use our TypeScript configuration you just need to add the following to your .eslintrc:

{
    "extends": [
        "@typedigital/eslint-config",
        "@typedigital/eslint-config/typescript",
    ],
    "parserOptions": {
      "project": ["./tsconfig.json"]
    },
    "parser": "@typescript-eslint/parser",
    "root": true
}

Note that you can use the React and React Native configuration with this configuration, too. Just add the other configurations after "@typedigital/eslint-config/typescript".

@typedigital/eslint-config/styled-components

Additional rules for Styled Components development. To add them to your project adjust your .eslintrc like this:

{
    "extends": [
        "@typedigital/eslint-config",
        "@typedigital/eslint-config/styled-components",
    ],
    "root": true
}

Recommendations

Sometimes, there is a legitimate use-case to disable a specific rule. You can disable a rule for the current line like this

// eslint-disable-line rule-code

where rule-code is the code that is displayed along the error message.

You can also override specific rules in your .eslintrc, this will then override it for the whole project. If you don't agree with a rule, please don't just disable the rule - create an issue and let us discuss the pros and cons.

License

Unlicense