mozilla / eslint-plugin-amo

⛑ ESLint plugin for 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, () => {});

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

💡 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('hello')

💡 We enforce this rule because of the following issue: #232.

⚠️ 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')

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

💡 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('hello')

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

⚠️ 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);
});

💡 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}`);

📐 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.

💡 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

💡 We enforce this rule because of the following issue: mozilla/addons-code-manager#75.

redux-app-state

Ensure the AppState Flow type is used on state arguments:

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

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

💡 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;

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

⚠️ 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.

eslint-plugin-amo's Issues

Ignore `.d.ts` files in `amo/only-tsx-files`

This is an edge case given that .d.tsx files are ignored by tsc (as far as I can tell): https://github.com/mozilla/eslint-plugin-amo#only-tsx-files

Add a rule to make sure `withRouter` HOC is the first in the list of `compose()`

See: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md#important-note

// BAD
connect(...)(withRouter(MyComponent))

compose(
  connect(...),
  withRouter
)(MyComponent)

// GOOD
withRouter(connect(...)(MyComponent))

compose(
  withRouter,
  connect(...)
)(MyComponent)

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• Lock file maintenance

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• Update Node.js to v19
• Update dependency inquirer to v9

Detected dependencies

circleci

.circleci/config.yml

• cimg/node 14.21
• cimg/node 16.19

npm

package.json

• requireindex 1.2.0
• string-natural-compare 3.0.1
• @babel/core ^7.16.0
• @babel/eslint-parser ^7.16.0
• @babel/plugin-syntax-flow ^7.16.0
• eslint ^8.0.0
• inquirer ^8.0.0
• markdown-table ^3.0.0
• mocha ^10.0.0
• prettier ^2.0.0
• replace-in-file ^6.0.0
• node >= 12.x

---

• Check this box to trigger a request for Renovate to run again on this repository

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

Travis CI free usage ends Dec 3; mozilla repos should switch to other CI platforms

We're opening this issue because your project has used Travis CI within the last 6 months. If you have already migrated off it, you can close and ignore this issue.

Travis CI is ending free builds on public repositories. travis-ci.com stopped providingthem in early November, and travis-ci.org will stop after December 31, 2020. To avoid disruptions to your workflows, you must migrate to another CI service.

For production use cases, we recommend switching to CircleCI. This service is already widely used within Mozilla. There is a guide to migrating from Travis CI to CircleCI available here.

For non production use cases, we recommend either CircleCI or Github Actions. There is a guide to migrating from Travis CI to Github Actions available here. Github Actions usage within Mozilla is new, and you will have to work with our github administrators to enable specific actions following this process.

If you have any questions, reach out in #github-admin:mozilla.org on matrix.

Add a rule to avoid a `sinon.assert.called()` followed by `sinon.assert.calledWith()`

When we use sinon.assert.calledWith(), there is no need to have sinon.assert.called() before, it is implied with calledWith().

// BAD
const stub = sinon.spy();

sinon.assert.called(stub);
sinon.assert.calledWith(stub, params);

// GOOD
const stub = sinon.spy();

sinon.assert.calledWith(stub, params);

Add a script to scaffold a new rule

Instead of using yo eslint:rule, we should have a script to generate a source file and a test file for a new rule, given its name. The generated files should match the structure of the existing files.

Add a rule to format arguments to i18n.* methods using deterministic and static keys

Currently we have some rules that cover i18n methods, but:

• we can pass references to methods like gettext, this should not be allowed
• we can pass template literals (even without expressions) which is better to not allow

Adding rules covering this logic will auto convert static template literals to normal strings, this removes any white space which makes our translation keys portable to alternative extraction tools that do not do this for us. It is also better to be explicit than implicit so solving this issue on the source code level is better than in some obsure script.

Adding rules that forbid references ensure that we can extract all of the keys and that we don't unwittingly call i18n with invalid parameters.

CODE_OF_CONDUCT.md isn't correct

Your required text does not appear to be correct

As of January 1 2019, Mozilla requires that all GitHub projects include this CODE_OF_CONDUCT.md file in the project root. The file has two parts:

1. Required Text - All text under the headings Community Participation Guidelines and How to Report, are required, and should not be altered.
2. Optional Text - The Project Specific Etiquette heading provides a space to speak more specifically about ways people can work effectively and inclusively together. Some examples of those can be found on the Firefox Debugger project, and Common Voice. (The optional part is commented out in the raw template file, and will not be visible until you modify and uncomment that part.)

If you have any questions about this file, or Code of Conduct policies and procedures, please reach out to [email protected].

(Message COC003)

Add a rule to call `sinon.assert.calledOnce()` after `sinon.assert.calledWith()`

// BAD
sinon.assert.calledOnce(stub);
sinon.assert.calledWith(stub, params);

// GOOD
sinon.assert.calledWith(stub, params);
sinon.assert.calledOnce(stub);

We should consider sinon.assert.calledOnce() and other callCount().

Add a rule to sort destructured properties

Ideally this rule should also --fix the code, but that might be error-prone. There are existing plugins for inspiration but none of them can fix the code and not sure the sorting algorithms fit our needs.

// BAD
const {
  foo,
  _baz,
  bar,
} = this.props;

// GOOD
const {
  _baz,
  bar,
  foo,
} = this.props;

Please use Dependabot instead of Renovate

We want to use Dependabot consistently across all our (add-ons) repos. Please update the config to use Dependabot instead of Renovate. You may also want to remove the Renovate config and its GitHub integration. Thanks!

Do not recommend sort-destructured-props

It is controversial actually: mozilla/addons#12138

Make the `only-log-strings` rule more configurable

We should add to configuration options to the only-log-strings rule so that one can configure the logger objects and/or methods. Currently, it is hardcoded and rather AMO-specific.

We can probably use context.options: https://eslint.org/docs/developer-guide/working-with-rules#contextoptions and add a schema. Ideally, the npm run build-doc should use this schema to build the documentation section.

Use `addons-robot` to create new NPM releases