10up Eslint Config

DEPRECATED. Please go to https://github.com/10up/10up-toolkit

ESLint shareable config

@10up/eslint-config is a shareable configuration package for eslint built on top of eslint-airbnb-config and modified to meet 10up's own standards.

Installation

1. Install all peer dependencies

npx install-peerdeps --dev @10up/eslint-config

1. Install @10up/eslint-config as a development dependency of your project:

npm install @10up/eslint-config --save-dev

Available ESLint configs

@10up/eslint-config

The default export contains common rules that are not specific to any framework or environment.

// eslintrc.js
module.exports = {
    extends: ['@10up/eslint-config'],
};

@10up/eslint-config/react

Extends @10up/eslint-config adding specific rules to React.

// eslintrc.js
module.exports = {
    extends: ['@10up/eslint-config/react'],
};

@10up/eslint-config/wordpress

Extends @10up/eslint-config/react adding the custom gutenberg rules from @wordpress/eslint-plugin.

This rule requires installing the @wordpress/eslint-plugin package.

npm install --save-dev @wordpress/eslint-plugin

// eslintrc.js
module.exports = {
    extends: ['@10up/eslint-config/wordpress'],
};

@10up/eslint-config/node

Extends @10up/eslint-config adding specific rules to Node.js.

// eslintrc.js
module.exports = {
    extends: ['@10up/eslint-config/node'],
};

@10up/eslint-config/jest

Adds specific rules for the jest testing framework.

This rule requires installing eslint-plugin-jest

npm install --save-dev eslint-plugin-jest

// eslintrc.js
module.exports = {
    extends: ['@10up/eslint-config/react', '@10up/eslint-config/jest'],
};

@10up/eslint-config/legacy

This legacy config contains only rules for ES5. It should be used for projects without babel that are still writing legacy JavaScript code.

// eslintrc.js
module.exports = {
    extends: ['@10up/eslint-config/legacy'],
};

Usage

In order to use this config, choose the one you want and add this configuration to your package.json:

{
    "eslintConfig": {
        "extends": "@10up/eslint-config"
    }
}

Or add a .eslintrc.js file to your project root containing:

module.exports = {
    extends: ['@10up/eslint-config'],
};

TypeScript Support

If you want TypeScript support, make sure to install @typescript-eslint/eslint-plugin and @typescript-eslint/parser

npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser

change the eslint parser to @typescript-eslint/parser and add the typescript plugin

// eslintrc.js
module.exports = {
    parser: '@typescript-eslint/parser',
    extends: ['@10up/eslint-config/react'],
    plugins: ['@typescript-eslint'],
} 

VSCode integration

We recommend turning on VSCode settings to automatically run eslint --fix on save.

"editor.codeActionsOnSave": {
   "source.fixAll.eslint": true,
}

This will automagically format your code once you save. You don't need VSCode prettier extension enabled or running on save as eslint will automatically run prettier for you.

Support Level

Active: 10up is actively working on this, and we expect to continue work for the foreseeable future including keeping tested up to the most recent version of WordPress. Bug reports, feature requests, questions, and pull requests are welcome.

Like what you see?

Changelog

All notable changes to this project will be documented in this file, per the Keep a Changelog standard.

[2.3.4]

• Treats @wordpress packages as core-modules in @10up/eslint-config/wordpress.
• Uses '@typescript-eslint/no-use-before-define instead of eslint no-use-before-define for typescript files.

[2.3.3]

• Remove the rules for prop-type and prop-spreading in the wordpress config.

[2.3.2]

• Disables eslint fixer for jsdoc/require-param due to a bug with vscode where it would add duplicated params.

[2.3.1]

• Fixes a bug with @babel/eslint-parser where it would complain about missing babel config.

[2.3.0]

• Fixes a bug with NPM 7 by updating peer dependencies
• Removes babel-eslint in favor of @babel/eslint-parser, make sure you project have a babel config as the new babel eslint parser will use your project's babel config for linting.