nfour/eslint-config-standard-typescript-prettier

A simple eslint config for modern TypeScript projects.

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

For reference: ./eslint.js.

---

• 1. Install
• 1.1 Install Peer Dependencies
• 2. Configure
• 3. Bonus configure
• FAQ
  • I want fine grained control
  • Eslint cant find my files
  • I want linting to appear as warnings, not errors
• Project future
• Potential issues

---

1. Install

Note: For an even "easier" install option, see eslint-config-nfour

yarn add -D eslint-config-standard-typescript-prettier

1.1 Install Peer Dependencies

Install all the peer dependencies listed in this projects package.json into your project.

This should do the trick:

npx install-peerdeps -o --dev --yarn eslint-config-standard-typescript-prettier

2. Configure

Add this to your package.json:

"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

3. Bonus configure

Add the comment below to get type checks on your rules in a .eslintrc.js

/** @ts-check @type import('eslint-config-standard-typescript-prettier/types').TsEslintConfig */

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: eslint/rfcs#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.

eslint-plugin-only-warn is already included in this package, so do this:

{
  "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.

eslint-config-standard-typescript-prettier's Issues

Error with no-use-before-define and React

When using this module in a React with Typescript problem you get an error with no-use-before-define in every file you use the React import.

'React' was used before it was defined. (eslint/no-use-before-define)

This can be fixed by re-enabling the @typescript-eslint/no-use-before-define that you disabled. Why did you disable this useful rule?

So in .eslintrc.json add:

  "rules": {
    "no-use-before-define": "off",
    "@typescript-eslint/no-use-before-define": ["error"]
  }

What should I add to my package scripts?

Wondering what do I actually run or add to my package scripts to dot he check? Given I see it uses prettier, standard, and eslint it's just not clear to me.

By the way, thanks for this! I have been struggling with configuring all of these things.

[email protected] requires a peer of eslint-plugin-standard

npm WARN [email protected] requires a peer of eslint-plugin-standard@^5.0.0 but none is installed. You must install peer dependencies yourself.

standard/standard#1316

Add a license?

Would you consider licensing your code? Without it, I suspect a lot of people will be in a position where they don't feel comfortable using it.

Happy to help or submit a pull request, but, along with providing a guide to make a decision, Github makes it easy to add a license to your repo.

Thanks for considering it!

[Suggestion] Use `prettierx`

The package prettierx was created to allow usage of prettier along with standardjs formatting. Maybe it would improve your setup to use it.

Possibly inconsistent behavior: rules and file types

Hi again. :)

First off, I hope you continue maintaining this project. This is by far the easiest way to get estlint+standard+tyepscript working given the known issues in making these things work together when doing so manually. Thanks!

I have encountered a couple of issues though that I wonder if you can comment on (admitting that they're quite likely my fault):

1. I'm seeing at least one standard-inconsistent rule in ts files. I believe Standard wants a space before function parens (space-before-function-paren), but when using this in my library, auto-fix based is removing those spaces. EDIT: OK, it seems eslint and prettier are fighting and in my case. So this is the rabbit-hole that led me here in the first place: Prettier refuses to add options that make it Standard-compliant, so prettierx was created, but then editors plugins don't know about prettierx. Standard actually has a formatter (and editor plugins), but there's a bug for TS support so they recommend StandardX. Luckily plugins often recognize StandardX, but standardx has a known bug as well. :P
2. I'm developing with Quasar/Vue, which does allow for TS, but is currently a mix of JS and TS. When installing with the recommendations in the README, I was seeing TS errors in JS files (e.g., a lack of typing). I had to do the following in my existing .eslintrc.js file:

const config = require('eslint-config-standard-typescript-prettier')
module.exports = {
  STUFF FROM QUASAR
  overrides: [
    {
      ...config,
      files: ['**/*.ts', '**/*.tsx']
    }
  ]
}

Should I have been able to just do the appropriate mixing of config? For example

const config = require('eslint-config-standard-typescript-prettier')
module.exports = {
  ...config,
  rules: {
    ...config.rules,
    RULES FROM QUASAR
  }]
}

Because I'm not sure if the second problem is causing the first or if I'm just missing something important, I've included both in this one issue. If you tell me they are both real issues, I'll go back and add them to the tracker as separate issues.

Thanks again!

error in type checks on rules in eslintrc.js

The type checks is not working for @typescript-eslint rules. I cloned and repo and tried on the eslint.js file. It works once I change the import from

export type TsEslintPluginRules = Record<
  keyof typeof import('@typescript-eslint/eslint-plugin/dist/configs/all.json')['rules'],
  any
>;

to

export type TsEslintPluginRules = Record<
  keyof typeof import('@typescript-eslint/eslint-plugin/dist/configs/all.js')['rules'],
  any
>;