Skip to content

Latest commit

 

History

History
281 lines (213 loc) · 7.51 KB

README.md

File metadata and controls

281 lines (213 loc) · 7.51 KB

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 :

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