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.
Related
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'm setting up an environment this way to work with a ReactJs/Next.js project that uses 'styled jsx', but eslint can't fix the css flaws in the middle of the code.
How can I best configure eslint to work with the project I'm working on?
{
"parser": "#babel/eslint-parser",
"extends": [
"airbnb",
"plugin:react/recommended"
],
"env": {
"es6": true,
"browser": true,
"node": true,
"jest": true
},
"settings": {
"import/core-modules": ["styled-jsx", "styled-jsx/css"],
},
"plugins": [
"react",
"react-hooks"
],
"parserOptions": {
"sourceType": "module",
"allowImportExportEverywhere": true
},
"rules": {
// ..rules
}
}
Check this out:
https://github.com/vercel/styled-jsx#eslint
If you're using eslint-plugin-import, the css import will generate errors, being that it's a "magic" import (not listed in package.json). To avoid these, simply add the following line to your eslint configuration:
"settings": {"import/core-modules": ["styled-jsx/css"] }
This should remove any errors - but you won't get highlighting.
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"]
I just installed ESLint to React Native (create-react-native-app)
.eslintrc.json
{
"env": {
"browser": true,
"es6": true,
"react-native/react-native": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"parserOptions": {
"ecmaVersion": 8,
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true
},
"sourceType": "module"
},
"plugins": [
"react",
"react-native"
],
"rules": {
"no-var": "error",
"react-native/no-unused-styles": 2,
"react-native/split-platform-components": 2,
"react-native/no-inline-styles": 2,
"react-native/no-color-literals": 2,
"indent": [
"error",
"tab"
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"never"
]
}
}
It's lint everything properly, BUT not my components.
So my folder structure looks something like:
root:
src
components
contants
...
The linter working in the editor (Sublime), BUT not in the Command Line (iTerm2)
Using eslint it is possible to do eslint ./src to validate whole folder.
This is my .eslintrc
{
"plugins": ["react"],
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"es6": true,
"browser": true,
"node": true,
"mocha": true
},
"extends": ["eslint:recommended", "plugin:react/recommended", "standard"],
"rules": {}
}
This is my component:
class Index extends React.Component {
static async getInitialProps({ req }) {
....
}
}
Eslint is complaining about getInitialProps:
Parsing error: Unexpected token getInitialProps
There is any way to make eslint accept getInitialProps declaration besides adding a suppress comment?
As pointed out by #Scott in the comments, the solution was to add babel-eslint, my final .eslintrc was the following:
{
"plugins": ["react"],
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"es6": true,
"browser": true,
"node": true,
"mocha": true
},
"extends": ["eslint:recommended", "plugin:react/recommended", "standard"],
"rules": {}
}