My eslint config stopped linting my code, it doesn't show errors or anything, I'm confused is there something wrong with my config? Do I need to add some configs for eslint:recommend for it to work? I just followed the react plugin steps, I appreciate the answers.
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"indent": ["error", 2],
"semi": ["error", "always"],
"max-len": [2, { "code": 80, "tabWidth": 2, "ignoreUrls": true }],
"react/jsx-max-props-per-line": ["error", { "maximum": { "single": 1, "multi": 2 } }],
"react/jsx-first-prop-new-line":"always"
},
"plugins": [
"react"
],
I found the problem...
"react/jsx-first-prop-new-line":"always"
the above line is expecting a number for it to work 0 1 2
"react/jsx-first-prop-new-line": 2
2 Meaning "On" is the correct way to write it
Related
I cloned a website based on react js in my windows pc, on running npm start I got this error
Expected linebreaks to be 'CRLF' but found 'LF' linebreak-style
after looking some answers in stack-overflow on adding this line in my .eslintrc
"linebreak-style": ["error", "windows"],
website started to work fine.
This is my .eslintrc file from cloned repo
{
"extends": "airbnb",
"parser": "babel-eslint",
"env": {
"browser": true,
"node": true,
"jest": true
},
"rules": {
"linebreak-style": ["error", "windows"],
"jsx-a11y/anchor-is-valid": ["error", {
"components": ["Link"],
"specialLink": ["to", "hrefLeft", "hrefRight"],
"aspects": ["noHref", "invalidHref", "preferButton"]
}],
"jsx-a11y/click-events-have-key-events": 0,
"jsx-a11y/href-no-hash": "off",
"jsx-a11y/no-static-element-interactions": 0,
"no-console": ["error", {
"allow": ["warn", "error", "info"]
}],
"no-underscore-dangle": 0,
"react/destructuring-assignment": 0,
"react/function-component-definition": [2, { "namedComponents": "arrow-function" }],
"react/jsx-filename-extension": [1, {
"extensions": [".js", ".jsx"]
}],
"react/jsx-no-useless-fragment": 0,
"react/jsx-one-expression-per-line": 0,
"react/jsx-props-no-spreading": 0,
"react/jsx-wrap-multilines": [1, {
"declaration": true,
"assignment": true,
"return": true
}]
},
"plugins": [
"react"
]
}
Query
On deploying this website on github it is showing this error again
Try to add "endOfLine": "auto" setting in .eslintrc.js and .prettierrc files.
So, file .eslintrc.js should have:
rules: {
/* ...the other code is omitted for the brevity */
'import/extensions': 'off',
'prettier/prettier': [
'error',
{
endOfLine: 'auto', /* this setting should be included */
},
],
And file .prettierrc should have:
{
/* ...the other code is omitted for the brevity */
"endOfLine": "auto" /* this setting should be included */
}
I do have an react-native project.
I've upgraded to recent react and react-native version, even as all other packages in the project.
As React 17 brings the JSX-Transform (https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#manual-babel-setup) I followed those steps to use it in my app.
But at least it doesn't work as expected.
I wonder if the new JSX-Transform feature doesn't be usable for react-native APP's, but only for general react webprojects?!
This is my babel.config.js:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'#babel/plugin-proposal-decorators',
{
legacy: true,
},
],
[
'#babel/plugin-transform-react-jsx',
{
runtime: 'automatic',
},
],
'react-native-reanimated/plugin',
],
};
this my 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
}
]
}
}
You can try this solution to make it work with react native
https://github.com/facebook/metro/issues/646#issuecomment-799174473
So by using both useTransformReactJSXExperimental and runtime settings in babel configuration file.
I am attempting to make use of typescript-eslint in an existing react project, and eslint is detecting an issue that I don't think is correct, and I'm curious of the proper way to get around it. As an example to demonstrate the issue, here is a simple interface with a functional member:
export interface MyInterface {
myProperty: number,
myFunction: (myParam: string) => string
}
eslint underlines myParam: string in yellow and supplies the following warning:
'myParam' is defined but never used. eslint(no-unused-vars)
Here are my eslint configuration settings:
{
"env": {
"browser": true,
"es6": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:#typescript-eslint/recommended"
],
"globals": {
"module": true,
"__dirname": true,
"require": false,
"$": false
},
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true,
"modules": true
},
"ecmaVersion": 6,
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"indent": [
"off",
2
],
"linebreak-style": [
"off",
"windows"
],
"quotes": [
"warn",
"single"
],
"semi": [
"error",
"always"
],
"no-console": [
"off"
],
"no-debugger": [
"warn"
],
"no-extra-semi": [
"warn"
],
"no-unused-vars": [
"warn"
]
},
"settings": {
"react": {
"version": "detect"
}
}
}
I understand that I have "no-unused-vars": ["warn"] in my rules, but it seems to me no-unused-vars should not apply to a function definition. Has anyone else come across this issue?
Thank you so much in advance for any help!
I've noticed that extra parentheses are getting added to my multi-line conditional renders using logical AND (&&) in my jsx files. For example, this code from the React docs...
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}
...would get modified as follows:
{unreadMessages.length > 0 && (
<h2>
You have {unreadMessages.length} unread messages.
</h2>
)}
Here is my ESLint config:
"eslintConfig": {
"root": true,
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"impliedStrict": true
}
},
"env": {
"browser": true,
"node": true,
"es6": true,
"mocha": true
},
"plugins": [
"react"
],
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"rules": {
"computed-property-spacing": [
"error"
],
"indent": [
"error",
2
],
"jsx-quotes": [
"error"
],
"key-spacing": [
"error"
],
"no-case-declarations": [
"off"
],
"no-console": [
"off"
],
"no-var": [
"error"
],
"object-curly-spacing": [
"error",
"always"
],
"prefer-const": [
"error"
],
"quotes": [
"error",
"single",
{
"avoidEscape": true,
"allowTemplateLiterals": true
}
],
"react/no-children-prop": "off",
"react/prop-types": "off",
"semi": [
"error",
"never"
]
}
}
Have I inadvertently caused this, or is there a good reason for it? If not, how can I prevent this? It seems like overkill to disallow unnecessary parentheses.
It looks like this is caused by react/jsx-wrap-multilines and can be prevented by setting the logical syntax type to "ignore".
I am trying to set an eslint rule for methods in class that are never used. Like in the following react component I have a method unUsedMethod which is never used, but eslint does not show an error for it.
class Sample extends Component {
unUsedMethod() {
console.log('I am never used');
}
render() {
return 'Hello!';
}
}
My eslint file looks like this
{
"parser": "babel-eslint",
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": ["eslint:recommended", "plugin:react/recommended"],
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true,
"sourceType": "module",
"allowImportExportEverywhere": false,
"codeFrame": false
},
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"indent": [2, 4, {"SwitchCase": 1, "ObjectExpression": "first"}],
"linebreak-style": [
"error",
"unix"
],
"semi": [
"error",
"always"
],
"react/display-name": 0,
"react/prop-types": 0, // Temporary
"react/no-unescaped-entities": 0,
"no-trailing-spaces": 1
}
}
This plugin does what you are asking for. However a word of caution.
https://www.npmjs.com/package/eslint-plugin-no-unused-react-component-methods
Currently it is impossible to simply have a parser that would check for unused component properties, because component properties can be called dynamically.
For example:
class Sample extends Component {
// Plugin falsely flags this as unused.
unUsedMethod() {
console.log('I am used dynamically');
}
render() {
// No way to parse dynamic function calls reliably
this['unUsedMethod']();
return 'Hello!';
}
}
It also wouldn't work with react-onclickoutside package, as it requires a function to be attached to the component, that is called by wrapping the component in a HOC. https://www.npmjs.com/package/react-onclickoutside
Still the plugin helped me find a few unused functions, so it is worth a try in my opinion.
First install the package: npm i eslint-plugin-no-unused-react-component-methods --save-dev
Add "no-unused-react-component-methods" to your eslint configuration in the plugins section:
{
"plugins": [
"no-unused-react-component-methods"
],
}
And add into the rules section
{
"rules": {
"no-unused-react-component-methods/no-unused-react-component-methods": 2,
}
}
So your config would look like:
{
"parser": "babel-eslint",
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": ["eslint:recommended", "plugin:react/recommended"],
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true,
"sourceType": "module",
"allowImportExportEverywhere": false,
"codeFrame": false
},
"sourceType": "module"
},
"plugins": [
"react",
"no-unused-react-component-methods"
],
"rules": {
"no-unused-react-component-methods/no-unused-react-component-methods": 2,
"indent": [2, 4, { "SwitchCase": 1, "ObjectExpression": "first" }],
"linebreak-style": ["error", "unix"],
"semi": ["error", "always"],
"react/display-name": 0,
"react/prop-types": 0, // Temporary
"react/no-unescaped-entities": 0,
"no-trailing-spaces": 1
}
}
Now it should highlight any seemingly unused functions! Let me know if it works or not.