ESLint Configurations for the DevExtreme Source Code

This repository collects ESLint configurations that enforce the code style used by the DevExtreme development team. These configurations are based on the Airbnb JavaScript Style Guide and cover most frequently encountered cases.

Note: Adding new configurations is possible but discouraged. Double-check that none of the existing configurations fits for your case before you add a new configuration.

List of Configurations

1. TypeScript
2. JavaScript
3. Spell Check
4. Renovation Declarations
5. Jest Tests
6. QUnit Tests
7. TestCafe Tests

TypeScript

• Usage Add the following line to your .eslintrc file:

  'extends': ['devextreme/typescript']
  

• Required plugins

  • @typescript-eslint

• Extended plugins and configurations

  • plugin:@typescript-eslint/recommended
  • airbnb-typescript

JavaScript

• Usage Add the following line to your .eslintrc file:

  'extends': ['devextreme/javascript']
  

• Extended plugins and configurations

  • airbnb-base

Spell Check

Lists words that the spell check should ignore.

• Usage Add the following line to your .eslintrc file:

  "extends": ["devextreme/spell-check"]
  

• Required plugins

  • spellcheck

Renovation Declarations

• Usage Add the following line to your .eslintrc file:

  'extends': ['devextreme/renovation-declarations']
  

• Overrides

  • Allow devDependencies to be imported when in development mode:

    'import/no-extraneous-dependencies': ['error', { devDependencies: true }]
    

  • Allow usage of 'non-null-assertion' for the declaration's ref objects:

    'rulesdir/no-non-null-assertion': 'error'
    '@typescript-eslint/no-non-null-assertion': 'off'
    

  • Disallow usage of spread/rest operators in the JSX markup. Angular does not support these operators in templates:

    'rulesdir/no-jsx-spreading': 'error'
    

  • Allow two classes (component class and props class) in one file:

    'max-classes-per-file': ['error', 2]
    

  • Disable React dependency validation. Declarations do not require this dependency, since they are not proper React components.

    'react/react-in-jsx-scope': ['off']
    

  • Allow function calls in the ternary operator.

     '@typescript-eslint/no-unused-expressions': ['error', { 'allowShortCircuit': true, ;'allowTernary': true }]
    

Jest Tests

• Usage Add the following line to your .eslintrc file:

  'extends': ['devextreme/jest']
  

• Environment

  • node (Node.js global variables and scope)
  • jest (Jest global variables)

• Required plugins

  • jest
  • jest-formatting

• Extended plugins

  • plugin:jest/recommended
  • plugin:jest-formatting/recommended

• Overrides

  • Allow the use of devDependencies in the tests:

    'import/no-extraneous-dependencies': ['error', { devDependencies: true }]
    

  • Disable props validation for temporary JSX components created during the tests:

    'react/prop-types': ['error', { skipUndeclared: true }]
    

  • Allow the use of props spreading in the temporary JSX components:

    'react/jsx-props-no-spreading': 'off'
    

  • Allow defining the widget's accessKey attribute:

    'jsx-a11y/no-access-key': 'off'
    

  • '@typescript-eslint/explicit-function-return-type': 'off'
    

  • '@typescript-eslint/no-explicit-any': 'off'
    

  • '@typescript-eslint/no-magic-numbers': 'off'
    

  • '@typescript-eslint/no-unsafe-return': 'off'
    

  • '@typescript-eslint/no-unsafe-member-access': 'off'
    

  • 'no-restricted-globals': 'off'
    

QUnit Tests

• Usage Add the following line to your .eslintrc file:

  'extends': ['devextreme/qunit']
  

• Environment

  • qunit (QUnit global variables)
  • browser (Browser global variables)

• Required plugins

  • qunit

• Extended plugins

  • plugin:qunit/recommended
  • plugin:qunit/two

• Overrides

  'qunit/no-arrow-tests': 'error',
  'qunit/no-commented-tests': 'error',
  'qunit/no-identical-names': 'warn',
  'qunit/no-global-module-test': 'off',
  'qunit/require-expect': 'off',
  'qunit/resolve-async': 'off'
  

TestCafe Tests

• Usage Add the following line to your .eslintrc file:

  'extends': ['devextreme/testcafe']
  

• Overrides

  • Allow using any types of dependencies:

    'import/no-extraneous-dependencies': 'off'
    

  • Allow modifying parameters in event handlers to test these use cases:

    'no-param-reassign': ['error', { 'props': false }],
    

  • Allow await inside of loops. This is a common case for TestCafe tests.

    'no-await-in-loop': 'off'
    

  • '@typescript-eslint/no-explicit-any': 'off'
    

  • '@typescript-eslint/explicit-function-return-type': 'off'
    

  • '@typescript-eslint/promise-function-async': 'off'
    

  • '@typescript-eslint/no-magic-numbers': 'off'
    

  • '@typescript-eslint/no-unsafe-return': 'off'
    

  • '@typescript-eslint/no-unsafe-member-access': 'off'
    

  • 'no-restricted-globals': 'off'
    

• Environment

  • node (Node.js global variables and scope)
  • browser (Browser global variables)
  • jquery (jQuery global variables)

• Additional global variables

  • test
  • fixture