Repository files navigation

Strict shareable ESLint configuration with reasonable defaults.

• Installation
  • Automatic installation via CLI
  • Manual installation
    • Adding the required packages
    • Creating the configuration file
    • Creatingnpm scripts for linting
    • Configuring VSCode
      • Disablingprettier
      • Enabling autofix on save
      • Enabling ESLint to work with any supported file format
      • Suppressing stylistic errors noise
• Package contents
  • combine utility function
  • defineIgnores utility function
  • defineConfiguration function
  • Extra useful exports

You have two options:

• Automatic installation/configuration via CLI using the installation wizard(recommended);
• Manual installation and configuration.

Both options are described below.

Just run the package binary using your favorite package manager:

# Using `npm`npx @morev/eslint-config@latest# Using `yarn`yarn dlx @morev/eslint-config@latest# Using `pnpm`pnpm dlx @morev/eslint-config@latest# Using `bun`bunx @morev/eslint-config@latest

Then follow the installer instructions.

Add theeslint and@morev/eslint-config packages asdevDependencies using your favorite package manager:

# Using `npm`npm install -D eslint @morev/eslint-config# Using `yarn`yarn add eslint @morev/eslint-config --dev# Using `pnpm`pnpm add -D eslint @morev/eslint-config# Using `bun`bun install -D eslint @morev/eslint-config

Create theeslint.config.js filewith the following content as a starting point:

