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
Related
I am trying to learn Gatsby and I included prettier-eslint plugin with a common configuration. You can see my configuration, the files, etc
When I try to add a css file I get this error:
Have you tried using the following?
eslint: {
patterns: "**/*.{js,jsx,ts,tsx}",
customOptions: {
fix: true,
cache: true,
},
},
The eslint pattern seems to be a string, not an array according to the plugin's example.
This seems to be an unresolved issue of the plugin, according to this opened issue (from a week ago), so keep an eye on that stack trace to see how it evolves. If the dependency has a bug when using the defaults (and suggested) configuration, there's nothing you can do except making a PR if you are able to spot the bug in the source code or wait for the resolution.
I had the same issue. Turns out you must have a prettier config (.prettierrc or similar) set up. Check to make sure you have a config as mentioned in the Prettier docs.
I'm using the next npm package which already requires the prop-types library. prop-types works as expected when I import it.
The problem is ESLint is telling me "'prop-types' should be listed in the project's dependencies". I've attempted to set the ESLint rule:
"rules": {
"react/prop-types": "off",
},
also
"rules": {
...
"import/no-extraneous-dependencies": [
"error", {
"devDependencies": true,
"optionalDependencies": true,
"peerDependencies": true,
"bundledDependencies": true
}
]
}
However, the ESLint error is still being detected. I don't want to add prop-types to my package.json because it's already included with next. I've seen that these attempts have worked for React.js apps, but it does seem to be working for my Next.js app. Is there anyone that could shed more light on this issue I'm having?
It doesn't matter which package is having which dependency, if you're directly using a package, it is recommended that it should be your dependency too. I'm not one of the developers of eslint-plugin-import, but the inspiration behind the rule would probably have been somewhat like this:
It may happen that a package foo may stop bundling a certain package bar with it, or maybe foo changes bar's version. But since which packages a package internally use don't affect semantic versioning until the exposed methods and behavior are the same, you may not even get a major version update. This means that you'll still have "foo": "^a.b.c" in your package.json, but bar will be updated. And if you are using bar without explicitly specifying it in your dependencies, you're are left with a code that may not work as intended, or may not work at all.
Now coming to your problem, you need to disable import/no-extraneous-dependencies to ignore that (linter) warning/error. To do that you can refer the docs: Disabling Rules with Inline Comments and Configuring Rules. However, the simplest method will be to keep using the rule, and just ignoring it for a line:
// eslint-disable-next-line import/no-extraneous-dependencies
import PropTypes from 'prop-types';
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?
Update
I added a .eslintc file to the root of my client app and, in it, added this JS Object:
{
"extends": "react-app",
"plugins": ["prettier"]
}
That removes the linting problems from displaying in my IDE but still leaves Prettier in a bad state; that is, when I format, Prettier adjusts my code in a way that produces a ton of errors.
I think I need to next adjust the config rules that are guiding how my Prettier plugin functions. Any help with that would be appreciated. My ultimate goal is to get Prettier/ESLint to function as they do originally when shipped with Create React App. Thanks for the help so far!
End Update
I've been building a project that is using React and Material-UI on the front-end. I'm using VSCode as my IDE with ESlint and Prettier. I had originally initiated the front-end of the project with Create React App.
All had been going well until I did something - and I have no idea what - to make my ESLint become super stringent. It's now presenting problems all over, whereas the same code previously had zero linting problems, and no changes to the code have been made.
I've also been using Prettier and now, because of these linting problems, when I format with Prettier, the code adjusts to address the Linting problems. Which causes actual errors.
I've been searching all over. I installed ESlint Plugins, been digging around, looking for (and creating .eslintrc.json) files. Nothing seems to work. It is making work on this project much more difficult.
What did I do? How do I fix it?
Thank you.
Add or Update your .eslintrc.js file
set indent off
set globals false if it (definition not found)
Hope it helps
module.exports = {
rules: {
indent: 'off',
'new-cap': [0]
},
globals: {
db: false,
mongoose: false,
response: false,
offline: false
}
};
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