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.
Related
I have the following configuration for .eslintrc in my React App:
/* eslint-env node */
module.exports = {
"env": {
"browser": true,
"es6": true,
"jest/globals": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react", "jest"
],
"rules": {
"indent": [
"error",
2
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"never"
],
"eqeqeq": "error",
"no-trailing-spaces": "error",
"object-curly-spacing": [
"error", "always"
],
"arrow-spacing": [
"error", { "before": true, "after": true }
],
"no-console": 0,
"react/prop-types": 0,
"react/react-in-jsx-scope": "off"
},
"settings": {
"react": {
"version": "detect"
}
}
}
In an attempt for React to be able to read it properly: I added /* eslint-env node */ at the top.
Unfortunately, this file crashes my React App, there is a red line under "module.exports" and the App returns an error message.
Is there a way to get this configuration working with a React App that has been created with Create-React-App?
I have a TypeScript project linted with ESLint and typescript-eslint.
Here's the rules property in .eslintrc.json:
"rules": {
"semi": [ "error", "never" ],
"#typescript-eslint/semi": ["error", "never"]
}
I have a tsx file, where the last line of the file is
export default Main
When I run
npx eslint file.tsx
I get this error:
number last string.20 error Missing semicolon
#typescript-eslint/semi
Full .eslintrc.json:
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"plugin:react/recommended",
"xo"
],
"overrides": [
{
"extends": [
"xo-typescript"
],
"files": [
"*.ts",
"*.tsx"
]
}
],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"react",
"#typescript-eslint"
],
"rules": {
"semi": [ "error", "never" ],
"#typescript-eslint/semi": ["error", "never"]
}
}
How to correctly disable semi rules?
Use "off":
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"plugin:react/recommended",
"xo"
],
"overrides": [
{
"extends": [
"xo-typescript"
],
"files": [
"*.ts",
"*.tsx"
]
}
],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"react",
"#typescript-eslint"
],
"rules": {
"semi": "off",
"#typescript-eslint/semi": "off"
}
}
I don't know why the rules didn't work when using
"extends": [
"xo"
],
so i reinstalled using the command
npx eslint --init
only this time at the end chose
"extends": [
"plugin:react/recommended",
"standard-with-typescript"
],
so the whole file ".eslintrc.json" looks like
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"plugin:react/recommended",
"standard-with-typescript"
],
"overrides": [
],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module",
"project": "./tsconfig.json"
},
"plugins": [
"react"
],
"rules": {
"eol-last": 0,
"no-multiple-empty-lines": [
"error",
{
"max": 1,
"maxEOF": 0
}
],
"#typescript-eslint/space-before-function-paren": [
"error", {
"anonymous": "never",
"named": "never",
"asyncArrow": "never"
}
],
"#typescript-eslint/no-floating-promises": 0
}
}
in these rules by default is ignored semi.
When I start the app with yarn start I get below comment in terminal. I guess it's airbnb plug-in which makes some mess as when I comment it out in eslintrc.json the app compiles and I can work in it. Shall I remove airbnb plug-in or there is another solution to fix it ?
I was already issues with such error but actually none of them worked for me, that's why I ask specifically.
[eslint] Plugin "react" was conflicted between ".eslintrc.json » eslint-config-airbnb » C:\Users\marci\OneDrive\Pulpit\300B\bdb\bdb-front\node_modules\eslint-config-airbnb\rules\reacERROR in [eslint] Plugin "react" was conflicted between ".eslintrc.json » eslint-config-airbnb » C:\Users\marci\OneDrive\Pulpit\300B\bdb\bdb-front\node_modules\eslint-config-airbnb\rules\react-a11y.js" and "BaseConfig » C:\Users\marci\OneDrive\Pulpit\300B\BDB\bdb-front\node_modules\eslint-config-react-app\base.js".
this is how my .eslintrc.json looks like:
{
"env": {
"browser": true,
"es2021": true,
"node": true
},
"globals": {
"JSX": "readonly"
},
"extends": [
"plugin:#typescript-eslint/recommended",
"plugin:react-hooks/recommended",
"plugin:react/recommended",
"plugin:import/errors",
"plugin:import/warnings",
"plugin:import/typescript",
"airbnb",
"plugin:prettier/recommended",
"prettier"
],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true,
"tsx": true
},
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [ "#typescript-eslint", "prettier"],
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
},
"ignorePatterns": ["src/serviceWorkerRegistration.ts", "src/service-worker.ts"],
"rules": {
"prefer-regex-literals": "off",
"global-require": "off",
"import/no-dynamic-require": "off",
"no-shadow": "off",
"#typescript-eslint/no-shadow": ["error"],
"#typescript-eslint/no-var-requires": "off",
"#typescript-eslint/no-empty-function": "off",
"react-hooks/exhaustive-deps": "off",
"#typescript-eslint/no-unused-vars": "error",
"#typescript-eslint/no-empty-interface": "off",
"import/prefer-default-export": "off",
"react/react-in-jsx-scope": "off",
"react/jsx-props-no-spreading": "off",
"no-new-func": "off",
"jsx-a11y/media-has-caption": "off",
"jsx-a11y/label-has-associated-control": [
"error",
{
"required": {
"some": ["nesting", "id"]
}
}
],
"jsx-a11y/label-has-for": [
"error",
{
"required": {
"some": ["nesting", "id"]
}
}
],
"react/function-component-definition": "off",
"no-unused-vars": "off",
"no-use-before-define": "warn",
"no-nested-ternary": "off",
"no-param-reassign": "warn",
"import/extensions": [
"error",
"ignorePackages",
{
"js": "never",
"jsx": "never",
"ts": "never",
"tsx": "never"
}
],
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".ts", ".tsx", ".*"] }],
"prettier/prettier": [
"error",
{
"endOfLine": "auto"
}
]
}
}
thanks & regards
Ok, I think your issue is with the plugin:react/recommended and the airbnb you will need to remove one of those. I suggest keeping the pluhin:react/recommended.
{
"env": {
"browser": true,
"es2021": true,
"jest":true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:#typescript-eslint/recommended",
"prettier"
],
"overrides": [],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"react",
"react-hooks",
"#typescript-eslint",
"prettier"
],
"rules": {
"react/react-in-jsx-scope": "off",
"camelcase": "error",
"spaced-comment": "error",
"quotes": ["error", "double"],
"no-duplicate-imports": "error",
"no-console": "warn",
"react/prop-types": "off"
},
"settings": {
"import/resolver": {
"typescript": {}
}
},
"ignorePatterns": ["build/*"]
}
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?