@hellroot/eslint-config

An ESLint config for projects written in TypeScript with React.

It is based on airbnb and @typescript-eslint/recommended configs and compatible with Prettier.

Installation

npm install --save-dev eslint prettier typescript @hellroot/eslint-config

Configuration

Extend your ESLint config, select environments which you use and specify path to right tsconfig.json if you are using non-default:

.eslintrc.js

const path = require('path');

const tsConfigDir = __dirname;

module.exports = {
  extends: ['@hellroot/eslint-config'],
  env: {
    jest: true,
    node: true,
    browser: true
  },
  parserOptions: {
    project: path.join(tsConfigDir, 'tsconfig.json')
  },
  settings: {
    'import/resolver': {
      typescript: {
        directory: tsConfigDir
      }
    }
  }
};

Configure EditorConfig:

.editorconfig

root = true

[*]
charset = utf-8
indent_size = 2
end_of_line = lf
indent_style = space
max_line_length = 100
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false

Configure Prettier:

.prettierrc.json

{
  "singleQuote": true,
  "trailingComma": "none"
}

Migration

Format all your TypeScript and JavaScript code:

npx prettier --write '**/*.{js,jsx,ts,tsx}'

VSCode

By default, ESLint plugin validates only .js and .jsx files. You should enable .ts and .tsx manually in your IDE settings:

settings.json

"eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    }
]