standard / ts-standard

Typescript style guide, linter, and formatter using StandardJS
https://www.npmjs.com/package/ts-standard
MIT License
473 stars 36 forks source link

when trying to use it with create-react-app, it breaks with non-null (!) operator #105

Closed ospfranco closed 3 years ago

ospfranco commented 3 years ago

What version of this package are you using? "ts-standard": "^9.0.0", What operating system, Node.js, and npm version? macOS Big Sur node 12.18.3 What happened? I tried adding ts-standard to a blank create-react-app What did you expect to happen? In this particular case I tried to use the non-null operator on a variable that can be null, however this seams to break down and not work at all, it is probably some misconfiguration on the internal eslint rules?

Screenshot 2020-11-25 at 19 47 48

Are you willing to submit a pull request to fix this bug? No, sorry, don't know how eslint or this package work

ospfranco commented 3 years ago

A bit more information, I added the following config on my package.json:

"ts-standard": { "parser": "babel-eslint", "env": [ "jest", "es6", "browser" ], "ignore": [ "build/*" ] }

and on my workspace settings:

{
  "typescript.tsdk": "node_modules/typescript/lib",
  "standard.autoFixOnSave": true,
  "javascript.validate.enable": false,
  "standard.engine": "ts-standard",
  "standard.usePackageJson": true
}

and that effectively got rid of the error on vscode, however when running on the browser, the error pops again and breaks the compilation of the program

ospfranco commented 3 years ago

never mind, nothing wrong with this package, seems it is disabled on the eslint rule set itself

https://github.com/standard/eslint-config-standard-with-typescript/issues/422

the fact there is no description of the error though, is very very confusing

LinusU commented 3 years ago

@ospfranco is your file ending in .js? This isn't the rule that is complaining, the parser is complaining that it can't understand the file (since ! there is only valid TypeScript, not JavaScript)

ospfranco commented 3 years ago

no, my file is valid typescript, after I removed ts-standard and manually installed the standard-typescript-eslint configuration and modified the rule myself it ran without problems

LinusU commented 3 years ago

my file is valid typescript

Yes, exactly. But it isn't valid JavaScript, and it seems like ts-standard is trying to parse the file as JavaScript. I'm trying to figure out why that is.

Is the file extension of your file .js, or is it .ts?

Potentially ts-standard looks at the file ending, whilst a custom eslintrc config wouldn't...

ospfranco commented 3 years ago

no, it was a .ts file

LinusU commented 3 years ago

Interesting, I don't have time to setup a create-react-app and test right now, but it should work out of the box with ts-standard so something is broken 🤔

toddbluhm commented 3 years ago

So update on this from my end.

I just created a default create-react-app using the following command npx create-react-app my-app --template typescript --use-npm.

I then proceeded to install ts-standard and run ts-standard --fix there were a few errors (because the template is not standard compliant). I also had to update the tsconfig.json to use "jsx": "react" instead of "react-jsx" which does not exist.

After fixing all of that, ts-standard ran as expected. One thing I noticed in the original config sent was the usage of babel-eslint for the parser setting. When I added that, everything went crazy and ts-standard broke. ts-standard already includes the correct parser so there is rarely ever a reason to change the parser. If you wish to change the parser I suggest just using standard with the custom parser instead.

If someone really wants to make ts-standard compatible with the babel parser, they are welcome to open a PR for it. I suspect it will be quite challenging as babel's typescript parser does not support the full typescript language specification.

ospfranco commented 3 years ago

just in case other people run into the same issue:

You are not supposed to change the "jsx" version in tsconfig, that happens because you are using vscode integrated typescript, whereas create-react-app is already a few versions ahead, you can revert your change and use 'rect-jsx' if you tell vscode to use the packaged typescript inversion from node_modules instead of the bundled one

As for the other stuff, I ran into more problems with the rules, 100% explicit typing for example, that is just a waste of time so I really gave up on trying to stick to this flavor of standard and I'm using pure eslint with the typescript-eslint-standard rule set which allows for customization, I know it is not the philosophy of standard but I think current ts rule set is too strict for it's own good.

Thanks for the support anyways

toddbluhm commented 3 years ago

@ospfranco thanks for the great feedback. I appreciate all of it and I do understand your concern about the rules. Please feel free to open an issue regarding the rules or a specific rule in https://github.com/standard/eslint-config-standard-with-typescript where all the rules are determined and can be changed. The Typescript side of the rules is very much still evolving and changing as more people begin to use them, so any and all rule change suggestions are welcomed 😄