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.

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.

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

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

will dig in a bit more

The above was.js,to get it working with.tsx,you neednpm 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

Okay Beta 3 is out:

To install:

npx install-peerdeps --dev [email protected]

Then in your package.json:

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

Then make atsconfig.jsonfile:

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

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

turn off no-explicit-any

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?

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

I tried adding the"baseUrl": "."to thetsconfig.jsonbut it doesn't do anything.

@KhaVNguyenyou 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": trueflag though.

Need to look at "no-redeclare"

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

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

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',

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

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.

@miguel-krasamoSure! Can you test out[email protected]- if that works ill push it to the JS version as well

@miguel-krasamoSure! Can you test out[email protected]- 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 removeprettier/reactto make the linter work again.

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

It's working properly on beta 7. Thanks!

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 /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

@ThomasGuyhave 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.

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 /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@wesboswhen trying to update Nextjs to 11 and figured I would update from beta 4 to beta 7.

@ThomasGuyhave 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.

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 theextendseslint config.

It appears Next is usingeslint-config-prettier v7.2.0which is still looking for the oldprettier/@typescript-eslintsetup instead of unified version introduced ineslint-config-prettier 8.0.0.

Hi Wes,
I tried thebeta7withCRAand I ended up with the@typescript-eslinterror.
I did some refactoring based on thisissueby installing@babel/eslint-parserand changing the references fromprettier/@typescript-eslinttoprettier.
This seemed to fix everything in the CLI, and I was able to runeslint.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 theeslint cannot read __dirname/tsconfig.jsonerror.
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

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

Beta 11 is out →#97

Hi Wes do i need to update anything i have gone through this article still throwing errors
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
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.

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 🙂