eslint-config-vylda-vanilla

Basic configuration for ESLint Vanilla JavaScript projects.

Setup

1. Install package

npm install eslint eslint-config-vylda-vanilla --save-dev

Dependecy for resolving aliases is instaled automatically

2. Configure ESLint

create eslint.config.mjs file in project root

// eslint.config.mjs
import vyldaConfig, { files } from 'eslint-config-vylda-vanilla';

const eslintConfig = [
  ...vyldaConfig,
  {
    files,
    name: 'my-rules',
    rules: {
      // Add custom rules here
    },
    settings: {
      'import/resolver': {
        alias: {
          map: [
            ['@', './src'],
            ['@assets', './src/assets'],
            ['@utils', './src/utils'],
          ],
        },
      },
    },
  },
];

export default eslintConfig;

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 .js, .cjs, and .mjs files within the current 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 = ['**/*.{js,cjs,mjs}'];

// default plugins used in this config
export const plugins = {
  '@stylistic': stylisticJsPlugin,
  'import': importPlugin,
  n: nodePlugin,
};

// 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'];

// 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', '.svg'];

// 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',
};

// 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/**', // espree parser
  'test/**', // tape, common npm pattern
  'tests/**', // also common npm pattern
  'spec/**', // mocha, rspec-like pattern
  '@testing-library/**', // testing-library patterns
  '**/__tests__/**', // jest pattern
  '**/__mocks__/**', // jest pattern
  'test.{js,jsx}', // repos with a single test file
  'test-*.{js,jsx}', // repos with multiple top-level test files
  '**/*{.,_}{test,spec}.{js,jsx}', // tests where the extension or filename suffix denotes that it is a test
  '**/jest.config.js', // jest config
  '**/jest.setup.js', // jest setup
  '**/vue.config.js', // vue-cli config
  '**/webpack.config.js', // webpack config
  '**/webpack.config.*.js', // webpack config
  '**/webpack.config.mjs', // webpack config
  '**/webpack.config.*.mjs', // webpack config
  '**/rollup.config.js', // rollup config
  '**/rollup.config.*.js', // rollup config
  '**/gulpfile.js', // gulp config
  '**/gulpfile.*.js', // gulp config
  '**/Gruntfile{,.js}', // grunt config
  '**/protractor.conf.js', // protractor config
  '**/protractor.conf.*.js', // protractor config
  '**/karma.conf.js', // karma config
  '**/eslint.config.mjs', // eslint config
  './rules/*.mjs', // eslint config
  '**/vitest.config.mjs', // vitest config
  '**/vitestSetup.mjs', // vitest setup
  '**/tailwind.config.mjs', // tailwind config
  '**/vite.config.js', // vite config
  '**/vite.config.mjs', // vite config
  '**/vite.config.*.js', // vite config
  '**/vite.config*.mjs', // vite config
  '**/vitest.config.mjs', // vitest config
  '**/vitest.config.js', // vitest config
];

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 {
  defaultImportExtensions,
  defaultImportExtensionsRuleGranularOption,
  defaultImportResolverNodeExtensions,
  defaultImportNoExtraneousDependenciesDevDependencies,
  files as defaultFiles,
  getConfig,
  plugins as defaultPlugins,
  } from 'eslint-config-vylda-vanilla';
import myPlugin from 'path-to-my-plugin';

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

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

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

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

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

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

const vyldaConfig = getConfig({
  files,
  importExtensions,
  importExtensionsRuleGranularOption,
  importResolverNodeExtensions,
  importNoExtraneousDependenciesDevDependencies
  plugins,
});

const config = [
  ...vyldaConfig,
  {
    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, es6,
  getImportConfig, files, mapFiles, plugins,
} from 'eslint-config-vylda-vanilla';

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

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

const config = [
  {
    plugins,
  }
  ...configWithFiles,
  ...barrelsWithFiles,
]

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 export - default ESLint config
• 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 for some ESLINT rules (source)
• 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)
• 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)
• getConfig - function to get ESLint config with custom options (source)
• getImportConfig - function to get ESLint config for import plugin (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)
• 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, documentation)
• stylistic - ESLint config with stylistic rules (source, documentation)
• variables - ESLint config with rules for variables (source, documentation)

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.