Typescript Beta #68

wesbos · 2020-11-26T20:40:35Z

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:

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

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

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!

The text was updated successfully, but these errors were encountered:

KhaVNguyen · 2020-11-28T03:22:08Z

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 · 2020-12-07T22:45:49Z

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 · 2020-12-08T00:30:11Z

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 · 2020-12-08T00:48:47Z

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 · 2020-12-08T01:49:01Z

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 · 2020-12-16T17:41:17Z

turn off no-explicit-any

tmkkz · 2020-12-24T06:24:16Z

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 · 2020-12-28T02:49:47Z

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 · 2021-01-16T18:18:03Z

@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 · 2021-01-21T14:23:55Z

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 · 2021-04-28T14:20:01Z

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 · 2021-05-12T16:04:50Z

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 · 2021-05-25T21:17:03Z

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 · 2021-05-26T17:22:13Z

@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 · 2021-05-26T20:33:52Z

@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 · 2021-05-27T14:10:39Z

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

miguel-krasamo · 2021-05-27T20:14:53Z

It's working properly on beta 7. Thanks!

ThomasGuy · 2021-06-12T02:19:19Z

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 · 2021-06-14T14:18:26Z

@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 · 2021-06-16T19:54:19Z

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 · 2021-08-09T16:45:26Z

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 · 2021-08-24T13:35:52Z

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 · 2021-09-07T16:17:01Z

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

wesbos · 2021-09-07T19:20:54Z

Beta 11 is out → #97

B4U2UMER · 2023-01-28T06:37:40Z

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 · 2023-01-28T08:06:18Z

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 🙂

wesbos mentioned this issue Nov 26, 2020

Using together with typescript? #33

Closed

wesbos closed this as completed Sep 9, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Typescript Beta #68

Typescript Beta #68

wesbos commented Nov 26, 2020 •

edited

Loading

KhaVNguyen commented Nov 28, 2020

KhaVNguyen commented Dec 7, 2020

wesbos commented Dec 8, 2020

wesbos commented Dec 8, 2020

wesbos commented Dec 8, 2020

wesbos commented Dec 16, 2020

tmkkz commented Dec 24, 2020

KhaVNguyen commented Dec 28, 2020

AlonMiz commented Jan 16, 2021 •

edited

Loading

wesbos commented Jan 21, 2021 •

edited

Loading

wesbos commented Apr 28, 2021

imcodingideas commented May 12, 2021

miguel-krasamo commented May 25, 2021

wesbos commented May 26, 2021

miguel-krasamo commented May 26, 2021

wesbos commented May 27, 2021

miguel-krasamo commented May 27, 2021

ThomasGuy commented Jun 12, 2021

miguel-krasamo commented Jun 14, 2021

imcodingideas commented Jun 16, 2021

RobEasthope commented Aug 9, 2021

islami00 commented Aug 24, 2021

wesbos commented Sep 7, 2021

wesbos commented Sep 7, 2021

B4U2UMER commented Jan 28, 2023

Asjas commented Jan 28, 2023

Typescript Beta #68

Typescript Beta #68

Comments

wesbos commented Nov 26, 2020 • edited Loading

KhaVNguyen commented Nov 28, 2020

KhaVNguyen commented Dec 7, 2020

wesbos commented Dec 8, 2020

wesbos commented Dec 8, 2020

wesbos commented Dec 8, 2020

wesbos commented Dec 16, 2020

tmkkz commented Dec 24, 2020

KhaVNguyen commented Dec 28, 2020

AlonMiz commented Jan 16, 2021 • edited Loading

wesbos commented Jan 21, 2021 • edited Loading

wesbos commented Apr 28, 2021

imcodingideas commented May 12, 2021

miguel-krasamo commented May 25, 2021

wesbos commented May 26, 2021

miguel-krasamo commented May 26, 2021

wesbos commented May 27, 2021

miguel-krasamo commented May 27, 2021

ThomasGuy commented Jun 12, 2021

miguel-krasamo commented Jun 14, 2021

imcodingideas commented Jun 16, 2021

RobEasthope commented Aug 9, 2021

islami00 commented Aug 24, 2021

wesbos commented Sep 7, 2021

wesbos commented Sep 7, 2021

B4U2UMER commented Jan 28, 2023

Asjas commented Jan 28, 2023

wesbos commented Nov 26, 2020 •

edited

Loading

AlonMiz commented Jan 16, 2021 •

edited

Loading

wesbos commented Jan 21, 2021 •

edited

Loading