Tips and tricks for eslint-ing mozilla-central

eslint is a great tool when dealing with JavaScript. Using eslint in mozilla-central helps save time by catching issues before review and aids in keeping the codebase consistent.

Clever people have already setup eslint in various ways in mozilla-central, see here and here to get started! This post is a collection of notes to help myself out when dealing with eslint in tree, which can hopefully benefit others.

Extending the Mozilla linting rules

If you create your own .eslintrc.js (Mozilla prefer .js rather than .json or .yaml) you end up overwriting a lot of the rules already set up in tree. For a long time I was using my own custom .eslintrc.js without extending Mozilla rules, but it's better for me to extend and add my own rules as needed:

"use strict";

module.exports = {
  "extends": "plugin:mozilla/mochitest-test",
  "rules": {
    "no-var": "error",
  }
};

This helps keep my own files concise, and stops me clobbering Mozilla declared rules I may have overlooked. I prefer to use warn for my rules so I can easily tell them from the base Mozilla ones.

Linting ignored files

Sometimes it's useful to link ignored files, particularly when working on extending linter coverage. ./mach eslint doesn't seem to accept the --no-ignore flag. The flag can be used with ./mach lint though, which will run eslint; either because it was given an appropriate file, or because explicilty specified via ./mach lint -l eslint. For example:

./mach lint -l eslint --no-ignore dom/media/tests/mochitest/test_getUserMedia_basicAudio.html

Be mindful when using --no-ignore that you may end up linting dirs that you still don't want to. For example, while working on linting media directories, I still want to ignore crashtests and reftests (which are globally ignored), and need to be careful to only lint mochitests.

Linting in Visual Studio Code

Using the eslint vscode extension allows for linting from the comfort of your vscode. Things to be aware of with the extension:

• The extension mostly works for me out of the box after I've run ./mach eslint --setup.
• The extension will not lint html files by default. To get it to do so you can specify in your vscode settings. For example I use the following workplace settings:

  {
    "eslint.enable": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html"
    ]
}

• Mozilla currently hacks the html plugin in when running ./mach commands. This appears be due to historical issues with the Sublime text plugin (see comment here). So to make linting work in code I find I have to add "plugins": ["html"] to my .eslintrc.json.
• The extension will not read the .eslintignore from the root of the tree because of how it reads ignore files. You can configure it to do so, but I find it useful to not do so since I'm often linting files that aren't in fully linted paths yet.