Skip to content

Latest commit

 

History

History
80 lines (55 loc) · 2.99 KB

Eslint.md

File metadata and controls

80 lines (55 loc) · 2.99 KB
Raw

Eslint

Commands

Tries to automaticly fix all .es6|.ts|.jsx files based on .eslintrc

npm run lint

Same as lint, but doesn't fix the files, just creates the error/warning dump in console

npm run lint-dry

Setup

Common to all editors

We use the .editorconfig file to set up a common configuration across all editors that support this format. For the time being you need to install a plugin for VSCode or Sublime Text, but IntelliJ reads this format natively and does not need one.

Visual Studio Code

Install Eslint Plugin:

Name: ESLint
Id: dbaeumer.vscode-eslint
Description: Integrates ESLint JavaScript into VS Code.
Version: 2.0.14
Publisher: Dirk Baeumer
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint\

Update VSCode workspace- or userconfig:

  "eslint.enable": true,
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
  },

If you don't want it to automaticly lint the current file on save, omit the codeActionsOnSave config

Install Prettier plugin

Prettier works in tandem with ESlint: ESlint does code styles and Prettier does formatting, whitespace etc. We use both of them, they are configured to not cause conflicts. You can read more about this configuration here, and in the related articles.

Name: Prettier - Code formatter
Id: esbenp.prettier-vscode
Description: Code formatter using prettier
Version: 9.9.0 Publisher: Prettier
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

IntelliJ

Install the Prettier plugin for IntelliJ. Instructions can be found here.

After installation, make sure you configure IntelliJ to reformat and fix on save. A configuration like this seems to do the trick, adjust for taste:

General configuration

Eslint is setup to lint .es6, .ts, and .jsx files. Each of these share one common config, with overrides in .eslintrc.json

Eslint rules documentation
Typescript rules documentation
React rules documentation

If you want to add specific rules to either .es6, .ts or .jsx, then you'll have to do this inside .eslintrc.json. For .es6, add "rules": { /*my rules */ } to the root object. For .ts or .jsx, add it to the respective overrides.rules objects.