在 DevTools 中使用 ESLint¶

主要规则集位于 devtools/.eslintrc 中。

安装¶

从项目的根目录输入

./mach eslint --setup

ESLint、eslint-plugin-html、eslint-plugin-mozilla 和 eslint-plugin-react 将自动下载并安装。

运行 ESLint¶

从命令行¶

从命令行运行 ESLint 的首选方法是使用 mach，如下所示

./mach eslint path/to/directory

这确保了 ESLint 使用与我们的 CI 环境相同的配置运行（请参阅下一节）。

在持续集成中¶

仅仅依靠人们运行 ESLint 并不能保证代码中不会引入新的警告或错误。因此，ESLint 也会在我们的持续集成环境中自动运行。

这意味着每次将提交推送到其中一个存储库时，作业都会在整个代码上运行 ESLint。

如果您正在将补丁推送到 try 存储库以运行测试，那么您也可以告诉它运行 ESLint 作业，从而验证您没有引入新的错误。

如果您在所有平台上构建，则 ESLint 作业将默认运行，但如果您在 trysyntax 中仅选择了一些平台，则您还需要添加 eslint-gecko 作为目标平台才能运行 ESLint。

在 SublimeText 中运行 ESLint¶

SublimeText 是一款流行的代码编辑器，它通过几个插件支持 ESLint。以下是一些入门提示

确保您拥有 SublimeText 3，linter 插件不适用于 ST2，
安装 SublimeLinter 3，这是一个 linter 框架，支持 ESLint 等。通过 Package Control 安装 SublimeLinter 是最简单的方法）
安装 SublimeLinter 后，您现在可以安装特定的 ESLint 插件。安装说明提供了有关如何安装 node、npm、eslint 的详细信息，这些是必需的）。
确保使用 --no-ignore 选项配置 SublimeLinter，以便也显示被忽略的源文件的错误。为此，打开 SublimeLinter 用户配置：Preferences / Package Settings / SublimeLinter / Settings - User，并将 "args": "--no-ignore" 添加到 eslint linter 对象中。

您还需要将 SublimeLinter 指向本地 eslint 安装，方法是将路径设置为运行 ./mach eslint --setup 时提供的任何内容（包括尾部斜杠，但删除 eslint 二进制文件名），例如：

注意：您的本地 eslint 二进制文件位于 /some-project-path/tools/lint/eslint/node_modules/.bin/eslint

    "paths": {
        "linux": [],
        "osx": [
            "/some-project-path/tools/lint/eslint/node_modules/.bin"
        ],
        "windows": [
            "C:\\some-project-path\\tools\\lint\\eslint\\node_modules\\.bin"
        ]
    },

完成后，在 SublimeText 中打开 mozilla 项目，并在 /devtools 目录中打开任何 JS 文件。然后，您可以通过上下文菜单（右键单击文件本身）或键盘快捷键（Mac 上为 ctrl+option+L）触发 linter。

您应该在代码行中看到错误和警告，如下面的屏幕截图所示。您还可以使用 ctrl+option+A 查看所有错误列表，并通过单击代码行标记查看单个错误。

ESLint in SublimeText 3

在 Emacs 中运行 ESLint¶

首先，安装 flycheck 包（flymake 尚未支持 ESLint）。您可以从 marmalade 或 melpa-stable 存储库获取 flycheck。
告诉 flycheck 禁用 jslint，并在您的 javascript 模式中启用 flycheck。需要小心找到源代码树中安装的 eslint。此代码段假定内置的 javascript 模式，但稍作修改（只需钩子的名称）也适用于 js2-mode

