Typescript Beta
wesbos opened this issue · comments
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
, runnpx 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 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
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
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?
@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.
Need to look at "no-redeclare"
"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 use Record type https://www.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-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 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.
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.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
@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.
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-21Did 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.
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
.
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
Beta 10 is out, going to test it with next.js and CRA and then Ill probabky release it
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.
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 🙂