Eslint plugin wpcalypso

An ESLint configuration following WordPress.com's "Calypso" JavaScript Coding Guidelines. This package also includes custom ESLint rules for the WordPress.com Calypso project

Installation

Install ESLint and eslint-plugin-wpcalypso

$ yarn add --dev eslint eslint-plugin-wpcalypso

If you're planning to use the React superset of rules, you should also install eslint-plugin-react and eslint-plugin-react-hooks:

yarn add --dev eslint-plugin-react eslint-plugin-react-hooks

Usage

Recommended rules

Simply extend the configuration from your project's .eslintrc configuration file:

{
	"extends": [ "plugin:wpcalypso/recommended" ]
}

Or, if your project uses React and you want to opt in to additional React-specific rules, extend the React superset:

{
	"extends": [ "plugin:wpcalypso/react" ]
}

Any of the above options will:

Enable the plugin wpcalypso
Enable the recommended set of rules to match WordPress.com's "Calypso" JavaScript Coding Guidelines
Enable custom rules used for WordPress.com Calypso project

Custom rules

If you are not interesetd in the recommended set of rules but only on some of the custom rules, you can enable them individually.

First, add wpcalypso to the plugins section of your .eslintrc configuration file:

{
	"plugins": [ "wpcalypso" ]
}

Then configure the rules you want to use under the rules section.

{
	"rules": {
		"wpcalypso/rule-name": "error"
	}
}

Supported Rules

i18n-ellipsis: Disallow using three dots in translate strings
i18n-mismatched-placeholders: Ensure placeholder counts match between singular and plural strings
i18n-named-placeholders: Disallow multiple unnamed placeholders
i18n-no-collapsible-whitespace: Disallow collapsible whitespace in translatable strings
i18n-no-placeholders-only: Disallow strings which include only placeholders
i18n-no-this-translate: Disallow this.translate()
i18n-no-variables: Disallow variables as translate strings
jsx-classname-namespace: Ensure JSX className adheres to CSS namespace guidelines
jsx-gridicon-size: Enforce recommended Gridicon size attributes
post-message-no-wildcard-targets: Disallow using the wildcard '*' in postMessage
redux-no-bound-selectors: Disallow creation of selectors bound to Redux state

Suggesting Changes

Want to suggest a change to our style guide? Edit the JavaScript Coding Guidelines on the Automattic/wp-calypso repository and submit a pull request.

Want to revise the ESLint rules used here? Edit the recommended.js file and submit a pull request.

License

GNU General Public License v2.0 or later.

eslint-plugin-wpcalypso