Here you can see I have a very simple react component, but the eslint rule is giving me a false positive.
Config Details
package.json
"devDependencies": {
"eslint": "^5.13.0",
"eslint-plugin-react": "^7.12.4",
"eslint-plugin-react-hooks": "^1.0.1",
}
.eslintrc.js
module.exports = {
"env": {
"browser": true,
"es6": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react",
"react-hooks"
],
"rules": {
"indent": [
"error",
2
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"never"
],
"react-hooks/rules-of-hooks": "error"
},
"settings": {
"react": {
"createClass": "createReactClass", // Regex for Component Factory to use, default to "createReactClass"
"pragma": "React", // Pragma to use, default to "React"
"version": "detect", // React version. "detect" automatically picks the version you have installed. You can also use `16.0`, `16.3`, etc, if you want to override the detected value.
},
"linkComponents": [
// Components used as alternatives to <a> for linking, eg. <Link to={ url } />
"Hyperlink",
{ "name": "Link", "linkAttribute": "to" }
]
}
};
ESLint doesn't know React semantics for variable usage in JSX by default. To fix this, I could either enable the react/jsx-uses-vars rule or extend from plugin:react/recommended configuration. I went with the latter.
"extends": ["eslint:recommended", "plugin:react/recommended"]
Related
Im having problems setting up tailwind on my React project. I am using eslint, and I wanted to add tailwind and asked me to add it as a project, but then it says it is not correct: Error on tailwind.config.js and postcss.config.js:
Tailwind.config.js:
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {}
},
plugins: []
};
Here is my eslint config:
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"plugin:react/recommended",
"standard-with-typescript",
"plugin:jsx-a11y/recommended",
"plugin:#typescript-eslint/recommended",
"plugin:react-hooks/recommended",
"plugin:tailwindcss/recommended",
"plugin:import/typescript",
"prettier"
],
"parser": "#typescript-eslint/parser",
"overrides": [],
"parserOptions": {
"ecmaFeatures": { "jsx": true },
"ecmaVersion": "latest",
"project": "frontend/tsconfig.json",
"sourceType": "module"
},
"plugins": ["react", "#typescript-eslint", "react-hooks", "prettier", "tailwindcss"],
"rules": {
"prettier/prettier": "error",
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".tsx"] }],
"#typescript-eslint/explicit-function-return-type": "off"
}
}
Here is my postcss.config.js
{
"content": ["./src/**/*.{js,jsx,ts,tsx}"],
"theme": {
"extend": {}
},
"plugins": {
"tailwindcss": {},
"autoprefixer": {}
}
}
I'm getting a lot of configuration side effects in ESLINT, where a React project was started with create-react-app and template with typescript.
What is the CORRECT way to correct these problems? I have the same configuration in another project, with a version below create-react-app, and it doesn't give these problems.
ERROR'S:
C:\src\App.test.tsx
2:17 error "src/App" is not found node/no-missing-import
C:\src\aee\index.tsx
0:0 error Parsing error: "parserOptions.project" has been set for #typescript-eslint/parser.
The file does not match your project config: src\aee\index.tsx.
The file must be included in at least one of the projects provided
C:\src\index.tsx
0:0 error Parsing error: "parserOptions.project" has been set for #typescript-eslint/parser.
The file does not match your project config: src\index.tsx.
The file must be included in at least one of the projects provided
TSCONFIG.JSON
{
"root": true,
"env": {
"browser": true,
"es2021": true,
"node": true,
"jest": true
},
"settings": {
"react": {
"version": "detect"
}
},
"overrides": [
{
"files": ["src/**/*.ts", "src/**/*.tsx"],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"project": "./tsconfig.json",
"ecmaVersion": "latest",
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"plugins": ["react", "react-hooks", "prettier", "jest", "jest-dom", "jsx-a11y", "import", "testing-library", "#typescript-eslint"],
"extends": [
"airbnb-typescript",
"eslint:recommended",
"stylelint",
"plugin:react/recommended",
"plugin:react-hooks/recommended",
"plugin:#typescript-eslint/recommended",
"plugin:#typescript-eslint/eslint-recommended",
"plugin:#typescript-eslint/recommended-requiring-type-checking",
"plugin:jest/recommended",
"plugin:jest-dom/recommended",
"plugin:testing-library/react",
"plugin:jsx-a11y/recommended",
"plugin:prettier/recommended"
],
"rules": {
"react/react-in-jsx-scope": "off",
"react/jsx-filename-extension": ["error", { "extensions": [".ts", ".tsx"] }],
"react/jsx-props-no-spreading": "off",
"react/jsx-uses-react": "off",
"prettier/prettier": [
"error",
{},
{
"usePrettierrc": true,
"fileInfoOptions": {
"withNodeModules": true
}
}
]
}
}
]
}
ESLINTRC
{
"extends": [
"airbnb",
"airbnb-typescript",
"stylelint",
"eslint:recommended",
"eslint-config-prettier",
"plugin:react/recommended",
"plugin:react-hooks/recommended",
"plugin:#typescript-eslint/eslint-recommended",
"plugin:#typescript-eslint/recommended",
"plugin:#typescript-eslint/recommended-requiring-type-checking",
"plugin:prettier/recommended",
"plugin:markdown/recommended"
],
"plugins": ["react", "react-hooks", "eslint-plugin-prettier", "#typescript-eslint"],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"project": "./tsconfig.json",
"ecmaVersion": 13,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"browser": true,
"es2021": true,
"node": true,
"jest": true
},
"settings": {
"react": {
"version": "detect"
},
"jest": {
"version": "detect"
}
},
"rules": {
"react/jsx-filename-extension": ["error", { "extensions": [".ts", ".tsx"] }],
"react/react-in-jsx-scope": "off",
"react/jsx-props-no-spreading": "off",
"prettier/prettier": [
"error",
{},
{
"usePrettierrc": true,
"fileInfoOptions": {
"withNodeModules": true
}
}
]
}
}
I have a strange issue since today.
In a ReactNative-Project, I do have setup eslint & prettier.
My config:
// package.json
"eslint": "^8.12.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-plugin-flowtype": "^8.0.3",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-react-native": "^4.0.0",
"prettier-eslint": "^13.0.0",
// .prettierrc.js
module.exports = {
arrowParens: 'always',
bracketSpacing: false,
singleQuote: true,
trailingComma: 'all'
};
// eslintrc.json
{
"parser": "#babel/eslint-parser",
"env": {
"browser": true,
"react-native/react-native": true,
"es6": true,
"node": true
},
"extends": [
"#react-native-community",
"plugin:react/recommended",
"airbnb-base",
"prettier/react"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react",
"react-native",
"prettier"
],
"rules": {
"react/jsx-uses-react": "off",
"react/react-in-jsx-scope": "off",
"object-curly-newline": 0,
"max-len": [
"error",
{
"code": 100,
"comments": 150,
"ignoreTrailingComments": true,
"ignoreUrls": true
}
],
"indent": [
"warn",
2
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
2,
"single",
{
"avoidEscape": true,
"allowTemplateLiterals": true
}
],
"semi": [
"error",
"always"
],
"react-native/no-unused-styles": 2,
"react-native/split-platform-components": 2,
"react-native/no-inline-styles": 2,
"react-native/no-color-literals": 2,
"react-native/no-raw-text": 2,
"prettier/prettier": [
"warn",
{
"endOfLine": "auto",
"bracketSpacing": true
}
]
}
}
The Issue
If I run eslint . --fix for my project, it turn full valid files into files with error by it's own!
The code which will be accidentally destroyed by eslint are the following files (in different files):
const { type, version, copyright, licenseSpecs, licenseText } = licenseList[libraryName];
const finalGeneratedLicense = normalizeNodeModulesLicenses(nodeModulesLicenses);
const { title, drawerLabel, drawerIcon } = descriptors[route.key].options;
resource = config.supportedLocales[language].translationFileLoader()[namespace];
Do you see the trailing whitespaces after = ?!
I could fix them manually, but as I run eslint . --fix again, it will again create those whitespaces.
What might the reason for this?
I am trying to setup for my typescript react project that while I am working it will give me warnings/errors if I am doing something that is not accessible. My editor already gives me listing errors, but I tried setting up eslint-plugin-jsx-a11y and I just cannot get it to work.
Here is the eslint section in my package.json
{
"eslintConfig": {
"parser": "#typescript-eslint/parser",
"extends": [
"react-app",
"react-app/jest",
"shared-config",
"plugin:jsx-a11y/recommended"
],
"rules": {
"additional-rule": "warn"
},
"overrides": [
{
"files": [
"**/*.ts?(x)"
],
"rules": {
"additional-typescript-only-rule": "warn"
}
}
]
}
}
Not sure what I am missing. Thanks
What do you mean just cannot get it to work?
From the looks of it, I'm guessing you are missing the plugins key that is required to use any given plugin per eslint docs.
The eslint-plugin-jsx-a11y docs even mentions this in the usage section.
The extends key only applies a ruleset whereas the plugins key makes certain rules available, see a longer explanation here.
{
"eslintConfig": {
"parser": '#typescript-eslint/parser',
"extends": [
"react-app",
"react-app/jest",
"shared-config",
"plugin:jsx-a11y/recommended"
],
"plugins": [
"jsx-a11y"
],
"rules": {
"additional-rule": "warn"
},
"overrides": [
{
"files": [
"**/*.ts?(x)"
],
"rules": {
"additional-typescript-only-rule": "warn"
}
}
]
}
}
If this doesn't work please elaborate on what isn't working or what errors you get.
first lets make sure you have all
install this modules
"devDependencies": {
"#types/eslint": "7.28.0",
"#typescript-eslint/eslint-plugin": "4.28.2",
"#typescript-eslint/parser": "4.28.2",
"babel-eslint": "10.1.0",
"eslint": "7.30.0",
"eslint-config-airbnb-typescript": "12.3.1",
"eslint-config-react-app": "6.0.0",
"eslint-plugin-flowtype": "5.8.0",
"eslint-plugin-import": "2.23.4",
"eslint-plugin-jest": "24.3.6",
"eslint-plugin-jsx-a11y": "6.4.1",
"eslint-plugin-react": "7.24.0",
"eslint-plugin-react-hooks": "4.2.0",
"eslint-plugin-testing-library": "3.10.2",
"eslint-webpack-plugin": "2.5.4",}
when you install them modules at yow scripts section add a new prop like this one
"lint": "eslint --config ./.eslintrc.js \"./src/**/*.ts\" \"./src/**/*.tsx\" --fix --color"
here is a functional example
module.exports = {
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"react-app",
"plugin:jsx-a11y/recommended",
"plugin:#typescript-eslint/eslint-recommended",
"plugin:#typescript-eslint/recommended",
"plugin:#typescript-eslint/recommended-requiring-type-checking",
],
"env": {
"browser": false,
"es6": true,
"node": true
},
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parser": "#typescript-eslint/parser",
"parserOptions": {
"project": "./tsconfig.json",
"ecmaVersion": 2020,
"sourceType": "module"
},
"plugins": [
"import",
"jsx-a11y",
"react",
"react-hooks",
"#typescript-eslint"
],
"settings": {
"react": {
"createClass": "createReactClass", // Regex for Component Factory to use,
// default to "createReactClass"
"pragma": "React", // Pragma to use, default to "React"
"fragment": "Fragment", // Fragment to use (may be a property of <pragma>), default to "Fragment"
"version": "detect", // React version. "detect" automatically picks the version you have installed.
// You can also use `16.0`, `16.3`, etc, if you want to override the detected value.
// default to latest and warns if missing
// It will default to "detect" in the future
"flowVersion": "0.53" // Flow version
},
"propWrapperFunctions": [
// The names of any function used to wrap propTypes, e.g. `forbidExtraProps`. If this isn"t set, any propTypes wrapped in a function will be skipped.
"forbidExtraProps",
{
"property": "freeze",
"object": "Object"
},
{
"property": "myFavoriteWrapper"
}
],
"componentWrapperFunctions": [
// The name of any function used to wrap components, e.g. Mobx `observer` function. If this isn"t set, components wrapped by these functions will be skipped.
"observer", // `property`
{
"property": "styled"
}, // `object` is optional
{
"property": "observer",
"object": "Mobx"
},
{
"property": "observer",
"object": "<pragma>"
} // sets `object` to whatever value `settings.react.pragma` is set to
],
"linkComponents": [
// Components used as alternatives to <a> for linking, eg. <Link to={ url } />
"Hyperlink",
{
"name": "Link",
"linkAttribute": "to"
}
]
},
rules": {
// yow rules
}
};
My .eslintrc looks like this and I am using flow:
{
"extends": [
"plugin:flowtype/recommended",
"plugin:react/recommended",
"prettier",
"prettier/flowtype",
"prettier/react"
],
"plugins": [
"flowtype",
"react",
"prettier"
],
"parserOptions": {
"ecmaVersion": 2016,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"es6": true,
"node": true
},
"rules": {
"prettier/prettier": ["error", {
"singleQuote": true,
"trailingComma": "none",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"parser": "flow"
}]
},
"settings": {
"flowtype": {
"onlyFilesWithFlowAnnotation": true
}
}
}
I am still getting react react/prop-types even though I am using flow.
Is this correct and should I just turn them off?
PropTypes are for runtime type checking, while Flow is for static type checking. Both serve their own purpose, not all type errors can be caught during compilation, so PropTypes helps you with those; Flow can catch some errors early - before you interact with your app, or even load it to the browser.