I'm having mix codebase of Typescript and Javascript with monorepo configuration with Lerna in create-react-app. I'm importing TS files in my JS files with tsconfig.json setup, but getting an error with eslint.
Currently, my .eslintrc.json looks like this, I've newly added the settings here, but it didn't seem to work
{
"env": {
"browser": true,
"es2021": true,
"jest": true
},
"extends": [
"plugin:react/recommended",
"airbnb",
"prettier",
"plugin:prettier/recommended",
"plugin:import/typescript"
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": ["react", "prettier"],
"rules": {
"react/react-in-jsx-scope": "off",
"react/jsx-filename-extension": [
1,
{ "extensions": [".js", ".jsx", ".ts", ".tsx"] }
],
"prettier/prettier": "error",
"jsx-a11y/click-events-have-key-events": "off",
"import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
"react/function-component-definition": [
2,
{
"unnamedComponents": "arrow-function"
}
],
"import/no-relative-packages": "off"
},
"ignorePatterns": ["config-overrides.js", "*.json", "*.md", "*.css"],
"settings": {
"import/resolver": {
"typescript": true,
"node": true
},
"import/parsers": {
"#typescript-eslint/parser": [".ts", ".tsx"]
}
}
}
try adding
#typescript-eslint/eslint-plugin, #typescript-eslint/parser plugins
update .eslintrc.json
...
"parser": "#typescript-eslint/parser",
"parserOptions": {
"project": "tsconfig.json",
"sourceType": "module"
},
"plugins": ["eslint-plugin-import", "#typescript-eslint", "react", "react-hooks", "react-native", "jsx-a11y"],
"settings": {
"import/extensions": [".js", ".jsx", ".ts", ".tsx"],
"import/parsers": {
"#typescript-eslint/parser": [".ts", ".tsx"]
},
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx"],
"moduleDirectory": ["node_modules", "src/"]
}
}
},
...
Related
my .eslintrc.json file located at ./
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:import/errors",
"plugin:import/warnings"
],
"overrides": [
],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"rules": {
},
"settings": {
"import/resolver": {
"alias": {
"root": ["./"],
"map": [
["#", "./src"]
],
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
}
}
My foo.js file located in ./src. As you can see it is not suggesting any files. Why?
I am using module import from next.
Trying to import a component like so.
import Navbar from '#/components/Navbar/Navbar';
When I run npm run lint. I get the following error.
1:20 Error: Unable to resolve path to module '#/components/Navbar/Navbar'. import/no-unresolved
This is my jsconfig.json
"compilerOptions": {
"baseUrl": ".",
"paths": {
"#/*": ["./src/*"],
"#/components/*": ["components/*"],
"#/pages/*": ["pages/*"],
"#/styles/*": ["styles/*"]
}
}
}
This is eslintrc.json
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 11,
"sourceType": "module"
},
"settings": {
"react": {
"version": "detect"
},
"import/resolver": {
"alias": {
"map": [
["#components", "./components/*"],
["#images", "./public/*"],
["#/pages/*", "pages/*"],
["#/styles/*", "styles/*"]
],
"extensions": [".js", ".jsx"]
}
}
},
"plugins": ["react", "react-hooks", "jest"],
"rules": {
"react/jsx-props-no-spreading": 0,
"react/react-in-jsx-scope": "off",
"import/extensions": "off",
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"react/display-name": 1,
"jest/no-disabled-tests": "warn",
"jest/no-focused-tests": "error",
"jest/no-identical-title": "error",
"jest/prefer-to-have-length": "warn",
"jest/valid-expect": "error",
"import/no-unresolved": [2, { "caseSensitive": false }]
}
}
I have tried many solutions from here and here here. Does not seem to work.
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
Airbnb linting rules are removing the closing div tag if the div element is empty eg:
<div></div>
Is replaced by
<div/>
My .eslintrc file is this:
{
"extends": ["airbnb", "plugin:prettier/recommended"],
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 9,
"ecmaFeatures": {
"impliedStrict": true,
"jsx": true
}
},
"env": {
"node": true,
"es6": true
},
"plugins": ["react"],
"rules": {
"react/jsx-filename-extension": ["off"],
"react/prefer-stateless-function": ["off"],
"arrow-body-style": ["error", "always"],
"react/self-closing-comp": [
"error",
{
"component": true,
"html": false
}
]
}
}
Set "react/self-closing-comp" to "off".
{
"extends": ["airbnb", "plugin:prettier/recommended"],
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 9,
"ecmaFeatures": {
"impliedStrict": true,
"jsx": true
}
},
"env": {
"node": true,
"es6": true
},
"plugins": ["react"],
"rules": {
"react/jsx-filename-extension": ["off"],
"react/prefer-stateless-function": ["off"],
"arrow-body-style": ["error", "always"],
"react/self-closing-comp": "off"
}
}
I know this post is quiet old but for those who need, I have found a solution, which worked for me :
try :
module.exports = {
extends: [
'eslint:recommended',
'plugin:vue/vue3-recommended'
],
rules: {
'vue/no-unused-vars': 'error',
'vue/multi-word-component-names': 'off',
'vue/html-self-closing': 'off',
indent: 'off'
}
}
That's how my config file looks like with Vue3, maybe it can help.
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.