So I am using aliases in my webpack configuration and I have those eslint warnings about no-extraneous-dependencies etc.
So I installed eslint-plugin-import along with eslint-import-resolver-alias and configured my .eslintrc files like this:
{
"parser": "babel-eslint",
"extends": "airbnb",
"env": {
"browser": true,
"es6": true,
"node": true,
"jest": true
},
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"defaultParams": true
}
},
"rules": {
"react/jsx-filename-extension": 0,
"react/sort-comp": 0,
"linebreak-style": 0,
"prefer-arrow-callback": 0,
"consistent-return": 0,
"func-names": 0,
},
"settings": {
"import/resolver": {
"alias": [
// I have my actions folder in ./shared/actions
["Actions", "./shared/actions"]
]
}
}
}
My linter is not working with this settings options. What am I missing?
The problem has to be with your relative path
"./shared/actions"
Try changing it to
"../shared/actions"
If that does not work, try an absolute path and take it from there.
Basically, the root directory / current working directory, is not the one you think it is...
Related
So I'm using eslint and prettier on a TS express app. I want to set tab width to 4, but it seems the base eslint and the typescript eslint are in conflict.
This is what it gives me for the same line:
This is my eslintrc.json:
{
"env": {
"browser": true,
"commonjs": true,
"es2021": true
},
"extends": "standard-with-typescript",
"overrides": [],
"parserOptions": {
"ecmaVersion": "latest",
"project": "tsconfig.json"
},
"rules": {
"indent": ["error", 4],
"prettier/prettier": ["error", { "endOfLine": "auto" }]
},
"parser": "#typescript-eslint/parser",
"plugins": ["prettier"]
}
This is my prettierrc.json:
{
"singleQuote": true,
"arrowParens": "always",
"printWidth": 120,
"semi": false,
"tabWidth": 4
}
Any idea how to resolve it so I can just have 4 spaces to a tab?
If you're using prettier and eslint, you should use the prettier eslint configuration. It will disable every style-only eslint rule. It should be ok, since styles would be left for prettier to format. See the docs for more info on this.
Since you have the prettier plugin installed, you can change your extends line to this and it should be enough:
"extends": ["standard-with-typescript", "plugin:prettier/recommended"]
THIS is my problems
Eslint cannot find the file's location?
This is the error!
Thank You in advance for the help!
I was having this problem!
Eslint cannot find the file's location because the path of the file is not fully defined, we must specify them in the configuration file.
The reference exists and it works, the problem is that eslint cannot find it. I fix it as follows!
Unable to resolve the module path './Board'. note that Board does not have an extension, that's the problem! We just need to specify eslint how to resolve the extensions and voila.
I assume eslint installed and has problems integrating express node and react js projects
You can use the automatic configuration of eslint follow the steps and when it is installed configure your .eslint.json file add the description of settings
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx"],
"moduleDirectory": ["node_modules", "src/"]
}
}
}
.eslintrc.json the full file look like:
{
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": ["plugin:import/recommended", "plugin:react/recommended", "standard"],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": ["react"],
"rules": {
"semi": [2, "always"],
"comma-dangle": [
"error",
{
"arrays": "only-multiline",
"objects": "only-multiline",
"imports": "only-multiline",
"exports": "only-multiline",
"functions": "only-multiline"
}
],
"space-before-function-paren": 0,
"spaced-comment": [
"error",
"never",
{
"line": {
"markers": ["/"],
"exceptions": ["-", "+"]
},
"block": {
"markers": ["!", "-", "+"],
"exceptions": ["*"],
"balanced": true
}
}
]
},
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx"],
"moduleDirectory": ["node_modules", "src/"]
}
}
}
}
https://eslint.org/docs/user-guide/getting-started
My .eslintrc.json is:
{
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"node": true,
"jest": true
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"sourceType": "module"
},
"plugins": [
"react",
"prettier",
"import"
],
"extends": [
"airbnb",
"airbnb/hooks",
"plugin:#typescript-eslint/recommended",
"plugin:react/recommended",
"plugin:import/errors",
"plugin:import/warnings",
"plugin:import/typescript",
"prettier"
],
"root": true,
"rules": {
"no-const-assign": 1,
"no-extra-semi": 0,
"semi": 0,
"no-fallthrough": 0,
"no-empty": 0,
"no-mixed-spaces-and-tabs": 0,
"no-redeclare": 0,
"no-this-before-super": 1,
"no-unreachable": 1,
"no-use-before-define": 0,
"constructor-super": 1,
"curly": 0,
"eqeqeq": 0,
"func-names": 0,
"valid-typeof": 1,
"import/extensions": 0,
"react/jsx-filename-extension": 0,
// note you must disable the base rule as it can report incorrect errors
"no-shadow": 0,
"#typescript-eslint/no-shadow": [
1
],
"no-unused-vars": 0,
"#typescript-eslint/no-unused-vars": 1,
"no-undef": 0,
"jsx-a11y/click-events-have-key-events": 0,
"jsx-a11y/no-static-element-interactions": 0,
"#typescript-eslint/explicit-module-boundary-types": 0,
"react/button-has-type": 0,
"react/require-default-props": 0,
"react/prop-types": 0,
"react-hooks/exhaustive-deps": 0,
"react/jsx-props-no-spreading": 0
},
"settings": {
"import/resolver": {
"node": {
"extensions": [
".js",
".jsx",
".ts",
".tsx"
]
}
}
}
}
In a file src/components/elements/ProtectedRoutes/InviteRoute.tsx, I have:
import routeNames from 'constants/routeNames';
import useRoles from 'hooks/roles';
import { ROLE } from 'shared/src/types/enums';
The app runs fine, but when I run lint, I get errors:
2:24 error Unable to resolve path to module 'constants/routeNames' import/no-unresolved
3:22 error Unable to resolve path to module 'hooks/roles' import/no-unresolved
5:22 error Unable to resolve path to module 'shared/src/types/enums' import/no-unresolved
What am I doing wrong?
You should pass this config to eslint if you want to import your ts / tsx files without the extension.
The module directory is important here to resolve path inside ./src. If the module is not found inside src it will search inside node_modules
"settings": {
"import/resolver": {
"node": {
"extensions": [".ts", ".tsx"],
"moduleDirectory": ["src", "node_modules"]
}
}
}
If you get this error in a monorepo in VSCode it is probably because ESLint is looking for the tsconfig file in the incorrect folder and you should add a .vscode/settings.json with some configuration.
For example if you have a project located at workspaces/server:
{
"eslint.workingDirectories": [
{ "directory": "workspaces/server", "changeProcessCWD": true },
]
}
to tell eslint about all the different sub-project folders
It looks like you have defined custom paths in your TypeScript config (usually tsconfig.json). The import plugin doesn't know about the correct location of the TypeScript config and hence cannot resolve those paths. What you need to do, is to specify the correct path to your TypeScript config via the project parameter in the resolver options:
{
...
"settings": {
"import/resolver": {
"project": "./my-path-to/tsconfig.json",
...
}
}
}
Or if your tsconfig.json is located in your respository's root, set: "project": {}, see this GitHub issue: https://github.com/import-js/eslint-plugin-import/issues/1485
In case this helps, I had similar issue but in a create-react-app project without typescript. What I had to do was add current directory to the moduleDirectory field, see below.
In my .eslintrc.json I added the following, please note I'm not using typescript files in my project:
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx"],
"moduleDirectory": [".", "node_modules"]
}
}
}
I want to have an ability to use 2 blank lines in some parts of my code.
Prettier default behaviour allows to have 1 blank line maximum.
I've tried to use "no-multiple-empty-lines": [2, {"max": 2 }] but it doesn't work at all and prettier still complains.
This is my .eslintrc config file. If you need any other information please let me know.
{
"env": {
"node": true,
"browser": true,
"es6": true,
"commonjs": true
},
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 6,
"ecmaFeatures": {
"jsx": true,
"modules": true
},
"sourceType": "module"
},
"extends": [
"eslint:recommended",
"plugin:prettier/recommended",
"plugin:react/recommended"
],
"rules": {
"prettier/prettier": "error",
"no-multiple-empty-lines": [2, {"max": 2 }],
"react/jsx-uses-vars": [2],
"react/react-in-jsx-scope": "off",
"react/prop-types": "off"
},
"plugins": [
"prettier",
"react"
],
"settings": {
"react": {
"version": "detect" // React version. "detect" automatically picks the version you have installed.
}
}
}
This might not work in your case -- I'm just running eslint without prettier -- but try this line instead:
"no-multiple-empty-lines": ["error", { "max": 2, "maxBOF": 0, "maxEOF": 0 }]
If you definitely want to run it through prettier with eslint though, it looks like that might not work at all. Not sure I'm reading this issue correctly, but it seems like that might not be configurable in prettier? If all you want is to change eslint's behavior though, I think the above line should work because I just had to use it in my own config.
I've got two variables in my webpack config which are required but are throwing linting errors.
Is there a way add exceptions for a specific variable?
I want to ignore path and persistentPlugins
current .eslintrc file looks as follows:
{
"parser": "babel-eslint",
"env": {
"es6": true,
"browser": true,
"node": true
},
"globals": {
"React": false,
"react": false,
},
"plugins": [
"react"
],
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"rules": {
"no-console": 0,
"no-underscore-dangle": 1,
"quotes": [2, "single"],
"react/no-danger": "off",
}
}
Assuming that it's the no-undef rule that's raising the error, specify them as globals:
...
"globals": {
"path": true,
"persistentPlugins": true,
"React": false,
"react": false,
},
...
Alternatively, you could disable the error inline in the webpack config:
/*global path, persistentPlugins*/
For other errors, there is a question here on disabling them inline.