import{combine,defineConfiguration,defineIgnores}from'@morev/eslint-config';exportdefaultcombine([defineIgnores(),defineConfiguration('javascript'),// ...define other configurations, if necessary,// using the `defineConfiguration` function or// using ESLint-compatible format of configuration.]);

For more explanations on this part, take a look atPackage contents section.

It's a good practice to havenpm scripts that will start the linting process.
You can run them when committing with git hooks or during the validation in CI, etc.

Open yourpackage.json and create these scripts for linting within "scripts" section:

{"scripts": {"lint:eslint":"eslint .","lint:eslint:fix":"eslint . --fix",  }}

// 📄 eslint.config.jsexportdefaultcombine([defineIgnores({extraIgnoredFiles:['**/backend/**',// Do not lint the files within `backend` directory],}),]);

{// Only run ESLint for files within "frontend" and "open-api" directories"lint:eslint":"eslint\"./{frontend,open-api}/**\""}

For a better user experience, install theofficial ESLint extension.

Next, create the.vscode/settings.json file in the project root (if not exists).
This file contains settings that apply only to a specific project, so your other projects will remain in the same state(you can read more about its behaviorhere).

If the file already exists, you will need to add/replace/merge the necessary keys/values yourself.

Prettier is a popular (unfortunately) solution used by many people.
This config is designed to be usedINSTEAD ofprettier, providing mostly the same,but less restrictive and opinionated code formatting options.
And, thanks to ESLint's ideals, you can rewrite or even disable individual rules that don't suit you,while leaving the rest unchanged.

Put these lines in the.vscode/settings.json file:

{// ESLint handles formatting."prettier.enable":false,}

One of the reasons for the popularity ofprettier is that it works and makes changes immediately.
Fortunately, all stylistic rules (and many others!) can automatically fix the code,and do so seamlessly when the file is saved.

Put these lines in the.vscode/settings.json file to enable this feature:

{// Turn autofix on."editor.codeActionsOnSave": {"source.fixAll.eslint":"explicit"  },}

By default,VSCode ESLint extensiononly validates JavaScript files, but the config provides a configurations to work with JSX, Astro, Vue, YAML, JSON files and so on.

All available configurations are listed in thedefineconfiguration section.

Put these lines in the.vscode/settings.json fileto enforce the extension to check all files supported by this package:

{// Enable ESLint for all files that could// potentially be processed by ESLint."eslint.validate": ["javascript","javascriptreact","typescript","typescriptreact","vue","astro","html","markdown","json","json5","jsonc","yaml"  ],}

Some stylistic rules have an "error" severity, but each stylistic error can be automatically fixed when saving.

However, do you need constant red underlines while typing the code for a rule that can be fixed automatically?
I believe not.
It gets even worse if you are using something likeError Lens VSCode extension.

Fortunately, there is a way to modify the severity of rules for the IDE only,leaving the values in the config itself unchanged (e.g., to run via CLI).

Put these lines in the.vscode/settings.json file to set the severity of such rules as "warning":

{// Suppress stylistic errors, but still autofix them."eslint.rules.customizations": [    {"rule":"@stylistic/*","severity":"warn","fixable":true },    {"rule":"*-indent","severity":"warn","fixable":true },    {"rule":"*-spacing","severity":"warn","fixable":true },    {"rule":"*-spaces","severity":"warn","fixable":true },    {"rule":"*-order","severity":"warn","fixable":true },    {"rule":"*-dangle","severity":"warn","fixable":true },    {"rule":"*-newline","severity":"warn","fixable":true },    {"rule":"*quotes","severity":"warn","fixable":true },    {"rule":"*semi","severity":"warn","fixable":true }  ],}

The main export of the package provides 3 functions -combine,defineIgnores anddefineConfiguration.
All of these functions are inline-documented using JSDoc with the provided TS types, so you'll always have hints right in the editor.
However, let's look at them in more detail:

Youreslint.config.js fileshould export the configurations (both imported from this package and, optionally, other parts)wrapped with thecombine utility:

// ❌ won't workexportdefault[defineIgnores(),defineConfiguration('javascript'),// ...other configuration parts];// ✅ will workexportdefaultcombine([defineIgnores(),defineConfiguration('javascript'),// ...other configuration parts]);

For future extensibility, many configurations are designed as an array of configuration objects,whereas ESLint expects a flat list of configurations.

All thecombine function does is flatten the array:

exportconstcombine=(...configurations)=>{returnconfigurations.flat(Infinity);};

importeslintPluginFoofrom'eslint-plugin-foo';exportdefaultcombine([defineIgnores(),defineConfiguration('javascript'),{plugins:{foo:eslintPluginFoo,},rules:{'foo/rule':'warn',},},]);

defineIgnores function does not provide any rules, but configures files that shouldnot be processed by ESLint.
It automatically reads the root.gitignore file to inherit ignored paths,and adds some known non-linting files to reduce the config verbosity.

Under the hood, it useseslint-config-flat-gitignore package.

// 📄 eslint.config.jsexportdefaultcombine([defineIgnores({extraIgnoredFiles:['foo.txt',// Single file (relative to the root directory)'foo/**',// All files inside the directory'**/bar/**',// All files inside any directory named "bar"'**/baz/**/*.js',// Only JS files within any directory named "baz"],}),]);

// 📄 eslint.config.jsexportdefaultcombine([defineIgnores({gitignoreFiles:['.gitignore',// The root `.gitignore` MUST be in the list if you are using `gitignoreFiles` option'./src/assets/svg-sprites/_dist/.gitignore',// Additional `.gitignore` file to consider],}),]);

This is the main function that enables ESLint rules for the selected environment.

To enable a configuration, pass its name as the first argument and (optionally) options as the second argument.
The configurations are designed to work in most scenarios even without specifying options,but if you need more detailed customization - you can do that:

// 🗎 eslint.config.jsexportdefaultcombine([defineIgnores(),defineConfiguration('vue',{version:2,typescript:true,}),]);

Each configuration has at least two options,files andignores, which work just like these options in ESLint.
All configurations are set up by default so thatfiles corresponds to the appropriate files -so the "vue" configuration has a preset["**/*.vue"], and so on.

Let's take a more detailed look:

• 🗂️javascript - the base ESLint configuration with plugins related tojs files.

  Show the details

  ---

  The most basic and largest configuration is it's universal rules for JS code.
  It is assumed that itwill always be enabled.

  There's no fine-grain control here - it just includes rules that are universal to any JS code in any environment.

  ---

• 📁browser - additional JS rules related only to code that executes in the browser.

  Show the details

  ---

  This configuration provides rules specific to the DOM API and alsodeclares global variables that are only available in the browser context.

  By default, rules are enabled for all files (since there is no way to universally and unambiguously determinewhether a file belongs to a browser context).

  If your project structure identifies files that referonly to the browser,it is recommended to setfiles explicitly (so that, for example, you get errors when you try to usewindow inside a server file).

  exportdefaultcombine([defineConfiguration('browser',{files:['./src/client/**'],}),]);

  ---

• 📁node - set of the rules for the code that useNode.js APIs.

  Show the details

  ---

  This configuration provides rules specific to Node.js code and alsodeclares global variables that are only available in the Node context.

  By default, rules are enabled for all files (since there is no way to universally and unambiguously determinewhether a file belongs to a Node context).

  If your project structure identifies files that referonly to the Node,it is recommended to setfiles explicitly (so that, for example,you get errors when you try to useprocess inside a browser-related file).

  exportdefaultcombine([defineConfiguration('node',{files:['./src/server/**'],}),]);

  ---

• 📁typescript - for projects that useTypescript.

  Show the details

  ---

  This configuration provides rules specific to TypeScript and enables the TypeScript parser for TS(X) files.

  Just one important detail here - if you use TypeScript inside files that have a different extension (like.vue or.astro) -don't forget to specify those extensions as theextraFileExtensions option.

  Example of ESLint config for Vue 3 with TypeScript:

  exportdefaultcombine([defineConfiguration('vue',{version:3,typescript:true,}),defineConfiguration('typescript',{extraFileExtensions:['vue'],}),]);

  ---

• 📁jsx - for projects that use JSX/TSX.

  Show the details

  ---

  This configuration enables JSX a11y rules for JSX/TSX filesas well as stylistic rules that belongs to JSX syntax.

  exportdefaultcombine([defineConfiguration('jsx'),]);

  ---

• 📁vue - for projects that useVueJS (both2 and3).

  Show the details

  ---

  This configuration provides rules specific to Vue, enables the Vue parser for these files.

  The configuration can work with Vue2 and Vue3 both.

  By default, it tries to determine the Vue version in use,but you can set the version explicitly withversion option.
  If the version could not be determined, Vue3 rules are applied.

  By default, it enables TypeScript parser for Vue files.
  If you don't use TypeScript, disable this behavior explicitly with thetypescript: false option.

  If you are using TypeScript, do not forget to putextraFileExtensions: ['vue'] settingin thetypescript configuration options.

  Example of explicit setup for Vue 3 with TypeScript enabled:

  exportdefaultcombine([defineConfiguration('vue',{version:3,typescript:true,}),defineConfiguration('typescript',{extraFileExtensions:['vue'],}),]);

  ---

• 📁astro - for projects that useAstro framework.

  Show the details

  ---

  This configuration provides rules specific to Astro and enables the Astro parser for these files.It uses TypeScript parser under the hood which also works with pure JS.

  If you are using TypeScript, do not forget to putextraFileExtensions: ['vue'] settingin thetypescript configuration options.

  Example of explicit setup for Astro with TypeScript:

  exportdefaultcombine([defineConfiguration('astro'),defineConfiguration('typescript',{extraFileExtensions:['astro'],}),]);

  ---

• 📁vitest - for projects that useVitest as a test platform.

  Show the details

  ---

  This configuration enables Vitest-specific rules.

  By default, the rules apply to popular test file names, which in turn are driven by the tool's defaults.
  By default, the configuration ignores Cypress default test filename pattern.

  You can see these globs in the source codehere (GLOB_TESTS andGLOB_CYPRESS constants).

  It also declaresvitest testing functions asESLint globals by default.
  You can turn this behavior off by usingglobals: false option.

  If you have non-standard test file name pattern or a custom ignores,then specify files and exceptions explicitly using thefiles andignores options.

  Example ofvitest configuration in use:

  exportdefaultcombine([defineConfiguration('vitest'),]);

  ---

• 📁jest - for projects that useJest as a test platform.

  Show the details

  ---

  This configuration enables Jest-specific rules.

  By default, the rules apply to popular test file names, which in turn are driven by the tool's defaults.By default, the configuration ignores Cypress default test filename pattern.

  You can see these globs in the source codehere (GLOB_TESTS andGLOB_CYPRESS constants).

  If you have non-standard test file name pattern or a custom ignores,then specify files and exceptions explicitly using thefiles andignores options.

  Example ofjest configuration in use:

  exportdefaultcombine([defineConfiguration('jest'),]);

  ---

• 📁cypress - for projects that useCypress as a test platform.

  Show the details

  ---

  This configuration enables Cypress-specific rules.

  By default, the rules apply to the test file names that Cypress uses by default.

  You can see these globs in the source codehere (GLOB_CYPRESS constant).

  If you have non-standard test file name pattern, then specify files explicitly using thefiles option.

  Example ofcypress configuration in use:

  exportdefaultcombine([defineConfiguration('cypress'),]);

  ---

• 📁playwright - for projects that usePlaywright as a test platform.

  Show the details

  ---

  This configuration enables Playwright-specific rules.

  By default, the rules apply to the test file names undere2e,tests orplaywright directories.

  You can see these globs in the source codehere (GLOB_PLAYWRIGHT constant).

  If you have non-standard test file name pattern, then specify files explicitly using thefiles option.

  Example ofplaywright configuration in use:

  exportdefaultcombine([defineConfiguration('playwright'),]);

  ---

• 📁json - for projects that use JSON, JSON5 and JSONC files.

  Show the details

  ---

  This configuration enables rules that are specific to JSON(5|C) files,and also provides universal sorting ofpackage.json.

  You can see what exactly the rules apply tohere.

  Example ofjson configuration in use:

  exportdefaultcombine([defineConfiguration('json'),]);

  ---

• 📁markdown - for projects that useMarkdown files.

  Show the details

  ---

  This configuration attachesmarkdownlintas a linter and formatter for.md files, using an adapteras theeslint-plugin-markdownlint package.

  Example ofmarkdown configuration in use:

  exportdefaultcombine([defineConfiguration('markdown'),]);

  ---

• 📁html - for projects that use pure HTML files.

  Show the details

  ---

  This configuration enables HTML-specific rules and also includes formatting rules.

  Example ofhtml configuration in use:

  exportdefaultcombine([defineConfiguration('html'),]);

  ---

• 📁yaml - for projects that useYAML files.

  Show the details

  ---

  This configuration enables YAML-specific rules and also includes formatting rules.

  Example ofyaml configuration in use:

  exportdefaultcombine([defineConfiguration('yaml'),]);

  ---

If for some reason you need to access the plugins or parsers used within the package,you can use the/parsers and/plugins exports:

import{parserTypescript}from'@morev/eslint-config/parsers';import{pluginTypescript}from'@morev/eslint-config/plugins';

If you need to access the globs used within the package, you can use/globs export:

import{GLOB_TSX}from'@morev/eslint-config/globs';