Linting: Difference between revisions
No edit summary |
|||
| Line 15: | Line 15: | ||
== Javascript (ESLint) == | == Javascript (ESLint) == | ||
Javascript code is linted with [http://eslint.org eslint] since Moodle 3.2. | Javascript code is linted with [http://eslint.org eslint] since Moodle 3.2. ESlint is run as part of the build process with grunt. When building Javascript with `grunt js` AMD and YUI modules are linted and lint errors will cause the build to fail. By default, lint warnings are not displayed, but they can be displayed with the flag `--show-lint-warnings`. | ||
ESlint rules enabled for Moodle are defined within [https://github.com/moodle/moodle/blob/master/.eslintrc .eslintrc] and the eslint website provides [http://eslint.org/docs/rules/ good documentation] on each rules' purpose and examples of correct and incorrect code for each rule. Many eslint rules come with auto fixes which allows eslint to fix many problem in place, you can run this fix using the CLI tool `eslint --fix /path/to/file.js` or some editor plugins such as [https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint Visual Studio Code] are able to auto fix directly from your editor. | |||
In some cases it is desirable to disable eslint rules for a certain section of code or a particular rule. It is possible to do this with inline comments like the following | |||
<code> | |||
/* eslint-disable no-alert */ | |||
alert('foo'); | |||
/* eslint-enable */ | |||
alert('foo'); // eslint-disable-line no-alert | |||
</code> | |||
For full details, see the [http://eslint.org/docs/user-guide/configuring.html#disabling-rules-with-inline-comments eslint documentation]. <b>Note:</b> this should be used sparingly and usually accompanied with a comment justifying the rationale for ignoring the lint. | |||
| Line 36: | Line 36: | ||
CSS code is linted by [http://stylelint.io stylelint]. | CSS code is linted by [http://stylelint.io stylelint]. | ||
= Linting in your editor = | = Linting in your editor = | ||
Revision as of 16:09, 2 December 2016
Note: This page is a work-in-progress. Feedback and suggested improvements are welcome. Please join the discussion on moodle.org or use the page comments.
In Moodle development code linters are used to help ensure consistent coding conventions and help prevent common errors in code.
Motivation
Linting is used to ensure consistent coding style, detect common errors and enforce best practices. At it's best linting helps developers learn, with editor integration and fast feedback meaning that human code reviews can focus on the non-trivial details while linter can be the tireless mistake-preventing machine.
Linters
PHP (PHP_CodeSniffer)
PHP code is linted by PHP_CodeSniffer.
Rules
The rules defined as part of the Code-checker plugin. There are plans (CONTRIB-6209) to move this into a more distributable form.
Javascript (ESLint)
Javascript code is linted with eslint since Moodle 3.2. ESlint is run as part of the build process with grunt. When building Javascript with `grunt js` AMD and YUI modules are linted and lint errors will cause the build to fail. By default, lint warnings are not displayed, but they can be displayed with the flag `--show-lint-warnings`.
ESlint rules enabled for Moodle are defined within .eslintrc and the eslint website provides good documentation on each rules' purpose and examples of correct and incorrect code for each rule. Many eslint rules come with auto fixes which allows eslint to fix many problem in place, you can run this fix using the CLI tool `eslint --fix /path/to/file.js` or some editor plugins such as Visual Studio Code are able to auto fix directly from your editor.
In some cases it is desirable to disable eslint rules for a certain section of code or a particular rule. It is possible to do this with inline comments like the following
/* eslint-disable no-alert */
alert('foo');
/* eslint-enable */
alert('foo'); // eslint-disable-line no-alert
For full details, see the eslint documentation. Note: this should be used sparingly and usually accompanied with a comment justifying the rationale for ignoring the lint.
CSS/SCSS/Less (stylelint)
CSS code is linted by stylelint.
