@quitsmx/eslint-config

ESLint configuration with embeded support for TypeScript and Prettierx to be used in modern browsers*, almost compatible with StandardJS.

Includes extra configurations for React, Preact and Node.js.

Requirements:

ESLint 7
TypeScript 4
NodeJS 10.13 or 12 and later

* A good browserslist to start with is ">= 0.15% and since 2019" as you can see here.

Included Plugins

Install

Install eslint and this config from npm:

yarn add -D eslint typescript amarcruz/prettier @quitsmx/eslint-config

aMarCruz/prettier is recommended to avoid conflicts with other Prettier tools.

Setup

Run with npx or yarn from the root of your project:

npx quits-eslint-init

Review and customize the generated .eslintrc.json, .prettierrc.json and .vscode/settings.json files.

The only required setting is extends in the .eslintrc file:

{
  "extends": ["@quitsmx"]
}

Extra Configurations

Add to extends[] the configurations that match your environment:

Package	Configuration
node	`@quitsmx/eslint-config/node`
react	`@quitsmx/eslint-config/react`
preact	`@quitsmx/eslint-config/preact`
TypeScript runtime	`@quitsmx/eslint-config/ts-runtime`

For the TypeScript runtime you need to set the project in your ESLint config. For example:

{
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "extends": ["@quitsmx", "@quitsmx/eslint-config/ts-runtime"]
}

Prettierx

Configure Prettierx with a .prettierrc.json file in the root of your project.

For example, this preset used by QuITS.mx, wich we call "standardize", is similar to the one used by StandardJS:

{
  "arrowParens": "avoid",
  "endOfLine": "lf",
  "generatorStarSpacing": true,
  "offsetTernaryExpressions": true,
  "printWidth": 92,
  "quoteProps": "consistent",
  "semi": false,
  "singleQuote": true,
  "spaceBeforeFunctionParen": true,
  "tabWidth": 2,
  "useTabs": false,
  "yieldStarSpacing": true
}

To avoid conflicts between Prettier and Prettierx, it is recommended that you install the (fake) Prettier package from aMarCruz/prettier.

yarn add -D aMarCruz/prettierx

Using with VS Code

Install the ESLint extension for VS Code, then add this to the VS Code settings to enable lint and automatic formating on save:

{
  "javascript.format.enable": false,
  "typescript.format.enable": false,
  "eslint.format.enable": true,
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
    "editor.formatOnSave": true
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
    "editor.formatOnSave": true
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
    "editor.formatOnSave": true
  }
}