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.

Legacy Airbnb presets are vendored inside this package (airbnb-config-legacy), so you no longer need to install eslint-config-airbnb-base or eslint-config-airbnb-typescript.

Required packages

• eslint: ^10.14.0

Each configuration has its own entry point, such as eslint-config-devextreme/typescript. Import only the configurations you use: an entry point loads only the plugins of its configuration.

List of Configurations

1. TypeScript
2. JavaScript
3. Spell Check
4. Jest Tests
5. QUnit Tests
6. TestCafe Tests
7. React
8. Angular
9. Vue
10. jQuery
11. Stylelint

TypeScript

• Usage Add the following lines to your eslint.config.mjs file:

  import typescript from 'eslint-config-devextreme/typescript';
  
  export default [
    ...typescript,
  ];

  The configuration applies to .ts and .tsx files and includes rules that need type information. It reads tsconfig.json from the folder where you run ESLint.

• Required packages

  • @typescript-eslint/eslint-plugin
  • @typescript-eslint/parser
  • @stylistic/eslint-plugin
  • eslint-plugin-import

• Extended plugins and configurations

  • plugin:@typescript-eslint/recommended

JavaScript

• Usage Add the following lines to your eslint.config.mjs file:

  import javascript from 'eslint-config-devextreme/javascript';
  
  export default [
    ...javascript,
  ];

• Required packages

  • eslint-plugin-import
  • @stylistic/eslint-plugin

Spell Check

Lists words that the spell check should ignore.

• Usage Add the following lines to your eslint.config.mjs file:

  import spellCheck from 'eslint-config-devextreme/spell-check';
  
  export default [
    ...spellCheck,
  ];

• Required packages

  • eslint-plugin-spellcheck

Jest Tests

• Usage Add the following lines to your eslint.config.mjs file:

  import jest from 'eslint-config-devextreme/jest';
  
  export default [
    ...jest,
    {
      settings: {
        jest: {
          version: 29, // your Jest version
        },
      },
    },
  ];

• Required packages

  • eslint-plugin-jest
  • eslint-plugin-import

• Extended plugins

  • jestPlugin.configs['flat/recommended']

QUnit Tests

• Usage Add the following lines to your eslint.config.mjs file:

  import qunit from 'eslint-config-devextreme/qunit';
  
  export default [
    ...qunit,
  ];

• Required packages

  • eslint-plugin-qunit

• Extended plugins

  • eslintPluginQunitRecommended.plugins.qunit

TestCafe Tests

• Usage Add the following lines to your eslint.config.mjs file:

  import testcafe from 'eslint-config-devextreme/testcafe';
  
  export default [
    ...testcafe,
  ];

• Required packages

  • @typescript-eslint/eslint-plugin
  • @stylistic/eslint-plugin

React

• Usage Add the following lines to your eslint.config.mjs file:

  import react from 'eslint-config-devextreme/react';
  
  export default [
    ...react,
    {
      settings: {
        react: {
          version: '18.2', // your React version
        },
      },
    },
    {
      files: ['**/*.ts', '**/*.tsx'],
      languageOptions: {
        parserOptions: {
          project: './tsconfig.json',
          tsconfigRootDir: import.meta.dirname,
        },
      },
    },
  ];

  The rules for .ts and .tsx files need type information, so point project to your tsconfig.json. ESLint skips .jsx files that no configuration lists: if your project has them, add { files: ['**/*.jsx'] } to the array.

• Required packages

  • eslint-plugin-react
  • eslint-plugin-react-perf
  • eslint-plugin-jsx-a11y
  • eslint-plugin-no-only-tests
  • eslint-plugin-import
  • @typescript-eslint/eslint-plugin
  • @typescript-eslint/parser
  • @stylistic/eslint-plugin

Angular

• Usage Add the following lines to your eslint.config.mjs file:

  import angular from 'eslint-config-devextreme/angular';
  
  export default [
    ...angular,
  ];

  The configuration includes the TypeScript configuration for .ts and .tsx files.

• Required packages

  • eslint-plugin-no-only-tests
  • @typescript-eslint/eslint-plugin
  • @typescript-eslint/parser
  • @stylistic/eslint-plugin
  • eslint-plugin-import

Vue

• Usage Add the following lines to your eslint.config.mjs file:

  import vue from 'eslint-config-devextreme/vue';
  
  export default [
    ...vue,
  ];

• Required packages

  • eslint-plugin-vue
  • eslint-plugin-no-only-tests
  • @typescript-eslint/eslint-plugin
  • @stylistic/eslint-plugin

jQuery

• Usage Add the following lines to your eslint.config.mjs file:

  import jquery from 'eslint-config-devextreme/jquery';
  
  export default [
    ...jquery,
  ];

  The configuration includes the JavaScript configuration.

• Required packages

  • eslint-plugin-no-only-tests
  • eslint-plugin-import
  • @stylistic/eslint-plugin

Stylelint

A Stylelint configuration for CSS files.

• Usage Add the following lines to your stylelint.config.mjs file:

  import stylelintConfig from 'eslint-config-devextreme/stylelintrc';
  
  export default stylelintConfig;

• Required packages

  • stylelint: ^18.0.0
  • stylelint-config-standard