69cb2d3e2c
Signed-off-by: Tyler Smalley <tyler.smalley@elastic.co> # Conflicts: # .github/ISSUE_TEMPLATE/v8_breaking_change.md # .github/PULL_REQUEST_TEMPLATE.md
75 lines
2.5 KiB
Plaintext
75 lines
2.5 KiB
Plaintext
[[kibana-linting]]
|
||
== Linting
|
||
|
||
A note about linting: We use http://eslint.org[eslint] to check that the
|
||
link:STYLEGUIDE.mdx[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/main/.editorconfig[`.editorconfig`]
|
||
file to see what config rules we set up.
|
||
|
||
[discrete]
|
||
== Setup Guide for VS Code Users
|
||
|
||
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",
|
||
"typescript",
|
||
"typescriptreact",
|
||
]
|
||
----
|
||
|
||
Although, starting with https://github.com/microsoft/vscode-eslint#version-204[ESLint v2.0.4], there is no need to use `eslint.validate` to parse typescript files as it works out of the box.
|
||
|
||
`eslint` can automatically fix trivial lint errors when you save a
|
||
file by adding this line in your setting.
|
||
|
||
[source,json]
|
||
----
|
||
"editor.codeActionsOnSave": {
|
||
"source.fixAll.eslint": 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.
|