Confirmed users
64
edits
DevTools/CodingStandards: Difference between revisions
Jump to navigation
Jump to search
Update to modern eslint setup.
(Add function spacing style) |
(Update to modern eslint setup.) |
||
| 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]. Note that ESLint has been integrated to our build system and | * 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 has some Mozilla specific plugins so it should always be run from the command line using <code>./mach eslint</code>. | ||
Our ESLint rule set is meant to be used | Our ESLint rule set is meant to be used with ESLint 2.9.0. | ||
=== Installing ESLint and Recommended plugins === | === Installing ESLint and Recommended plugins === | ||
| Line 18: | Line 18: | ||
<code>./mach eslint --setup</code> | <code>./mach eslint --setup</code> | ||
ESLint, eslint-plugin-html, 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 === | === Running ESLint from the command line === | ||
| Line 48: | Line 46: | ||
* 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. | * 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. | ||
You will also need to point SublimeLinter at the local eslint installation by setting the path to whatever <code>./mach eslint --setup</code> gives you when you run it (include a trailing slash but remove the eslint binary filename) e.g. | |||
<code> | |||
NOTE: Your local eslint binary is at | |||
/some/project/path/testing/eslint/node_modules/.bin/eslint | |||
"paths": { | |||
"linux": [], | |||
"osx": [ | |||
"/some/project/path/testing/eslint/node_modules/.bin/" | |||
], | |||
"windows": [] | |||
}, | |||
</code> | |||
Once done, open the mozilla project in SublimeText and open any JS file in the <code>/devtools</code> directory. 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 the <code>/devtools</code> directory. 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). | ||