MX ESLint Config

4.0.0 verified Sat Apr 25 auth: no javascript

eslint-config-mx version 4.0.0 is a shareable ESLint configuration package from MX Technologies. It provides a set of predefined linting rules for JavaScript and React projects, leveraging @babel/eslint-parser for Babel support and including plugins for React and React Hooks. It is distributed via npm, follows semantic versioning, and is designed for simple integration via ESLint's extends feature. Compared to alternatives like eslint-config-airbnb, it focuses on MX's internal best practices and is opinionated but lightweight, with peer dependencies on eslint-plugin-react, @babel/eslint-parser, and eslint-plugin-react-hooks.

Common errors

error Error: Cannot find module 'eslint-plugin-react' ↓

cause Missing peer dependency eslint-plugin-react

fix

npm install --save-dev eslint-plugin-react

error Error: ESLint configuration in .eslintrc.json is invalid: "extends": "eslint-config-mx" ↓

cause Using the full package name instead of the shorthand 'mx' in extends

fix

Change extends to 'mx' (without 'eslint-config-' prefix)

error Error: Could not find parser '@babel/eslint-parser' ↓

cause Missing peer dependency @babel/eslint-parser

fix

npm install --save-dev @babel/eslint-parser

error TypeError: Cannot read properties of undefined (reading 'react') ↓

cause Missing eslint-plugin-react-hooks causing rule definition failure

fix

npm install --save-dev eslint-plugin-react-hooks

Warnings

broken ESLint config breaks with ESLint v9 or flat config format ↓

fix This config uses legacy config format. For ESLint v9, use eslint.config.js or wait for a flat config version of eslint-config-mx.

deprecated Peer dependency @babel/eslint-parser is required but may be missing in some setups ↓

fix Install @babel/eslint-parser as a dev dependency: npm install --save-dev @babel/eslint-parser

gotcha The config assumes Babel is used for parsing; projects without Babel may encounter parsing errors ↓

fix Ensure @babel/eslint-parser is configured correctly in your ESLint settings or use a different parser if not using Babel.

gotcha The config extends 'mx', not 'eslint-config-mx' in the extends field ↓

fix The string should be 'mx', not the full package name, when using the extends field in ESLint config.

Install

npm install eslint-config-mx

yarn add eslint-config-mx

pnpm add eslint-config-mx

Imports

eslint-config-mx
wrong
```
import config from 'eslint-config-mx'
```
correct
```
In .eslintrc: { "extends": "mx" }
```
This is a shareable config, not a module to import directly. Use the string 'mx' in the extends field.
eslintConfig-mx
wrong
```
require('eslint-config-mx')
```
correct
```
In package.json: { "eslintConfig": { "extends": "mx" } }
```
Can be used in package.json eslintConfig field; do not require it.

default

wrong

const config = require('eslint-config-mx').default

correct

In .eslintrc.js: module.exports = { extends: ['mx'] }

No default export; use extends string in config object.

Quickstart

Shows how to extend the MX ESLint config in different ESLint config formats and override rules.

// .eslintrc.json
{
  "extends": "mx",
  "rules": {
    "semi": ["error", "always"],
    "no-console": "warn"
  }
}

// or .eslintrc.js
module.exports = {
  extends: ['mx'],
  rules: {
    semi: ['error', 'always'],
    'no-console': 'warn',
  },
};

// Ensure peerDependencies are installed:
// npm install --save-dev eslint-plugin-react @babel/eslint-parser eslint-plugin-react-hooks