Eslint config Citron

Citron definition of beauty.

Debugging

If you want to list all the rules that are enabled in your eslint configuration, you can run the following command 🧑‍💻:

npx eslint --print-config file.js

If you want to test your configuration, here a playground 🛝 that can help you typescript-eslint.io

Registry change

This package has changed registry (from npm to github) so the name of the npm package has been changed. Be careful to put @gads-citron/eslint-config-citron in your package.json and your eslintrc.

To install this package a .npmrc at the root of your project or user with the github registry and your access token is needed, more information here.

Versions prior to 1.1.0 are not available on the github registry.

Code styling rules

Citron config

Citron has its own configuration which can be found here :

gads-citron/eslint-config-citron

This configuration is based on 3 majors standards :

Airbnb JavaScript Style Guide

airbnb/javascript

TypeScript ESLint

typescript-eslint/typescript-eslint

With theses two sets of rules :

• Recommend
• Recommend requiring type checking

Prettier

Prettier · Opinionated Code Formatter

We recommend to have looked to theses code styling rules.

Citron rules

max-lines

Maximum number of lines per file set to 150. Keep the code readable, force to split and organise your code

max-lines-per-function

Maximum number of lines per function set to 25. You will hate it Keep the code readable, force to split and organise your code

max-depth

Maximum block depth set to 4. Keep the code readable

• Example

  // Bad
  function foo() {
    for (;;) {
      // Nested 1 deep
      while (true) {
        // Nested 2 deep
        if (true) {
          // Nested 3 deep
          if (true) {
            // Nested 4 deep
            if (true) {
              // Nested 5 deep
            }
          }
        }
      }
    }
  }
  
  // Good
  function foo() {
    for (;;) {
      // Nested 1 deep
      while (true) {
        // Nested 2 deep
        if (true) {
          // Nested 3 deep
          if (true) {
            // Nested 4 deep
          }
        }
      }
    }
  }

max-params

Maximum number of parameters allowed in function definitions set to 3. Keep the code readable

• Example

  // Bad (4 params)
  function foo(bar, baz, qux, qxx) {
    doSomething();
  }
  
  // Good (3 params)
  function foo(bar, baz, qux) {
    doSomething();
  }

max-nested-callbacks

Maximum depth that callbacks set to 3. Keep the code readable

• Example

  // Bad
  foo1(function () {
    foo2(function () {
      foo3(function () {
        foo4(function () {
          // Do something
        });
      });
    });
  });
  
  // Good
  foo1(function () {
    foo2(function () {
      foo3(function () {
        // Do something
      });
    });
  });

complexity

Maximum cyclomatic complexity set to 10. Cyclomatic complexity is the number of decisions or path an algorithm can make.
Reducing code complexity.

• Example

  // Bad
  function a(x) {
    if (x === 1) {
      return x;
    } else if (x === 2) {
      return x - 1;
    } else if (x === 3) {
      return x - 23;
    } else if (x === 4) {
      return x + 9;
    } else if (x === 5) {
      return x + 42;
    } else if (x === 6) {
      return x + 42;
    } else if (x === 7) {
      return x + 42;
    } else if (x === 8) {
      return x + 42;
    } else if (x === 9) {
      return x + 42;
    } else if (x === 10) {
      return x + 42;
    } else {
      return 4; // 11 path
    }
  }
  
  // Good
  function a(x) {
    if (x === 1) {
      return x;
    } else if (x === 2) {
      return x - 1;
    } else if (x === 3) {
      return x - 23;
    } else if (x === 4) {
      return x + 9;
    } else {
      return 4; // 5 path
    }
  }

import/extensions

Omit the file extension only for typescript files (.ts). To avoid confusion on import.

• Example Given the following folder structure:

  ├── user
  │   ├── user.model.ts
  │   ├── user.database.json
  

  The import statement will be :

  import { User } from './user/user.model';
  import users from './user/user.database.json';

import/no-default-export

Only named export are accepted. Name are consistent throughout all files.

• Example

  // Bad
  const foo = 'bar';
  export default foo;
  
  // Good
  export const foo = 'bar';

@typescript-eslint/no-explicit-any

This rule doesn't allow any types to be defined. Using the any type defeats the purpose of using TypeScript.

• Example

  // Bad
  const toto: any = 'toto';
  
  // Good
  const toto: string = 'toto';

Disabled rules

• no-underscore-dangle

• no-restricted-syntax This rule only apply on LabeledStatement and WithStatement

• @typescript-eslint/no-misused-promises This rule only apply on checksConditionals

• no-await-in-loop
  Can be dangerous, force to use Promise.All on too large arrays.

• no-use-before-define - Only for functions
  For more clarity, allow use of function before definition.

  In a file, where a function or a class is export who use others functions define in this file but not exported, those unexported functions can be define after the exported one for more clarity so when the file is open, the main exported function/class is shown in first.

• no-useless-constructor
  Allows dependency injections into classes with empty constructors.

Ressources

• Eslint - Linter used
• Citron eslint config - Citron Github repository with all the config
• JavaScript Style Guide - A mostly reasonable approach to JavaScript By Harrison Shoff of AirBnb