130
edits
DevTools/CodingStandards: Difference between revisions
Added mach eslint command line, talked about .eslintignore, --no-ignore, and ESLint job on CI
(set flycheck-temp-prefix locally to ensure head.js rule works) |
(Added mach eslint command line, talked about .eslintignore, --no-ignore, and ESLint job on CI) |
||
| Line 3: | Line 3: | ||
== JS linting with ESLint == | == JS linting with ESLint == | ||
In order to help people write | In order to help people write standard-compliant code from the start and avoid wasting time during code reviews, a set of ESLint configuration files have been added to the DevTools code base so that JavaScript can be analyzed automatically. | ||
This automatic linting can happen either while coding, in a code editor, or when using the command line. | This automatic linting can happen either while coding, in a code editor, or when using the command line. | ||
| Line 9: | Line 9: | ||
* Learn more [http://eslint.org/ about ESLint], | * Learn more [http://eslint.org/ about ESLint], | ||
* learn how to [http://eslint.org/docs/user-guide/integrations integrate ESLint in your code editor], | * learn how to [http://eslint.org/docs/user-guide/integrations integrate ESLint in your code editor], | ||
* or [http://eslint.org/docs/user-guide/command-line-interface run it on the command line]. | * or [http://eslint.org/docs/user-guide/command-line-interface run it on the command line]. Note that ESLint has been integrated to our build system and can therefore be run on the command line with <code>./mach eslint</code>. | ||
Our ESLint rule set is meant to be used with ESLint 1. | Our ESLint rule set is meant to be used with ESLint 1.10.3 at the moment, and is not compatible with ESLint 2.0.0. | ||
=== Installing ESLint and Recommended plugins === | === Installing ESLint and Recommended plugins === | ||
| Line 21: | Line 21: | ||
ESLint, eslint-plugin-mozilla and eslint-plugin-react will be automatically downloaded and installed. | ESLint, eslint-plugin-mozilla and eslint-plugin-react will be automatically downloaded and installed. | ||
=== Running ESLint from the command line === | |||
The preferred way of running ESLint from the command line is by using <code>mach</code> like this: | |||
<code>./mach eslint path/to/directory</code> | |||
This makes sure that ESLint runs with the same configuration that on our CI environment (see the next section). | |||
Note that the file [https://dxr.mozilla.org/mozilla-central/source/.eslintignore <code>.eslintignore</code>] at the root of the repository contains a list of paths to ignore. This is because a lot of the code isn't ESLint compliant yet. We're in the process of making code free of ESLint warnings and errors, but this takes time. In the meantime, make sure the file or folder you are running ESLint on isn't ignored. | |||
=== Running ESLint in CI === | |||
Relying only on people to run ESLint isn't enough to guarantee new warnings or errors aren't introduced in the code. Therefore, ESLint also runs automatically in our Continuous Integration environment. | |||
This means that every time a commit is pushed to one of the repositories, a job runs ESLint on the whole code. | |||
If you are pushing a patch to the [[ReleaseEngineering/TryServer|<code>try</code> repository]] to run the tests, then you can also tell it to run the ESLint job and therefore verify that you did not introduce new errors. | |||
If you build on all platforms, then the ESLint job will run by default, but if you selected a few platforms only in your [[Build:TryChooser|trysyntax]], then you need to also add <code>eslint-gecko</code> as a target platform for ESLint to run. | |||
=== Running ESLint in SublimeText === | === Running ESLint in SublimeText === | ||
| Line 29: | Line 47: | ||
* install [http://www.sublimelinter.com/en/latest/installation.html SublimeLinter 3], this is a framework for linters that supports, among others, ESLint, (installing SublimeLinter via [https://packagecontrol.io/installation Package Control] is the easiest way), | * install [http://www.sublimelinter.com/en/latest/installation.html SublimeLinter 3], this is a framework for linters that supports, among others, ESLint, (installing SublimeLinter via [https://packagecontrol.io/installation Package Control] is the easiest way), | ||
* with SublimeLinter installed, you can now [https://github.com/roadhump/SublimeLinter-eslint#linter-installation install the specific ESLint plugin] (the installation instruction provide details about how to install node, npm, eslint which are required). | * with SublimeLinter installed, you can now [https://github.com/roadhump/SublimeLinter-eslint#linter-installation install the specific ESLint plugin] (the installation instruction provide details about how to install node, npm, eslint which are required). | ||
* make sure to configure SublimeLinter with the <code>--no-ignore</code> option so that errors are also shown for source files that are ignored. To do this, open the SublimeLinter user configuration at: Preferences / Package Settings / SublimeLinter / Settings - User, and add <code>"args": "--no-ignore"</code> to the eslint linter object. | |||
Once done, open the mozilla project in SublimeText and open any JS file in either <code>/browser/devtools</code> or <code>/toolkit/devtools</code> (the 2 main directories for DevTools code). You can then trigger the linter via the contextual menu (right click on the file itself) or with a keyboard shortcut (ctrl+option+L on Mac). | Once done, open the mozilla project in SublimeText and open any JS file in either <code>/browser/devtools</code> or <code>/toolkit/devtools</code> (the 2 main directories for DevTools code). You can then trigger the linter via the contextual menu (right click on the file itself) or with a keyboard shortcut (ctrl+option+L on Mac). | ||