How to work around jsx-a11y/no-static-element-interactions restriction?
For those who are looking for a workaround, use role=”presentation” in your tag.
eslint-config-airbnb
How do you disable no-plusplus when using eslint?
You can just override it in your .eslintrc.js file as follows: ‘no-plusplus’: ‘off’ or if you don’t want to disable it completely but only for for-loops: ‘no-plusplus’: [2, { allowForLoopAfterthoughts: true }]
React linter airbnb proptypes array
A possible solution for this (but I think it is not smart): SmartTable.propTypes = { name: React.PropTypes.string.isRequired, cols: React.PropTypes.arrayOf(React.PropTypes.string), rows: React.PropTypes.arrayOf(React.PropTypes.string), };
Must use destructuring props assignment (react/destructuring-assignment)
handleSubmit = (event) => { event.preventDefault(); const {onSearch} = this.props const {value} = this.query onSearch(value) event.target.blur(); }
Must use destructuring props assignment (react/destructuring-assignment)
handleSubmit = (event) => { event.preventDefault(); const {onSearch} = this.props const {value} = this.query onSearch(value) event.target.blur(); }
ESLint “Unexpected tab character” when “indent” rule set to “tab”
I answer myself, it was because Airbnb has set the rule no-tabs to 2 or error, I just disabled it. { “parser”: “babel-eslint”, “extends”: “airbnb”, “plugins”: [ “react”, “jsx-a11y”, “import” ], “rules”:{ “indent”: [2, “tab”], “no-tabs”: 0 } }
ESLint: Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): ‘jsx, flow, typescript’ (2:9)
Install @babel/preset-react in dev dependencies. Add this in .eslintrc file … “parser”: “@babel/eslint-parser”, “parserOptions”: { … “babelOptions”: { “presets”: [“@babel/preset-react”] }, } … Source: https://ffan0811.medium.com/error-debugging-this-experimental-syntax-requires-enabling-one-of-the-following-parser-plugin-s-22946599a0a4
How can I fix this violation of this ‘react/no-unescaped-entitie’ of an ESLint rule?
Recommended solution is to use ', ‘ or ’ instead of wrapping it as a variable. So like this: const func = () => { return ( <div > you're free </div> )} For search-ability, it’s recommended you have files for localization/internationalization and call them into your app.
Struggling with TypeScript, React, Eslint and simple Arrow Functions components
Ok, so I don’t know if it is the correct answer, but finally changing the settings in Eslint helped me to change the type of function for Components. I added the following rule to my .eslintrc.js file: “react/function-component-definition”: [ 2, { namedComponents: “arrow-function”, unnamedComponents: “arrow-function”, }, ], With this, eslint will ONLY accept arrow functions … Read more
Caught between two no-restricted-syntax violations
You’d want to use Object.keys(settings).forEach(key => { Object.keys(env[key]).forEach(subkey => { or potentially Object.entries or Object.values depending on if you actually want the keys.