(defun my-js-mode-hacks ()
  (setq-local mode-name "JS")
  ;; Set this locally so that the head.js rule continues to work
  ;; properly.  In particular for a mochitest we want to preserve the
  ;; "browser_" prefix.
  (when (buffer-file-name)
    (let ((base (file-name-nondirectory (buffer-file-name))))
      (when (string-match "^\\([a-z]+_\\)" base)
	(setq-local flycheck-temp-prefix (match-string 1 base))))
    (let ((base-dir (locate-dominating-file (buffer-file-name)
					    ".eslintrc-ignores.js")))
      (when base-dir
	(let ((eslint (expand-file-name
		       "tools/lint/eslint/node_modules/.bin/eslint" base-dir)))
	  (when (file-exists-p eslint)
	    (setq-local flycheck-javascript-eslint-executable eslint))))))
  (flycheck-mode 1))
(require 'flycheck)
(setq-default flycheck-disabled-checkers
	      (append flycheck-disabled-checkers
		      '(javascript-jshint)))
(add-hook 'js-mode-hook #'my-js-mode-hacks)

flycheck 默认将它的绑定放在 C-c ! 上，所以使用 C-c ! C-h 查看可用内容。其中包括列出所有错误和遍历错误的键绑定等。
为了确保 flycheck 找到了 eslint，打开一个 .js 文件并运行 M-x flycheck-verify-setup。它应该显示 eslint 安装的路径。

在 Atom 中运行 ESLint¶

从项目的根目录输入

./mach eslint --setup

安装 linter-eslint 包 v.8.00 或更高版本。然后转到包设置并启用以下选项

linter-eslint settings in Atom

完成后，您应该会看到错误和警告，如下面的屏幕截图所示。

ESLint in Atom

在 ViM 中运行 ESLint¶

如果您还没有使用 Syntastic，则此处的说明将帮助您入门：https://wiki.mozilla.org/WebExtensions/Hacking#Vim

或者，如果您确实已使用 Syntastic，请将此添加到您的 .vimrc 中以使 ESLint 在路径包含 mozilla-central 的位置工作（调整路径以反映您计算机上的路径）

 autocmd FileType javascript,html
    \ if stridx(expand("%:p"), "/mozilla-central/") != -1 |
    \    let b:syntastic_checkers = ['eslint'] |
    \    let b:syntastic_eslint_exec = '/path/to/mozilla-central/tools/lint/eslint/node_modules/.bin/eslint' |
    \    let b:syntastic_html_eslint_args = ['--plugin', 'html'] |
    \ endif

您可能需要关闭并重新打开 ViM 以使更改生效。然后，打开任何文件并尝试编辑它以导致错误，然后保存它。如果一切顺利，您将看到一些独特的箭头指向错误。将鼠标悬停在上面会生成一个带有更多错误信息的工具提示。

在 Visual Studio Code 中运行 ESLint¶

从项目的根目录输入

./mach eslint --setup

安装 dbaeumer.vscode-eslint 包。然后转到包设置并设置以下选项

"eslint.nodePath": "tools/lint/eslint/node_modules/.bin"

完成后，您应该会看到错误和警告，如下面的屏幕截图所示

ESLint in VS Code

修复 ESLint 错误¶

这将帮助您编写符合 eslint 规范的代码

在移动或重构代码片段时，请将其视为从该代码片段中删除所有 ESlint 错误的机会。实际上，它甚至可能是删除整个文件中所有 ESLint 错误的好机会。
在进行仅限 ESLint 的更改时，请将这些更改与实际的功能更改或错误修复分开进行。这有助于简化审查，并在查看源代码历史记录时隔离实际更改。
在编写新代码时，请从一开始就使其符合 ESLint 规范。这比以后再回头修改要容易得多。
ESLint 还会在 HTML 文件中的 <script> 标记上运行，因此，例如，如果您为 mochitests 创建新的 HTML 测试文件，请确保这些文件中的 JavaScript 代码没有 ESLint 错误。
在测试文件（xpcshell 和 mochitest）中，来自相应 head.js 文件的所有全局变量都会自动导入，因此您无需使用 /* globals ... */ 注释或 /* import-globals-from head.js */ 注释来定义它们。