eslint-plugin-amo

eslint-plugin-amo

ESLint plugin for AMO.

Installation

You'll first need to install ESLint:

$ npm i eslint --save-dev

Next, install eslint-plugin-amo:

$ npm install eslint-plugin-amo --save-dev

Note: If you installed ESLint globally (using the -g flag) then you must also install eslint-plugin-amo globally.

Usage

Add amo to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

{
  "plugins": ["amo"]
}

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

{
  "rules": {
    "amo/rule-name": 2
  }
}

Alternatively, you can use the recommended preset to get reasonable defaults:

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

TypeScript

You can use the typescript preset to get reasonable defaults (it includes the recommended rules) as well as TypeScript specific rules:

{
  "extends": ["plugin:amo/typescript"]
}

Rules

• dangerously-set-inner-html
• describe-with-filename
• i18n-no-interpolated-values
• i18n-no-reference
• i18n-no-tagged-templates
• i18n-no-template-literal
• no-sinon-assert-called-if-called-with
• one-top-level-describe-per-test
• only-log-strings
• only-tsx-files
• redux-app-state
• sort-destructured-props
• with-router-hoc-first

dangerously-set-inner-html

Ensure dangerouslySetInnerHTML is used on elements that permit flow content:

// BAD
<p dangerouslySetInnerHTML={sanitizeUserHTML(content)} />

// GOOD
<div dangerouslySetInnerHTML={sanitizeUserHTML(content)} />

describe-with-filename

Ensure the top-level describe block has __filename as description:

// BAD
describe('foo', () => {});

// GOOD
describe(__filename, () => {});

:wrench: Use the ESLint --fix option on the command line to automatically fixes problems reported by this rule.

:bulb: We enforce this rule because of the following issue: https://github.com/mozilla/addons-frontend/issues/2928.

i18n-no-interpolated-values

Ensure no interpolated values are passed to i18n methods:

// BAD
i18n.gettext(`some ${value}`)

// GOOD
i18n.gettext(`some %(value)s`)

i18n-no-reference

Ensure predictable static values are passed as i18n method arguments:

// BAD
i18n.gettext(hello)

// GOOD
i18n.gettext('hallo')

:bulb: We enforce this rule because of the following issue: https://github.com/mozilla/eslint-plugin-amo/issues/232.

:warning: This rule is not part of the recommended preset.

i18n-no-tagged-templates

Ensure no template literal tags are passed to i18n methods:

// BAD
i18n.gettext(tag`translated string`)

// GOOD
i18n.gettext('hello')

:wrench: Use the ESLint --fix option on the command line to automatically fixes problems reported by this rule.

:bulb: We enforce this rule because of the following issue: https://github.com/mozilla/addons-frontend/issues/2108.

i18n-no-template-literal

Ensure predictable static values are passed as i18n method arguments:

// BAD
i18n.gettext(`

hello`)

// GOOD
i18n.gettext('hallo')

:wrench: Use the ESLint --fix option on the command line to automatically fixes problems reported by this rule.

:warning: This rule is not part of the recommended preset.

no-sinon-assert-called-if-called-with

Ensure sinon.assert.called() is absent when sinon.assert.calledWith() is used:

// BAD
it('description', () => {
  sinon.assert.called(stub);
  sinon.assert.calledWith(stub, params);
});

// GOOD
it('description', () => {
  sinon.assert.calledWith(stub, params);
});

:bulb: We enforce this rule because of the following issue: https://github.com/mozilla/addons-frontend/issues/2437.

one-top-level-describe-per-test

Ensure there is a single top-level describe block per test file:

// BAD
describe('foo', () => {});
describe('bar', () => {});

// GOOD
describe(__filename, () => {
  describe('foo', () => {});
  describe('bar', () => {});
});

only-log-strings

Ensure we do not log full objects:

// BAD
log.info("response:", response);

// GOOD
log.info("this is a log message");
log.debug(oneLine`A very long string message`);
_log.warn(`request ID: ${requestId}`);

:triangular_ruler: This rule can be configured with the following options:

Name	Type	Description
methods	array	A list of logger methods, e.g., info or debug.
objects	array	A list of logger objects, e.g., log or console.

:bulb: We enforce this rule because of the following issue: https://github.com/mozilla/addons-frontend/issues/6512.

only-tsx-files

Enforce .tsx file extensions (definition files are ignored by this rule):

• ⛔️ src/api/index.ts
• ✅ src/api/index.tsx

:bulb: We enforce this rule because of the following issue: https://github.com/mozilla/addons-code-manager/issues/75.

redux-app-state

Ensure the AppState Flow type is used on state arguments:

// BAD
const mapStateToProps = (state: Object) => {};

// GOOD
const mapStateToProps = (state: AppState) => {};

:bulb: We enforce this rule because of the following issue: https://github.com/mozilla/addons-frontend/issues/4058.

sort-destructured-props

Ensure destructured props are sorted:

// BAD
const { a, _c, b, Component, ...otherProps } = this.props;

// GOOD
const { Component, _c, a, b, ...otherProps } = this.props;

:wrench: Use the ESLint --fix option on the command line to automatically fixes problems reported by this rule.

:warning: This rule is not part of the recommended preset.

with-router-hoc-first

Ensures the withRouter HOC is the first in compose():

// BAD
compose(
  connect(mapStateToProps),
  withRouter
)(MyComponent)

// GOOD
compose(
  withRouter,
  connect(mapStateToProps)
)(MyComponent)

Contributing

Install the project dependencies:

npm install

Run the test suite:

npm test

New rules can be added with the npm run new-rule command:

npm run new-rule

This command will ask a few questions and generate the source and test files.

The "Rules" documentation section is automatically generated with:

npm run build-doc

For further information, please see the CONTRIBUTING.md file.

License

eslint-plugin-amo is released under the Mozilla Public License Version 2.0. See the bundled LICENSE file for details.