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": {}
}
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
}
}
]
}
}
Prettier warns me that I need to remove trailing commas, then after I remove it the error goes away but Prettier adds that commas again by itself immediately I save. Please help, it seems like a conflict between Prettier and ESLint:
.eslintrc
{
"env": {
"browser": true,
"es2021": true,
"jest": true
},
"extends": [
"react-app",
"react-app/jest",
"airbnb",
"airbnb-typescript",
"plugin:import/typescript",
"plugin:prettier/recommended",
"prettier"
],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": "latest",
"sourceType": "module",
"project": "./tsconfig.json"
},
"plugins": ["react", "#typescript-eslint", "prettier"],
"rules": {}
}
.prettierrc
{
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": false,
"trailingComma": "all",
"printWidth": 80
}
If you want prettier not to add trailing commas, change your .prettierrc to "trailingComma": "none" - if you want eslint to not warn you about trailing commas, add "comma-dangle": "off" to the rules object in your eslintrc
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"]
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.