2020-07-13 16:47:01 +02:00
|
|
|
|
[[kibana-linting]]
|
2020-07-16 16:13:51 +02:00
|
|
|
|
== Linting
|
2020-07-13 16:47:01 +02:00
|
|
|
|
|
|
|
|
|
A note about linting: We use http://eslint.org[eslint] to check that the
|
|
|
|
|
link:STYLEGUIDE.md[styleguide] is being followed. It runs in a
|
|
|
|
|
pre-commit hook and as a part of the tests, but most contributors
|
|
|
|
|
integrate it with their code editors for real-time feedback.
|
|
|
|
|
|
|
|
|
|
Here are some hints for getting eslint setup in your favorite editor:
|
|
|
|
|
|
|
|
|
|
[width="100%",cols="13%,87%",options="header",]
|
|
|
|
|
|===
|
|
|
|
|
|Editor |Plugin
|
|
|
|
|
|Sublime
|
|
|
|
|
|https://github.com/roadhump/SublimeLinter-eslint#installation[SublimeLinter-eslint]
|
|
|
|
|
|
|
|
|
|
|Atom
|
|
|
|
|
|https://github.com/AtomLinter/linter-eslint#installation[linter-eslint]
|
|
|
|
|
|
|
|
|
|
|VSCode
|
|
|
|
|
|https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint[ESLint]
|
|
|
|
|
|
|
|
|
|
|IntelliJ |Settings » Languages & Frameworks » JavaScript » Code Quality
|
|
|
|
|
Tools » ESLint
|
|
|
|
|
|
|
|
|
|
|`vi` |https://github.com/scrooloose/syntastic[scrooloose/syntastic]
|
|
|
|
|
|===
|
|
|
|
|
|
|
|
|
|
Another tool we use for enforcing consistent coding style is
|
|
|
|
|
EditorConfig, which can be set up by installing a plugin in your editor
|
|
|
|
|
that dynamically updates its configuration. Take a look at the
|
|
|
|
|
http://editorconfig.org/#download[EditorConfig] site to find a plugin
|
|
|
|
|
for your editor, and browse our
|
|
|
|
|
https://github.com/elastic/kibana/blob/master/.editorconfig[`.editorconfig`]
|
|
|
|
|
file to see what config rules we set up.
|
|
|
|
|
|
2020-07-16 16:13:51 +02:00
|
|
|
|
[discrete]
|
|
|
|
|
== Setup Guide for VS Code Users
|
2020-07-13 16:47:01 +02:00
|
|
|
|
|
|
|
|
|
Note that for VSCode, to enable "`live`" linting of TypeScript (and
|
|
|
|
|
other) file types, you will need to modify your local settings, as shown
|
|
|
|
|
below. The default for the ESLint extension is to only lint JavaScript
|
|
|
|
|
file types.
|
|
|
|
|
|
|
|
|
|
[source,json]
|
|
|
|
|
----
|
|
|
|
|
"eslint.validate": [
|
|
|
|
|
"javascript",
|
|
|
|
|
"javascriptreact",
|
|
|
|
|
{ "language": "typescript", "autoFix": true },
|
|
|
|
|
{ "language": "typescriptreact", "autoFix": true }
|
|
|
|
|
]
|
|
|
|
|
----
|
|
|
|
|
|
|
|
|
|
`eslint` can automatically fix trivial lint errors when you save a
|
|
|
|
|
file by adding this line in your setting.
|
|
|
|
|
|
|
|
|
|
[source,json]
|
|
|
|
|
----
|
|
|
|
|
"eslint.autoFixOnSave": true,
|
|
|
|
|
----
|
|
|
|
|
|
|
|
|
|
:warning: It is *not* recommended to use the
|
|
|
|
|
https://prettier.io/[`Prettier` extension/IDE plugin] while
|
|
|
|
|
maintaining the {kib} project. Formatting and styling roles are set in
|
|
|
|
|
the multiple `.eslintrc.js` files across the project and some of them
|
|
|
|
|
use the https://www.npmjs.com/package/prettier[NPM version of Prettier].
|
|
|
|
|
Using the IDE extension might cause conflicts, applying the formatting
|
|
|
|
|
to too many files that shouldn’t be prettier-ized and/or highlighting
|
|
|
|
|
errors that are actually OK.
|