Skip to content

Commit

Permalink
[eslint config] add config for disabled new rules
Browse files Browse the repository at this point in the history
  • Loading branch information
@ljharb
ljharb committed Feb 14, 2020
1 parent 41ca203 commit 019e0f7
Showing 1 changed file with 29 additions and 0 deletions.
29 changes: 29 additions & 0 deletions packages/eslint-config-airbnb/rules/react.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -500,6 +500,35 @@ module.exports = {
// Enforce that props are read-only
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-read-only-props.md
'react/prefer-read-only-props': 'off',

// Prevent usage of `javascript:` URLs
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-script-url.md
// TODO: enable, semver-major
'react/jsx-no-script-url': ['off', [
{
name: 'Link',
props: ['to'],
},
]],

// Disallow unnecessary fragments
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-useless-fragment.md
// TODO: enable, semver-major
'react/jsx-no-useless-fragment': 'off',

// Prevent adjacent inline elements not separated by whitespace
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-adjacent-inline-elements.md
// TODO: enable? semver-major
'react/no-adjacent-inline-elements': 'off',

// Enforce a specific function type for function components
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/function-component-definition.md
// TODO: enable! semver-minor, but do it in a major to be safe
// TODO: investigate if setting namedComponents to expression vs declaration is problematic
'react/function-component-definition': ['off', {
namedComponents: 'function-expression',

This comment has been minimized.

Sign in to view

Copy link
@petersendidit

petersendidit Nov 10, 2021

Contributor

It seems like using the function-expression option here conflicts with all the examples in the style guide.

In the example code for the rule

// only function declarations for named components
// [2, { "namedComponents": "function-declaration" }]
function Component (props) {
  return <div />;
}

// only function expressions for named components
// [2, { "namedComponents": "function-expression" }]
var Component = function (props) {
  return <div />;
};

In the style guide almost every component is defined like:

// good
function Listing({ hello }) {
  return <div>{hello}</div>;
}

Unless I am missing something with the rule as is it will complain about that and want to define it as:

// good
const Listing = function ({ hello }) {
  return <div>{hello}</div>;
}

Am I missing something or should this be set to function-declaration?

This comment has been minimized.

Sign in to view

Copy link
@ljharb

ljharb Nov 10, 2021

Author Collaborator

Yes, that's why I didn't enable the rule here. The goal is to forbid arrow function components, in particular.

Separately, functions should always be explicitly named (after function , not just in the variable name)

This comment has been minimized.

Sign in to view

Copy link
@petersendidit

petersendidit Nov 10, 2021

Contributor

In the newly released v19.0.0 this rule is enabled with function-expression which is trying to convert all of the components defined as

function Listing({ hello }) {
  return <div>{hello}</div>;
}

into

const Listing = function ({ hello }) {
  return <div>{hello}</div>;
}

I can open a PR to switch to namedComponents: 'function-declaration',

This comment has been minimized.

Sign in to view

Copy link
@ljharb

ljharb Nov 10, 2021

Author Collaborator

Thanks, that would be great. An alternative is to disable the rule entirely, if it doesn't allow "either expression or declaration" (in which case, let's file an issue on the react plugin)
unnamedComponents: 'function-expression',
}],
},

settings: {
Expand Down

0 comments on commit 019e0f7

Please sign in to comment.