eslint-config-vylda-typescript-react

Enhances Vylda's ESLint config with TypeScript and React support

Setup

1. Install dependencies

npm install eslint eslint-import-resolver-typescript eslint-config-vylda-typescript-react --save-dev

2. Configure ESLint

create .eslint.config.mjs file in project root

// eslint.config.mjs
import getConfig, { tsFiles } from "eslint-config-vylda-typescript-react";

const baseDir = import.meta.dirname;

const eslintConfig = [
  ...getConfig(baseDir),
  {
    files: tsFiles,
    name: "my-rules",
    rules: {
      // Add custom rules here
    },
    settings: {
      "import/resolver": {
        alias: {
          map: [
            ["@", "./src"],
            ["@assets", "./src/assets"],
            ["@utils", "./src/utils"],
          ],
        },
      },
    },
  },
];

3. Run ESLint

Open a terminal to the root of your project, and run the following command:

npx eslint .

or

npx eslint ./src/

ESLint will lint all .cjs, .cts, .js, .jsx, .mjs, .mts, .ts and .tsx files within the current or ./src folder , and output results to your terminal.

You can also get results in realtime inside most IDEs via a plugin.

Customization

You can customize all rules with rules property in the eslint.config.mjs file. You can also add custom rules to the rules property.

Customize extensions for ESLint import rules

You can customize extensions for ESLint import rules by using getConfig function. You can extend these default extensions and dependecies with your own extensions. It is used for import plugin settings, import/extensions and import/no-extraneous-dependencies rules.

Default values

// default file pattern for all rules (https://eslint.org/docs/latest/use/configure/configuration-files#configuration-objects)
export const files = ["**/*.{cjs,cts,js,jsx,mjs,mts,ts,tsx}"];

// default file pattern for refresh config (https://github.com/ArnaudBarre/eslint-plugin-react-refresh#readme)
export const refreshFiles = [ '**/*.jsx', '**/*.tsx' ];

// default file pattern for TypeScript rules only
export const tsFiles = ["**/*.{cts,mts,ts,tsx}"];

// default plugins used in this config
export const plugins = {
  "@stylistic": stylisticPlugin,
  "@typescript-eslint": tsESLint.configs.recommendedTypeCheckedOnly.plugins["@typescript-eslint"],
  import: importPlugin,
  'jsx-a11y': jsxA11yPlugin,
  n: nodePlugin,
  perfectionist,
  react: reactPlugin,
  'react-hooks': reactHooks,
  'react-refresh': reactRefresh,
};

// default value for import/extension module settings (https://github.com/import-js/eslint-plugin-import?tab=readme-ov-file#importextensions)
export const defaultImportExtensions = ['.tsx', '.js', '.jsx', '.mjs', '.mts', '.ts'];

// default value for import/resolver settings with node resolution (https://github.com/import-js/eslint-plugin-import?tab=readme-ov-file#resolvers)
export const defaultImportResolverNodeExtensions = [
  '.tsx', '.js', '.jsx', '.json', '.mjs', '.mts', '.ts',
];

// default value for import/extensions rule granular option (https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/extensions.md#rule-details)
export const defaultImportExtensionsRuleGranularOption = {
  js: 'never',
  json: 'always',
  svg: 'always',
  ts: 'never',
  jsx: 'never',
  tsx: 'never',
};

