46
edits
WebExtensions/Hacking: Difference between revisions
mach eslint --setup no longer installs globally! Improve eslint vim config to use the eslint binary from "mach eslint --setup", only for mozilla-central.
(Fix typo and consistent quotes in eslint for vim section) |
(mach eslint --setup no longer installs globally! Improve eslint vim config to use the eslint binary from "mach eslint --setup", only for mozilla-central.) |
||
| Line 25: | Line 25: | ||
All WebExtension directories in <code>mozilla-central</code> are configured with a set of ESLint rules, which all code is required to pass. Many of these rules help to catch serious errors, such as references to non-existent variables, or a missing trailing comma turning an array literal into an array dereference, so it is extremely important that you check you code against them before it lands. | All WebExtension directories in <code>mozilla-central</code> are configured with a set of ESLint rules, which all code is required to pass. Many of these rules help to catch serious errors, such as references to non-existent variables, or a missing trailing comma turning an array literal into an array dereference, so it is extremely important that you check you code against them before it lands. | ||
The simplest way to check your code is using the <code>mach eslint</code> command. This requires that you have [https://docs.npmjs.com/ NPM] installed | The simplest way to check your code is using the <code>mach eslint</code> command. This requires that you have [https://docs.npmjs.com/ NPM] installed. | ||
To setup ESLint, you need to run the following once: | To setup ESLint, you need to run the following once: | ||
| Line 53: | Line 53: | ||
The following assumes that you use the [https://github.com/VundleVim/Vundle.vim Vundle package manager]. It should be easy enough to adapt to any other package manager you happen to prefer, though. | The following assumes that you use the [https://github.com/VundleVim/Vundle.vim Vundle package manager]. It should be easy enough to adapt to any other package manager you happen to prefer, though. | ||
You should configure Syntastic roughly as follows: | <code>mach eslint --setup</code> installs a specific ESLint version and some ESLint plugins to a subdirectory of the repository. | ||
You should configure Syntastic roughly as follows (change <code>/path/to/mozilla-central</code> as needed): | |||
" Initialize Vundle. | " Initialize Vundle. | ||
| Line 62: | Line 63: | ||
Bundle 'scrooloose/syntastic' | Bundle 'scrooloose/syntastic' | ||
" Enable ESLint in | " Enable the specific ESLint checker for files in mozilla-central/ only. | ||
" Enable the HTML plugin, and enable JavaScript linting for HTML files. | " Enable the HTML plugin, and enable JavaScript linting for HTML files. | ||
let | autocmd BufRead,BufNewFile */mozilla-central/* | ||
\ let b:syntastic_javascript_checkers = ['eslint'] | | |||
\ let b:syntastic_javascript_eslint_exec = '/path/to/mozilla-central/tools/lint/eslint/node_modules/.bin/eslint' | | |||
\ let b:syntastic_javascript_eslint_args = ['--plugin', 'html'] | | |||
\ let b:syntastic_filetype_map = { 'html': 'javascript' } | |||
After you've added this to your configuration (and have installed Vundle, if necessary), launch Vim and run: | After you've added this to your configuration (and have installed Vundle, if necessary), launch Vim and run: | ||