eslint-config-vylda-typescript

Enhances Regiojet's ESLint config with TypeScript support

Setup

1. Install dependencies

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

2. Configure ESLint

create .eslint.config.mjs file in project root

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

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, .js, .jsx, mjs and .ts 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,mjs,mts,ts}"];

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

// default plugins used in this config
export const plugins = {
  "@stylistic": stylisticPlugin,
  "@typescript-eslint": tsESLint.configs.recommendedTypeCheckedOnly.plugins["@typescript-eslint"],
  import: importPlugin,
  n: nodePlugin,
  perfectionist,
};

// default value for import/extension module settings (https://github.com/import-js/eslint-plugin-import?tab=readme-ov-file#importextensions)
export const defaultImportExtensions = [".js", ".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 = [
  ".js",
  ".json",
  ".mjs",
  ".mts",
  ".svg",
  ".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",
};

// 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 = [
  'espree',
  "test/**",
  "tests/**",
  "spec/**",
  '@testing-library/**',
  "**/__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",
];

// files that are not parsed by typescript parser (js configs)
export const nonTsConfigFiles = ['eslint.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,
    tsFiles as defaultTsFiles,
    plugins as defaultPlugins,
  } from 'eslint-config-vylda-typescript';
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, nonTsConfigFiles,
   nonTsConfigFilesRule, plugins,
} from 'eslint-config-vylda-typescript';

const baseDir = import.meta.dirname;

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

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

const myNonTsFiles = [
  ...nonTsConfigFiles,
  'vitest.config.js',
];

consz myNonTsFilesRule = {
  ...nonTsConfigFilesRule,
  files: myNonTsFiles,
},

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

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)
• 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))
• constants - Constants used for some rules (source, documentation)
• 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)
• defaultImportNoExtraneousDependenciesDevDependencies - default value for import/extensions rule granular option (default values, documentation)
• defaultImportResolverNodeExtensions - default value for import/no-extraneous-dependencies rule devDependencies 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 pattern for all rules (default values, documentation)
• getImportConfig - function to get ESLint config for import plugin (source)
• getLanguageOptions - ESLint helper for ESLint language options with Typescript support (source)
• 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)
• nonTsConfigFiles - Array of non typescript files for nonTsConfigFilesRule
• nonTsConfigFilesRule - ESLint rule for non-TypeScript files
• 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)
• 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 pattern 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)
• tsVariables - ESLint config with typescript variables rules (extends from `variables ) (source, documentation)
• 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 vanilla variables (source)

Additional Documentation

• Changelog.md

Credits

Authored and maintained by Vilda Lipold (dovolena.cz, studentagency.cz, regiojethotels.cz, jazykovepobyty.cz and more)

License

Open source licensed as MIT.