// default value for import/no-extraneous-dependencies rule devDependencies option (https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/no-extraneous-dependencies.md#rule-details)
export const defaultImportNoExtraneousDependenciesDevDependencies = [
  "test/**",
  "tests/**",
  "spec/**",
  "**/__tests__/**",
  "**/__mocks__/**",
  "test.{js,jsx}",
  "test.{ts,tsx}",
  "test-*.{js,jsx}",
  "test-*.{ts,tsx}",
  "**/*{.,_}{test,spec}.{js,jsx}",
  "**/*{.,_}{test,spec}.{ts,tsx}",
  "**/jest.config.js",
  "**/jest.config.ts",
  "**/jest.setup.js",
  "**/jest.setup.ts",
  "**/vue.config.js",
  "**/vue.config.ts",
  "**/webpack.config.js",
  "**/webpack.config.ts",
  "**/webpack.config.*.js",
  "**/webpack.config.*.ts",
  "**/webpack.config.mjs",
  "**/webpack.config.*.mjs",
  "**/rollup.config.js",
  "**/rollup.config.ts",
  "**/rollup.config.*.js",
  "**/rollup.config.*.ts",
  "**/gulpfile.js",
  "**/gulpfile.ts",
  "**/gulpfile.*.js",
  "**/gulpfile.*.ts",
  "**/Gruntfile{,.js}",
  "**/Gruntfile{,.ts}",
  "**/protractor.conf.js",
  "**/protractor.conf.ts",
  "**/protractor.conf.*.js",
  "**/protractor.conf.*.ts",
  "**/karma.conf.js",
  "**/karma.conf.ts",
  "**/eslint.config.mjs",
  "./rules/*.mjs",
  "**/vitest.config.mjs",
  "**/vitestSetup.mjs",
  "**/tailwind.config.mjs",
  "**/vite.config.js",
  "**/vite.config.ts",
  "**/vite.config.mjs",
  "**/vite.config.*.js",
  "**/vite.config.*.ts",
  "**/vite.config*.mjs",
];

All default values are optional and can be overridden in the eslint.config.mjs file.

Example of ESLint config with custom extensions

// eslint.config.mjs
import
  getConfig,
  {
    defaultImportExtensions,
    defaultImportExtensionsRuleGranularOption,
    defaultImportResolverNodeExtensions,
    defaultImportNoExtraneousDependenciesDevDependencies,
    files as defaultFiles,
    plugins as defaultPlugins,
    tsFiles as defaultTsFiles,
  } from 'eslint-config-vylda-typescript-react';
import myPlugin from 'path-to-my-plugin';

const baseDir = import.meta.dirname;

const importExtensions = [
  ...defaultImportExtensions,
  '.jsm',
  '.tsm',
];

const importExtensionsRuleGranularOption = {
  ...defaultImportExtensionsRuleGranularOption,
  jsm: 'never',
  tsm: 'never',
};

const importResolverNodeExtensions = [
  ...defaultImportResolverNodeExtensions,
  '.jsm',
  '.tsm',
];

const importNoExtraneousDependenciesDevDependencies = [
  ...defaultImportNoExtraneousDependenciesDevDependencies,
  '**/my-plugin.jsm',
];

const files = [
  ...defaultFiles,
  '**/*.jsm',
  '**/*.tsm',
];

const plugins = {
  ...defaultPlugins,
  'my/plugin': myPlugin,
};

const tsFiles = [
  ...defaultTsFiles,
  '**/*.tsm',
];

const rjConfig = getConfig(
  baseDir,
  {
    files,
    importExtensions,
    importExtensionsRuleGranularOption,
    importResolverNodeExtensions,
    importNoExtraneousDependenciesDevDependencies
    plugins,
    tsFiles,
  },
);

const config = [
  ...rjConfig,
  {
    files,
    name: 'my/plugin',
    rules: {
      "my/plugin/rule": "error",
    },
  },
];

export default config;

Partial ESLint config

You can also use the package as a partial ESLint config. This is useful if you want to use only some of the rules from the package.

If you can use import plugin, you must use getImportConfig function to get the config for the import plugin and import plugins object. This function uses the same default values as the package, except files and plugins in option object.

// eslint.config.mjs
import {
   barrels, barrelsFiles, bestPractices, defaultTs, es6,
   getImportConfig, getLanguageOptions, files, ignores, mapFiles,
   plugins, react, refresh, refreshFiles
} from 'eslint-config-vylda-typescript-react';

const baseDir = import.meta.dirname;

const configs = [
  bestPractices,
  defaultTs,
  es6,
  react,
  // you can add custom options object to the function getConfig
  // optional parameters: importExtensions, importExtensionsRuleGranularOption, importResolverNodeExtensions,importNoExtraneousDependenciesDevDependencies
  getImportConfig(baseDir);
];

