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

[miguel-krasamo]

@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

I was able to test out the beta.6 just now.

with the comment: // Can I remove these now? you mean the following code?

ecmaFeatures: {
      impliedStrict: true,
      classes: true,
    },

If yes, I deleted it and found no significant changes yet.

At first I thought my modules didn't update so I removed them and install everything again.
it seems beta.6 still has this line:

extends: ['airbnb', 'prettier', 'prettier/react'],
which should be now when having prettier > 8.0.0
extends: ['airbnb', 'prettier'],

So I still needed to manually remove prettier/react to make the linter work again.

[wesbos]

thanks! I just removed those two bits and published a beta 7

[miguel-krasamo]

It's working properly on beta 7. Thanks!

[ThomasGuy]

Hi Wes,
using beta7 with ts I'm getting an error.
Error: "prettier/@typescript-eslint" has been merged into "prettier" in eslint-config-prettier 8.0.0.
So In your "eslint-config-wesbos/typescript.js" I tried replacing 'prettier/@typescript-eslint' with 'plugin:prettier/recommended' this seams to stop ESLint in vscode from complaining. Got this from github/prettier
See: https://github.com/prettier/eslint-config-prettier/blob/main/CHANGELOG.md#version-800-2021-02-21

Did you mention you'll be bring out out a typescript course?
Thanks I've learned alot from your previous courses

[miguel-krasamo]

@ThomasGuy have you tried to delete modules folder and install them again? I've been using beta 7 for the past days and I don't get the prettier issue anymore.

[imcodingideas]

Hi Wes,
using beta7 with ts I'm getting an error.
Error: "prettier/@typescript-eslint" has been merged into "prettier" in eslint-config-prettier 8.0.0.
So In your "eslint-config-wesbos/typescript.js" I tried replacing 'prettier/@typescript-eslint' with 'plugin:prettier/recommended' this seams to stop ESLint in vscode from complaining. Got this from github/prettier
See: https://github.com/prettier/eslint-config-prettier/blob/main/CHANGELOG.md#version-800-2021-02-21

Did you mention you'll be bring out out a typescript course?
Thanks I've learned alot from your previous courses

I am also getting this same error @wesbos when trying to update Nextjs to 11 and figured I would update from beta 4 to beta 7.

@ThomasGuy have you tried to delete modules folder and install them again? I've been using beta 7 for the past days and I don't get the prettier issue anymore.

I've tired this, and still get this error when I build with nextjs.

[RobEasthope]

Just tried beta 7 with the latest version of Next.js and it appera to be a clash with Nexts built in linting config. The only way to clear the error is to remove the "next" and "next/core-web-vitals" from the extends eslint config.

It appears Next is using eslint-config-prettier v7.2.0 which is still looking for the old prettier/@typescript-eslint setup instead of unified version introduced in eslint-config-prettier 8.0.0.

[islami00]

Hi Wes,
I tried the beta7 with CRA and I ended up with the @typescript-eslint error.
I did some refactoring based on this issue by installing @babel/eslint-parser and changing the references from prettier/@typescript-eslint to prettier.
This seemed to fix everything in the CLI, and I was able to run eslint . with no issues. Then I decided to try it with VScode in the src folder of my project which was referenced in the "includes" property of my tsconfig and I got the eslint cannot read __dirname/tsconfig.json error.
Note: eslintrc was not in the working directory, but rather in the root of the project along with tsconfig.json.
Yet that hasn't been an issue with cra

[wesbos]

Beta 10 is out, going to test it with next.js and CRA and then Ill probabky release it

[wesbos]

Beta 11 is out → #97

[B4U2UMER]

Hi Wes do i need to update anything i have gone through this article still throwing errors
npm ERR! While resolving: sick-fits-backend@2.0.0
npm ERR! Found: eslint-config-airbnb-typescript@12.3.1
npm ERR! node_modules/eslint-config-airbnb-typescript
npm ERR! dev eslint-config-airbnb-typescript@"^12.0.0" from the root project

npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

[Asjas]

retry this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

This is your solution in the error you posted 🙂