Something in the eslint-plugin-react docs isn't clear to me.
https://github.com/yannickcr/eslint-plugin-react
It says I should also specify settings that will be shared across all the plugin rules (picture below).
But it doesn't say where should I add those settings. Should I add it to the .eslintrc.json file as a top-level property? Where else could it be?
Yes, they mean your project ESLint config that is usually .eslintrc.json.
By settings they mean the Shared Settings in the config.
Related
I have a react monorepo project with a number of aliases (typescript paths) setup which makes importing files easier without the need to use relative paths everywhere.
For example if I have a component in src/components/Sidebar/Toggle.jsx and I want to import that anywhere in the application I can just do import {Toggle} from '#company/components/Sidebar/Toggle' and there’s no need to do any relative path importing like ../../../Toggle.
Company is just an example alias to the src directory setup in tsconfig.json like:
"paths": {
"#company/*": ["./src/*"]
},
This works fine in vscode but in neovim (I’m using nvim-lspconfig with eslint) all exported functions which are imported using the alias have a warning
Exported declaration not used within other modules
even though they are.
If I import them using relative paths it works without warning.
Does anyone have a suggestion as what config I need to change so that neovim can see that these functions are in fact used in other files?
I've tried adding config in .eslintrc.json like this as suggested by https://www.npmjs.com/package/eslint-import-resolver-typescript but this did not solve it.
settings: {
'import/resolver': {
typescript: {
project: ['packages/*/tsconfig.json'],
},
},
}
I should also note that running eslint directly on the file with my current configuration works fine with no errors so this is somehow related to the neovim plugin.
With a bit more debugging I can see that the eslint plugin doesn't seem to be using the correct configuration file as it's root. There is an .eslintrc.js file in a sub folder but the main .eslintrc.js file lives higher up in the directory tree. The plugin seems to find the first .eslintrc.js and use that as the root file.
This seems to have turned out to be related to the eslint plugin in nvim-lsp. More here https://github.com/neovim/nvim-lspconfig/issues/2400
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.
The build files generated through create react app have different names(hash code) every time.
I would like to give a custom names for the generated files.
Is there any possibility to do the same?
You can change the output filename by customizing the filename property in webpack config -- refer to https://webpack.js.org/guides/caching/
The default implementation is kept like this because, because every time you build an asset, it generates a new name and browsers won't be able to serve a cached response.
If you change the name to a constant you might need to clear the browser cache manually/ disable cache to see your changes immediately. (I think...Applicable only in prod mode as dev mode makes use of Hot module replacement)
Steps to change file name in CRA.
npm run eject This will unwind the hidden configs from CRA and show some additional config folders
Move to the config folder.
Edit file webpack.config.js (Somewhere around line 172 - 180 you can see filename: section where this is defined)
Following up to my comment, if you absolutely must change Webpack configuration you can also consider libraries such as:
Craco
Rescripts
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 am trying to configure jshint in package.json. I am using gulp and this is an angular project. I have added the below code in package.json
"jshintConfig":{
"globals":{
"angular": false
}
}
But it seems jshint is not picking it up.
I did this to avoid the below error I was getting on running jshint
line 3 col 1 'angular' is not defined.
Not all editors support reading jshint configuration from package.json.
For example, check out this discussion for Atom in which they ended up implementing it after all (it wasn't supported in the beginning).
I would invite you to move your settings outside package.json and use the .jshintrc approach instead. In fact, even jshint itself is using that approach as you can see in their repo. The .jshintrc is more dynamic, as you can place different .jshintrc files per folder and fine-tune your settings (e.g. different settings for your unit tests folder and different settings for your client side scripts).
An example of it working is at https://stackoverflow.com/a/26288458/1587329, which uses "angular": true. Alternatively, you can try to use
"jshintConfig": {
"predef": ["angular"]
}