Typescript Beta

[wesbos]

Okay, I've put together a beta for typescript support.

I've run it through a few projects, but likely haven't hit every issue so I'm looking for testers. Both for errors as well as suggestions on rules. It's mostly based on my own existing eslint as well as airbnb's typescript rules.

to run:

1. In a project with package.json, run npx install-peerdeps --dev eslint-config-wesbos@2.0.0-beta.0
2. In your package.json add this:

  "eslintConfig": {
    "extends": "wesbos/typescript.js"
  },

3. I needed to create an empty tsconfig.json in the root for it to work.

Then the rest of the steps for VS code or CLI will work.

let me know what you think / run into!

[KhaVNguyen]

Hi Wes, thanks for putting this together. Loved this for javascript and excited to use it with typescript.

I setup my project with NextJS and Styled Components and everything looks great aside from my styled components complaining here:

Thanks Wes.

[KhaVNguyen]

Hi Wes, thanks for putting this together. Loved this for javascript and excited to use it with typescript.

I setup my project with NextJS and Styled Components and everything looks great aside from my styled components complaining here:

Thanks Wes.

Following up on this. Any fixes, Wes? Thanks.

[wesbos]

hmm! It seems like there are no typing for the styled-components lib in your project and it's being an implicit any. I can replicate myself.

I have a working project too though and it should look like this:

will dig in a bit more

[wesbos]

The above was .js, to get it working with .tsx, you need npm i --save-dev @types/styled-components

then I had to restart my editor.

So I don't think that has anything to do with this config. In fact it was catching implicit any

[wesbos]

Okay Beta 3 is out:

To install:

npx install-peerdeps --dev eslint-config-wesbos@2.0.0-beta.3

Then in your package.json:

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

Then make a tsconfig.json file:

{
  "extends": "eslint-config-wesbos/tsconfig.json",
  "include": [
    "**/*"
  ]
}

This now allows you to mix .js and .ts files in a project

[wesbos]

turn off no-explicit-any

[tmkkz]

Thank you for useful project.

I created .eslintrc file to override setting.

.eslintrc

{
  "extends": [
    "eslint-config-wesbos/typescript.js"
  ],
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "semi": true,
        "singleQuote": false,
        "trailingComma": "all"
      }
    ]
  }
}

but, my project created by

yarn create react-app myproject --template typescript

App.tsx

import React, { ReactElement } from 'react';
import logo from "./logo.svg";
import './App.css';

Problems
'React' was used before it was defined.
Replace 'react' with "react"
Strings must use singlequote.
Strings must use singlequote.
Replace './App.css' with "./App.css"

This means "singleQuote: false" does not work.

How can I override settings?

[KhaVNguyen]

Is there a way to enable "baseUrl": "." so that we can have absolute imports like this?

I tried adding the "baseUrl": "." to the tsconfig.json but it doesn't do anything.

[AlonMiz]

@KhaVNguyen you should define "paths"
this is my tsconfig.json and I'm working with alias.

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "jsx": "react",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitAny": false,
    "strictNullChecks": false,
    "baseUrl": "src",
    "paths": {
      "views/*": ["./views/*"],
      "components/*": ["./components/*"],
      "utils/*": ["./utils/*"],
      "hooks/*": ["./hooks/*"],
      "settings/*": ["./settings/*"],
      "assets/*": ["./assets/*"]
    }
  },
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Recommended"
}

i do have issues with working without the "root": true flag though.

[wesbos]

Need to look at "no-redeclare"

https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-redeclare.md

      "no-redeclare": "off",
      "@typescript-eslint/no-redeclare": [
        "warn",
        {
          "ignoreDeclarationMerge": true,
        }
      ]
    }

[wesbos]

Published a new version 2.0.0.beta.5, adding these rules:

'@typescript-eslint/no-explicit-any': 'off',
    'no-redeclare': 'off',
    '@typescript-eslint/no-redeclare': [
      'warn',
      {
        ignoreDeclarationMerge: true,
      },
    ],

And for JSX:

'react/jsx-props-no-spreading': 'off',

[imcodingideas]

It seems that the current eslint doesn't like when you use Record type https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeystype

[miguel-krasamo]

Any chance we can get a fix for the linter when using prettier > 8.0.0 ? I think you already fixed it for js. but I'm using ts.

[wesbos]

@miguel-krasamo Sure! Can you test out eslint-config-wesbos@2.0.0-beta.6 - if that works ill push it to the JS version as well