[[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.