const configWithFiles = mapFiles(configs, files);
const refreshConfigsWithFiles = mapFiles(refresh, refreshFiles);
const barrelsWithFiles = mapFiles(barrels, barrelsFiles);

const config = [
  {
    languageOptions: getLanguageOptions(baseDir),
    name: 'typescript-eslint/base',
    plugins,
  },
  ...configWithFiles,
  ...refreshConfigsWithFiles,
  ...barrelsWithFiles,
  ...ignores,
  {
    files,
    name: 'typescript-eslint/partial',
    rules: {
      "no-console": "warn",
    },
  },
]

export default config;

What you can import from this package

All rules are without files property, so you can use them as a partial ESLint config. You can use files property to specify the files for the rule. You can also use mapFiles function to map files for all rules.

• default getConfig - default helper for getting ESLint config with custom options (source)
• a11y - ESLint config with rules for accessibility in React components (source, documentation)
• allReactConfigs - all used ESLint configs for React (source)
• barrels - ESLint config with rules for barrel files (source, documentation)
• barrelsFiles - default file patterns for barrel files (default values, documentation)
• bestPractices - ESLint config with rules for best practices (source, documentation (js), documentation (stylistic))
• customs - ESLint config with my custom rules (source)
• defaultImportExtensions - default value for import/extension module settings (default values, documentation)
• defaultImportExtensionsRuleGranularOption - default value for import/resolver settings with node resolution (default values, documentation)
• defaultImportResolverNodeExtensions - default value for import/no-extraneous-dependencies rule devDependencies option (default values, documentation)
• defaultImportNoExtraneousDependenciesDevDependencies - default value for import/extensions rule granular option (default values, documentation)
• defaultTs - ESLint config with rules for TypeScript (source, documentation)
• errors - ESLint config with rules for errors (source, documentation)
• es6 - ESLint config with rules for ES6 (source, documentation (js), documentation (stylistic))
• files - default file patterns for all rules (default values, documentation)
• getLanguageOptions - ESLint helper for ESLint language options with Typescript support (source)
• getReactConfig - ESLint helper for ESLint config with React support (source)
• getTsImportConfig - function to get ESLint config for Typescript import plugin (source)
• hooks - ESLint config with rules for React hooks (source, documentation)
• ignores - ESLint config with global ignored folder patterns (default values, documentation)
• mapFiles - helper function to map files for all configs (source)
• node - ESLint config with rules for Node.js (source, documentation)
• perfectionist - ESLint config with rules for perfectionist (source, documentation)
• plugins - default plugins used in this config (source)
• plus - ESLint config with rules for extended rules (source, documentation)
• react - ESLint config with rules for React (source, documentation)
• reactConfigs - ESLint configs for Typescript React without refresh rules (source)
• reactPerfectionist - ESLint config with rules for React and Typescript perfectionist (source),
• reactPlugins - ESLint plugins used for React only (source)
• reactStylistic - ESLint config with stylistic rules for React (source, documentation)
• reactTsOff - Disabled React rules for incompatibilty or Typescript cheking (source)
• reactVanillaPlugins - default plugins used in React config (source)
• refresh - ESLint config with rules for React refresh (source, documentation)
• refreshFiles - default file patterns for React refresh config (source)
• strict - ESLint config with rules for strict mode (source)
• stylistic - ESLint config with stylistic rules (source)
• tsConfig - ESLint config with rules for TypeScript configuration (source)
• tsFiles - default file patterns for TypeScript rules only (default values, documentation)
• tsPlugins - default Typescript plugins only used in this config (source)
• tsStrict - ESLint config with rules for strict TypeScript mode (source, documentation)
• tsStylistic - ESLint config with Typescript stylistic rules (source, documentation)
• tsVanillaPlugins - Vanilla and Typescript plugins used in this config (source)
• vanillaConfigs - Eslint configuration for vanilla javascript only (without import rules) (source)
• vanillaPlugins - default plugins used in this config for vanilla javascript (source)
• variables - ESLint config with rules for variables (source)

Additional Documentation

• Changelog.md

Credits

Authored and maintained by Vilda Lipold (dovolena.cz)

License

Open source licensed as MIT.