React-specific rules

[adidahiya]

Some ideas:

• require displayName property on classes that extend React.Component

  • New Rule: component-display-name tslint-react#1

• member-ordering option that orders methods based on lifecycle

  • New Rule: component-member-ordering tslint-react#2

• prohibit properties / methods on React components:

  • propTypes (TS should manage typechecking, not React)
    • New Rule: component-no-proptypes tslint-react#3
  • mixins (?)
  • getInitialState (state should just be initialized on the public class property)

• multiline JSX should be wrapped in parens

  • New Rule: jsx-wrap-multiline tslint-react#5

• single line JSX should not be wrapped in parens

• ban multiline JS expressions ({ ... }) in JSX

  • New Rule: jsx-no-multiline-js tslint-react#4

• self-closing tags should self close (<Logo />, not <Logo></Logo>)

  • New Rule: jsx-self-close tslint-react#6

• JSX attribute alignment (New Rule: jsx-alignment tslint-react#7)

  <input
      type="search"
      placeholder="Search..."
  />

• JSX attribute sorting (alphabetize)

  • New Rule: jsx-prop-sorting tslint-react#8

• forbid ReactDOM.findDOMNode() within a component class

  • actually this can be done with the ban rule

• forbid certain JSX attributes, such as dangerouslySetInnerHTML

  • New Rule: jsx-ban-props tslint-react#9

• forbid the on prefix for method names in react component classes -- prefer the prefix handle instead, and use on in JSX prop names only

  • New Rule: component-method-names tslint-react#10

• forbid string literal refs (instead use the callback variety of refs)

  • done in palantir/tslint-react

reference:

• http://reactjsnews.com/react-style-guide-patterns-i-like/
• https://facebook.github.io/react/docs/working-with-the-browser.html

[nikolaymatrosov]

+1

[thasner]

+1 to all

[noamkeidar]

+1

Would love to see similar rules to AirBnb’s: https://github.com/airbnb/javascript/tree/master/react

[jkillian]

Another rule idea (I added it to the checklist above):

no-string-refs: bans string literal refs

String literal refs are considered a legacy feature and may be deprecated soon

[adidahiya]

For anyone following this thread:

We've started a new repo called tslint-react: https://github.com/palantir/tslint-react

This will contain rules related to react & JSX. I've gone ahead and filed the rule suggestions above as issues in that repo -- follow along there for updates! We should have an initial release on NPM shortly.