Eslint config: StandardJS, Typescript, Prettier

A simple eslint config for modern TypeScript projects.

This package configures eslint with:

• Typescript support https://github.com/typescript-eslint/typescript-eslint
• StandardJs rules https://github.com/standard/eslint-config-standard
• Prettier rules https://github.com/prettier/eslint-plugin-prettier
• @typescript-eslint/recommended rules https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin
• Requires semicolons (from prettier) for consistancy with types
• Disables some opinionated type check rules
• All the dependencies are peerDependencies so you shouldnt have to update this package often

For reference: ./eslint.js.

• Usage
  • 1. Install dependencies
  • 2. Configure eslint and prettier
• FAQ
  • I want fine grained control
  • Eslint cant find my files
  • I want linting to appear as warnings, not errors
• Project future
• Potential issues

Usage

1. Install dependencies

Install all of the peer dependencies listed in this projects package.json.

2. Configure eslint and prettier

The easiest way is to configure your package.json like so:

{
  "eslintConfig": {
    "extends": "standard-typescript-prettier",
    "parserOptions": { "project": "./tsconfig.json" }
  },
  "prettier": "eslint-config-standard-typescript-prettier/prettier"
}

For other config recipes, see I want fine grained control

All done!

FAQ

I want fine grained control

The packages exports a plain object, go nuts!

In an .eslintrc.js:

const config = require('eslint-config-standard-typescript-prettier');

module.exports = {
  ...config,
  parserOptions: { project: "./tsconfig.json" },
  rules: {
    ...config.rules,
    "@typescript-eslint/no-explicit-any": "error",
  },
};

Eslint might be changing their config, which is why a .eslintrc.js format is recommended.

More info: https://github.com/eslint/rfcs/pull/9

In a .prettierrc.js:

module.exports = {
  ...require('eslint-config-standard-typescript-prettier/prettier'),
  semi: false, // This is how you turn off semicolons, by the way
}

Eslint cant find my files

On the CLI, eslint requires the --ext flag (currently):

eslint --ext .ts,.tsx .

I want linting to appear as warnings, not errors

By default, lint errors can become mixed with TypeScript errors during development.

Install eslint-plugin-only-warn, then add it to the mix:

{
  "plugins": ["only-warn"],
  "extends": ["standard-typescript-prettier"],
  "parserOptions": {
    "project": "./tsconfig.json"
  }
}

Want your lint warnings turned into errors?

yarn eslint --max-warnings 1

Project future

Javascript churn is real. This project will be kept up to date only for as long as configuration remains tedious.

Potential issues

The peerDependencies listed are versioned for compatibility. Because you maintain these dependencies in your project, you'll have to keep them all in sync or you could have issues.