review.tizen.org Git - platform/framework/web/crosswalk-tizen.git/blob

   1 ESLint-plugin-React
   2 ===================
   3
   4 [![Maintenance Status][status-image]][status-url] [![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Dependency Status][deps-image]][deps-url] [![Coverage Status][coverage-image]][coverage-url] [![Code Climate][climate-image]][climate-url]
   5
   6 React specific linting rules for ESLint
   7
   8 # Installation
   9
  10 Install [ESLint](https://www.github.com/eslint/eslint) either locally or globally.
  11
  12     npm install eslint
  13
  14 If you installed `ESLint` globally, you have to install React plugin globally too. Otherwise, install it locally.
  15
  16     $ npm install eslint-plugin-react
  17
  18 # Configuration
  19
  20 Add `plugins` section and specify ESLint-plugin-React as a plugin.
  21
  22 ```json
  23 {
  24   "plugins": [
  25     "react"
  26   ]
  27 }
  28 ```
  29
  30 If it is not already the case you must also configure `ESLint` to support JSX.
  31
  32 ```json
  33 {
  34   "ecmaFeatures": {
  35     "jsx": true
  36   }
  37 }
  38 ```
  39
  40 Finally, enable all of the rules that you would like to use.
  41
  42 ```json
  43 {
  44   "rules": {
  45     "react/display-name": 1,
  46     "react/jsx-boolean-value": 1,
  47     "react/jsx-quotes": 1,
  48     "react/jsx-no-undef": 1,
  49     "react/jsx-sort-props": 1,
  50     "react/jsx-uses-react": 1,
  51     "react/jsx-uses-vars": 1,
  52     "react/no-did-mount-set-state": 1,
  53     "react/no-did-update-set-state": 1,
  54     "react/no-multi-comp": 1,
  55     "react/no-unknown-property": 1,
  56     "react/prop-types": 1,
  57     "react/react-in-jsx-scope": 1,
  58     "react/self-closing-comp": 1,
  59     "react/wrap-multilines": 1
  60   }
  61 }
  62 ```
  63
  64 # List of supported rules
  65
  66 * [display-name](docs/rules/display-name.md): Prevent missing displayName in a React component definition
  67 * [jsx-boolean-value](docs/rules/jsx-boolean-value.md): Enforce boolean attributes notation in JSX
  68 * [jsx-quotes](docs/rules/jsx-quotes.md): Enforce quote style for JSX attributes
  69 * [jsx-no-undef](docs/rules/jsx-no-undef.md): Disallow undeclared variables in JSX
  70 * [jsx-sort-props](docs/rules/jsx-sort-props.md): Enforce props alphabetical sorting
  71 * [jsx-uses-react](docs/rules/jsx-uses-react.md): Prevent React to be incorrectly marked as unused
  72 * [jsx-uses-vars](docs/rules/jsx-uses-vars.md): Prevent variables used in JSX to be incorrectly marked as unused
  73 * [no-did-mount-set-state](docs/rules/no-did-mount-set-state.md): Prevent usage of setState in componentDidMount
  74 * [no-did-update-set-state](docs/rules/no-did-update-set-state.md): Prevent usage of setState in componentDidUpdate
  75 * [no-multi-comp](docs/rules/no-multi-comp.md): Prevent multiple component definition per file
  76 * [no-unknown-property](docs/rules/no-unknown-property.md): Prevent usage of unknown DOM property
  77 * [prop-types](docs/rules/prop-types.md): Prevent missing props validation in a React component definition
  78 * [react-in-jsx-scope](docs/rules/react-in-jsx-scope.md): Prevent missing React when using JSX
  79 * [self-closing-comp](docs/rules/self-closing-comp.md): Prevent extra closing tags for components without children
  80 * [wrap-multilines](docs/rules/wrap-multilines.md): Prevent missing parentheses around multilines JSX
  81
  82 ## To Do
  83
  84 * no-deprecated: Prevent usage of deprecated methods ([React 0.12 Updated API](http://facebook.github.io/react/blog/2014/10/28/react-v0.12.html#new-terminology-amp-updated-apis))
  85 * no-classic: Prevent usage of "classic" methods ([#2700](https://github.com/facebook/react/pull/2700))
  86 * [Implement relevant rules from David Chang's React Style Guide](https://reactjsnews.com/react-style-guide-patterns-i-like)
  87 * [Implement relevant rules from John Cobb's best practices and conventions](http://web-design-weekly.com/2015/01/29/opinionated-guide-react-js-best-practices-conventions/)
  88 * [Implement relevant rules from Alexander Early's tips and best practices](http://aeflash.com/2015-02/react-tips-and-best-practices.html)
  89
  90 [Any rule idea is welcome !](https://github.com/yannickcr/eslint-plugin-react/issues)
  91
  92 # License
  93
  94 ESLint-plugin-React is licensed under the [MIT License](http://www.opensource.org/licenses/mit-license.php).
  95
  96
  97 [npm-url]: https://npmjs.org/package/eslint-plugin-react
  98 [npm-image]: http://img.shields.io/npm/v/eslint-plugin-react.svg?style=flat-square
  99
 100 [travis-url]: https://travis-ci.org/yannickcr/eslint-plugin-react
 101 [travis-image]: http://img.shields.io/travis/yannickcr/eslint-plugin-react/master.svg?style=flat-square
 102
 103 [deps-url]: https://david-dm.org/yannickcr/eslint-plugin-react
 104 [deps-image]: https://img.shields.io/david/dev/yannickcr/eslint-plugin-react.svg?style=flat-square
 105
 106 [coverage-url]: https://coveralls.io/r/yannickcr/eslint-plugin-react?branch=master
 107 [coverage-image]: http://img.shields.io/coveralls/yannickcr/eslint-plugin-react/master.svg?style=flat-square
 108
 109 [climate-url]: https://codeclimate.com/github/yannickcr/eslint-plugin-react
 110 [climate-image]: http://img.shields.io/codeclimate/github/yannickcr/eslint-plugin-react.svg?style=flat-square
 111
 112 [status-url]: https://github.com/yannickcr/eslint-plugin-react/pulse
 113 [status-image]: http://img.shields.io/badge/status-maintained-brightgreen.svg?style=flat-square
 114