I'm developing an application using React and eslint. My problem is that inside my projects src folder there is an 'api-client' folder. Inside this folder are auto generated files used for managing connection to back-end. My problem is that every time I run or make changes to the app I see lots of errors inside the console regarding no-unused-vars and similar. Is there a way to ignore this folder completely? I can't move it outside of the src folder. I'm ignoring this folder in .eslintignore file with the line /src/api-client/*. Any help is really appreciated!
You can specifically tell ESLint to ignore specific files type
Ignore the folder /src/folder-name
Ignore the folder and everything inside it /src/folder-name/**
Ignore the folder and everything inside it of special file type /src/folder-name/**/*.js
I could not find a specific solution but this worked for me.
I needed to disable some react-app rules in a specific folder. So I added this in my packages.json and it ignores the folder. Not sure if there was a way to disable all rules maybe "*" but not sure.
"eslintConfig": {
"extends": "react-app",
"overrides": [
{
"files": [
"src/modules/template/*"
],
"rules": {
"no-unused-vars": "off"
}
}
]
},
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
After running command ,,npm run lint" (lint stands for ,,next lint"), I get error.:
Failed to load config "next/core-web-vitals" to extend from.
Referenced from: /Users/filiptaticek/Desktop/.eslintrc.json
I don't have any .eslintrc.json file on my Desktop and I have this issue even when I make a new NextJS project.
I have .eslintrc.json in my directory with content:
{
"extends": "next/core-web-vitals"
}
And then .eslintrc.js with configuration for Eslint. Any thoughts how to repair it please? Nothing on Stack overflow did help.
The solution: The .eslintrc.json is hidden by default, since it starts with an dot. Due to this it is not visible on my desktop neither finder, but you have to delete and find it through command line.
I want to add the following babel configuration in react-scripts I don't want to eject from cra I want to keep using it without ejecting. I see there is a way to fork the repo and add your custom configuration. But I want to know where exactly I can paste this.
// .babelrc or babel-loader option
{
"plugins": [
["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] // `style: true` for less
]
}
There is, in theory, customize-cra, which lets you do things like override Babel plugins.
Here is a list of things you can do.
It doesn't appear to be maintained at time of writing, and for me didn't seem usable if your project is modules-based (ie import) as opposed to require.
CRA itself recommends forking their scripts as an alternative to ejecting, which is a pretty bold statement.
If you wish to override a property of one of the config files of React, you can just create that config file in your project's main directory and just set that single property, this will override that property in React's configuration. For babel you can just add it as a property in package.json like so:
"babel": {
"presets": [ ... ],
"plugins": [ ... ],
}
If you run npm run-script eject you are going to get a copy of all the config that ReactJS uses for your project in the main directory of your project/config, from there you can edit whatever you like, keep version tracking of your changes and not mess with the react repository.
If you insist on forking it you can fork the main create-react-app repository from here, which contains the react-scripts here
I am trying to use the .jsx file type and have created a custom .babelrc file as per the Next.js documentation (see below). https://github.com/zeit/next.js#customizing-babel-config
{
"plugins": [
["transform-react-jsx", {
"extensions": [".jsx"]
}]
],
"presets": [
"next/babel"
]
}
However with the above .babelrc file I receive the following error:
Can someone point me in the direction as to what I am doing wrong to get jsx files to load properly?
Cheers,
Stefan
Next.js has support for .jsx files out of the box. There should be no need to customize your .babelrc, so you can either use the default one or just delete it altogether.
Make sure you are running the latest version of Next.js, and possibly delete the node_modules and the .next folder in your project directory. Then install the dependencies again & build.
I have recently added ESLint-ing into my angular application and soon realised I needed the eslint-plugin-angular plugin in order to get my application to be linted correctly.
Prior to this, I was using the extends property in my .eslintrc file and setting to eslint:recommended to make use of the eslint recommended rule set.
{
"extends": "eslint:recommended"
}
I tested this worked by adding a trailing comma to an object definition in my code to make sure I saw an error appear from eslint.
Now, following the guides for the eslint-plugin-angular, I have also installed eslint-config-angular and I see that the quickest way to get started is using the shareable config.
If I use the extends angular config option in place of my current:
{
"extends": "angular"
}
I no longer get my error thrown for an unexpected trailing comma.
So, is there a way I can use both angular and eslint:recommended in the extends config option?
E.g:
{
"extends": ["angular", "eslint:recommended"]
}
(which I know does not work)
If not, does this mean I have to create a rules config object in my .eslintrc to mimic the recommended ones from eslint?
{
"extends": "angular",
"rules" : {
...
}
}
I can't speak to whether or not there was a code change between the time this SO article was entered but I am using "extends": ["eslint:recommended", "angular"] in my .eslintrc file and it is working fine. I have it at the same level as the "env" property.
My package.json file has eslint and eslint-plugin-angular versions 2.3.0 and 0.5.0, respectively.
If you are using TypeScript (like Angular2 is) you can use tslint.
There are eslint rules for tslint and tslint-microsoft-contrib from Microsoft.
Finally, there's a rule set for Angular2: codelyzer