How can I allow createReactApp to compile despite warnings from TSLint or ESLint ?
For example, compilation will stop on [tslint] block is empty (no-empty) which is very annoying.
I want the warning to show but not to block compilation.
How can I achieve that ?
You should be able to adjust your tslint.json file to show tslint problems as warnings instead of errors, which should allow your code to compile.
https://github.com/wmonk/create-react-app-typescript/issues/238#issuecomment-360142264
Indeed - the plugin we're using for tslint refers to the severity defined configuration file (i.e. tslint.json). If there is no severity defined, everything will fire up on error level.
It should be possible to use the warning level by adding "defaultSeverity": "warning" to the tslint.json in the generated project's root directory. Can you give this a try?
Related
I've created an app with npx create-react-app my-app --typescript and I would like to configure it so that my app will still compile despite typescript errors so that I can return to them when I'm ready.
I do not see any compilerOptions for this. Is it possible?
{
"compilerOptions": {
...
strict: false
}
)
Admittedly a Typescript noob but this took me forever to figure out. CRA defaults strict to true which will fail the compilation for a wide range of errors. This is extremely implicit and it looks like setting this to true does quite a few other things as well:
enables --noImplicitAny, --noImplicitThis, --alwaysStrict, --strictBindCallApply, --strictNullChecks, --strictFunctionTypes and --strictPropertyInitialization.
There are other errors I'm still getting a failed compilation for ie:
Property 'property' does not exist on type 'unknown'.
I can get around it without much hassle and maybe I'm not using Typescript the way it is meant to be used but all I want is to see the warnings in my IDE so I can return to them when I'm ready after I at least have some proof of concept. Drove me a little crazy to the point where I was considering restarting without TS even though I really like it and have benefited from using it.
I think there should be something on the tsconfig docs with at least a brief summary of the implications from this strict option, but I digress.
I've recently started using TypeScript with Expo. I've done all the linter/formatter integrations like typescript-eslint so I can catch most of the errors during coding. To check if the code compiles, I run npx tsc every once in a while and fix accordingly.
One thing that I haven't fully grasped yet is why my app builds successfully even when there are numerous compile errors. I expect (and prefer) to see a red screen error for every compile error rather than the app build successfully and me find it out later. For example,
function square<T>(x: T): T {
console.log(x.length); // error TS2339: Property 'length' does not exist on type 'T'.
return x * x;
}
is a typical TypeScript error that (I believe?) can be easily checked at compile time. I want it to result in a big red screen error and the build to fail.
I'm quite new to TypeScript so it's possible that I'm missing something very important. What exactly is causing this leniency and is there a way to enforce stricter checks?
The first thing to understand is that Typescript is a superset of Javascript, and in this case it doesn't actually get type checked during compilation.
Essentially what happens is Babel just strips out the Typescript and converts it to Javascript, which then gets compiled into the js bundles.
You can take a look at the first line of the following Babel docs as well as the caveats:
https://babeljs.io/docs/en/next/babel-plugin-transform-typescript
Since Babel does not type-check, code which is syntactically correct, but would fail the TypeScript type-checking may successfully get transformed, and often in unexpected or invalid ways.
What I would suggest is extending your build command to first include tsc or rather Typescript compilation, with noEmit set to true in your tsconfig.
Update: I found another instance where this applies recently when adding jest and typescript to a project. At the bottom of the Jest docs they actually state the same thing:
https://jestjs.io/docs/en/getting-started#using-typescript
However, there are some caveats to using TypeScript with Babel. Because TypeScript support in Babel is transpilation, Jest will not type-check your tests as they are run. If you want that, you can use ts-jest.
The straight answer to this question is: Babel, strips out all typescript marks before compiling. Therefore you won't see it erroring out in the cli.
I've got a sort of weird problem, that I don't see any mention of elsewhere.
Create React App by default seems to log lint warning in the terminal when running yarn start and also in the Chrome console. All good. Makes sense, and I've seen discussions of whether this functionality should exist, and how it should work.
My issue is that those warnings seem not to match my .eslintrc settings at all!
As in, if I run yarn lint, which runs eslint using my settings, I see none of the warnings that show up in the console and terminal when I start my app.
For example, I have this rule turned off in my .eslintrc file:
"radix": 0,
And, consequently, there's no radix warning when I run yarn lint.
(Just in response to the answer below. I've tried a variety of options for this particular rule, including "as-needed". But I wanted to turn the rule off entirely, which I've evidently accomplished, because running yarn lint shows no errors related to radix at all).
But when I start the app, I see this in yellow warning boxes in the console:
Anybody know why my .eslintrc file is being ignored here, and how to get these warnings to represent the rules I've set?
According to the docs, you should pass either "always" or "as-needed". The latter should disable those warnings.
...
"radix": "as-needed",
...
EDIT: According to this source, you will have to eject your create-react-app to edit the ESLint settings.
It is possible to add EXTEND_ESLINT flag to the .env file.
When set to true, ESLint configs that extend eslint-config-react-app will be used by eslint-loader. Any rules that are set to "error" will stop the application from building.
Source: https://create-react-app.dev/docs/advanced-configuration
Your eslint config may be named .eslintrc.json and put in the root folder of your project.
Its contents should look like the following (note the extends field):
{
"extends": "react-app", //this extends statement is required
"rules": {
"radix": "as-needed"
}
}
And the .env file placed in the root should have the following line:
EXTEND_ESLINT=true
I'm running
node_modules/.bin/eslint app.jsx
and it returns nothing. I know there are errors on the page however. Anyone know what is going on? I don't even get a message on screen.
If I run:
node_modules/.bin/eslint --ext=js --ext=jsx
I'll see the errors in app.jsx.
The reason I am doing just a single file is because I just turned on airbnb with eslint on create-react-app and I have a lot of errors to fix I wanted to do it slowly.
I guess your app.jsx is in a "src" folder, right? So you have to add it in your command like this:
node_modules/.bin/eslint ./src/app.jsx
Nico
I am using this generator to build react application. All the warnings listing in console; Its messing console all and very annoying
how can I turn it off ? I checked webpack.config file but cant see any info about it
The warnings are a result of the generator's eslint configuration. To change the config project-wide look for the .eslintrc file in the project's root directory. To stop reporting unused variables e.g., add a line with "no-unused-vars": 0 to the config.
To read up on the eslint rules and how to configure them it is best to look them up on their website, e.g.
no-unused-vars
quotes
no-undef
comma-dangle
no-console
no-trailing-spaces