eslint-plugin-wpcalypso

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.