Skip to content

enoshixi/tslint-react

 
 

Repository files navigation

NPM version Downloads Circle CI

tslint-react

Lint rules related to React & JSX for TSLint.

Usage

Sample configuration where tslint.json lives adjacent to your node_modules folder:

{
  "extends": ["tslint:latest", "tslint-react"],
  "rules": {
    // enable tslint-react rules here
    "jsx-no-lambda": true
  }
}

Rules

  • jsx-alignment
    • Enforces a consistent style for multiline JSX elements which promotes ease of editing via line-wise manipulations as well as maintainabilty via small diffs when changes are made.
    // Good:
    const element = <div
        className="foo"
        tabIndex={1}
    >
        {children}
    </div>;
    
    // Also Good:
    <Button
        appearance="pretty"
        disabled
        label="Click Me"
        size={size}
    />
  • jsx-curly-spacing (since v1.1.0)
    • Requires or bans spaces between curly brace characters in JSX.
    • Rule options: ["always", "never"]
  • jsx-no-lambda
    • Creating new anonymous functions (with either the function syntax or ES2015 arrow syntax) inside the render call stack works against pure component rendering. When doing an equality check between two lambdas, React will always consider them unequal values and force the component to re-render more often than necessary.
    • Rule options: none
  • jsx-no-multiline-js
    • Disallows multiline JS expressions inside JSX blocks to promote readability
    • Rule options: none
  • jsx-no-string-ref
    • Passing strings to the ref prop of React elements is considered a legacy feature and will soon be deprecated. Instead, use a callback.
    • Rule options: none
  • jsx-self-close (since v0.4.0)
    • Enforces that JSX elements with no children are self-closing.
    // bad
    <div className="foo"></div>
    // good
    <div className="foo" />
    • Rule options: none
  • jsx-wrap-multiline (since v2.1)
    • Enforces that multiline JSX expressions are wrapped with parentheses.
    • Opening parenthesis must be followed by a newline.
    • Closing parenthesis must be preceded by a newline.
    // bad
    const button = <button type="submit">
        Submit
    </button>;
    // good
    const button = (
        <button type="submit">
            Submit
        </button>
    );

Development

We track rule suggestions on Github issues -- here's a useful link to view all the current suggestions. Tickets are roughly triaged by priority (P1, P2, P3).

We're happy to accept PRs for new rules, especially those marked as Status: Accepting PRs. If submitting a PR, try to follow the same style conventions as the core TSLint project.

Changelog

See the Github release history.

About

📙 Lint rules related to React & JSX for TSLint.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 90.2%
  • JavaScript 9.1%
  • Shell 0.7%