Improve syntax highlighting of code snippets

README.md

@@ -33,7 +33,7 @@ Add `plugins` section and specify ESLint-plugin-React as a plugin.
 
 You can also specify some settings that will be shared across all the plugin rules.
 
-```js
+```json
 {
   "settings": {
     "react": {
@@ -152,7 +152,7 @@ This plugin exports a `recommended` configuration that enforce React good practi
 
 To enable this configuration use the `extends` property in your `.eslintrc` config file:
 
-```js
+```json
 {
   "extends": ["eslint:recommended", "plugin:react/recommended"]
 }
@@ -182,7 +182,7 @@ The rules enabled in this configuration are:
 This plugin also exports an `all` configuration that includes every available rule.
 This pairs well with the `eslint:all` rule.
 
-```js
+```json
 {
   "plugins": [
     "react"

docs/rules/display-name.md

@@ -6,7 +6,7 @@ DisplayName allows you to name your component. This name is used by React in deb
 
 The following patterns are considered warnings:
 
-```js
+```jsx
 var Hello = React.createClass({
   render: function() {
     return <div>Hello {this.props.name}</div>;
@@ -16,7 +16,7 @@ var Hello = React.createClass({
 
 The following patterns are not considered warnings:
 
-```js
+```jsx
 var Hello = React.createClass({
   displayName: 'Hello',
   render: function() {
@@ -39,7 +39,7 @@ When `true` the rule will ignore the name set by the transpiler and require a `d
 
 The following patterns are considered okay and do not cause warnings:
 
-```js
+```jsx
 var Hello = React.createClass({
   displayName: 'Hello',
 
@@ -50,7 +50,7 @@ var Hello = React.createClass({
 module.exports = Hello;
 ```
 
-```js
+```jsx
 export default class Hello extends React.Component {
   render() {
     return <div>Hello {this.props.name}</div>;
@@ -59,7 +59,7 @@ export default class Hello extends React.Component {
 Hello.displayName = 'Hello';
 ```
 
-```js
+```jsx
 export default function Hello({ name }) {
   return <div>Hello {name}</div>;
 }
@@ -68,7 +68,7 @@ Hello.displayName = 'Hello';
 
 The following patterns will cause warnings:
 
-```js
+```jsx
 var Hello = React.createClass({
   render: function() {
     return <div>Hello {this.props.name}</div>;
@@ -77,31 +77,31 @@ var Hello = React.createClass({
 module.exports = Hello;
 ```
 
-```js
+```jsx
 export default class Hello extends React.Component {
   render() {
     return <div>Hello {this.props.name}</div>;
   }
 }
 ```
 
-```js
+```jsx
 module.exports = React.createClass({
   render: function() {
     return <div>Hello {this.props.name}</div>;
   }
 });
 ```
 
-```js
+```jsx
 export default class extends React.Component {
   render() {
     return <div>Hello {this.props.name}</div>;
   }
 }
 ```
 
-```js
+```jsx
 function HelloComponent() {
   return React.createClass({
     render: function() {

docs/rules/forbid-prop-types.md

@@ -9,7 +9,7 @@ This rule is off by default.
 
 The following patterns are considered warnings:
 
-```js
+```jsx
 var Component = React.createClass({
   propTypes: {
     a: React.PropTypes.any,

docs/rules/jsx-boolean-value.md

@@ -10,25 +10,25 @@ This rule takes one argument. If it is `"always"` then it warns whenever an attr
 
 The following patterns are considered warnings when configured `"never"`:
 
-```js
+```jsx
 var Hello = <Hello personal={true} />;
 ```
 
 The following patterns are not considered warnings when configured `"never"`:
 
-```js
+```jsx
 var Hello = <Hello personal />;
 ```
 
 The following patterns are considered warnings when configured `"always"`:
 
-```js
+```jsx
 var Hello = <Hello personal />;
 ```
 
 The following patterns are not considered warnings when configured `"always"`:
 
-```js
+```jsx
 var Hello = <Hello personal={true} />;
 ```
 

docs/rules/jsx-curly-spacing.md

@@ -27,15 +27,15 @@ Depending on your coding conventions, you can choose either option by specifying
 
 When `"never"` is set, the following patterns are considered warnings:
 
-```js
+```jsx
 <Hello name={ firstname } />;
 <Hello name={ firstname} />;
 <Hello name={firstname } />;
 ```
 
 The following patterns are not warnings:
 
-```js
+```jsx
 <Hello name={firstname} />;
 <Hello name={{ firstname: 'John', lastname: 'Doe' }} />;
 <Hello name={
@@ -47,15 +47,15 @@ The following patterns are not warnings:
 
 When `"always"` is used, the following patterns are considered warnings:
 
-```js
+```jsx
 <Hello name={firstname} />;
 <Hello name={ firstname} />;
 <Hello name={firstname } />;
 ```
 
 The following patterns are not warnings:
 
-```js
+```jsx
 <Hello name={ firstname } />;
 <Hello name={ {firstname: 'John', lastname: 'Doe'} } />;
 <Hello name={
@@ -73,7 +73,7 @@ By default, braces spanning multiple lines are allowed with either setting. If y
 
 When `"never"` is used and `allowMultiline` is `false`, the following patterns are considered warnings:
 
-```js
+```jsx
 <Hello name={ firstname } />;
 <Hello name={ firstname} />;
 <Hello name={firstname } />;
@@ -84,14 +84,14 @@ When `"never"` is used and `allowMultiline` is `false`, the following patterns a
 
 The following patterns are not warnings:
 
-```js
+```jsx
 <Hello name={firstname} />;
 <Hello name={{ firstname: 'John', lastname: 'Doe' }} />;
 ```
 
 When `"always"` is used and `allowMultiline` is `false`, the following patterns are considered warnings:
 
-```js
+```jsx
 <Hello name={firstname} />;
 <Hello name={ firstname} />;
 <Hello name={firstname } />;
@@ -102,7 +102,7 @@ When `"always"` is used and `allowMultiline` is `false`, the following patterns
 
 The following patterns are not warnings:
 
-```js
+```jsx
 <Hello name={ firstname } />;
 <Hello name={ {firstname: 'John', lastname: 'Doe'} } />;
 ```
@@ -123,13 +123,13 @@ All spacing options accept either the string `"always"` or the string `"never"`.
 
 When `"always"` is used but `objectLiterals` is `"never"`, the following pattern is not considered a warning:
 
-```js
+```jsx
 <App blah={ 3 } foo={{ bar: true, baz: true }} />;
 ```
 
 When `"never"` is used and `objectLiterals` is `"always"`, the following pattern is not considered a warning:
 
-```js
+```jsx
 <App blah={3} foo={ {bar: true, baz: true} } />;
 ```
 

docs/rules/jsx-equals-spacing.md

@@ -25,15 +25,15 @@ Depending on your coding conventions, you can choose either option by specifying
 
 When `"never"` is set, the following patterns are considered warnings:
 
-```js
+```jsx
 <Hello name = {firstname} />;
 <Hello name ={firstname} />;
 <Hello name= {firstname} />;
 ```
 
 The following patterns are not warnings:
 
-```js
+```jsx
 <Hello name={firstname} />;
 <Hello name />;
 <Hello {...props} />;
@@ -43,15 +43,15 @@ The following patterns are not warnings:
 
 When `"always"` is used, the following patterns are considered warnings:
 
-```js
+```jsx
 <Hello name={firstname} />;
 <Hello name ={firstname} />;
 <Hello name= {firstname} />;
 ```
 
 The following patterns are not warnings:
 
-```js
+```jsx
 <Hello name = {firstname} />;
 <Hello name />;
 <Hello {...props} />;

docs/rules/jsx-handler-names.md

@@ -6,21 +6,21 @@ Ensures that any component or prop methods used to handle events are correctly p
 
 The following patterns are considered warnings:
 
-```js
+```jsx
 <MyComponent handleChange={this.handleChange} />
 ```
 
-```js
+```jsx
 <MyComponent onChange={this.componentChanged} />
 ```
 
 The following patterns are not considered warnings:
 
-```js
+```jsx
 <MyComponent onChange={this.handleChange} />
 ```
 
-```js
+```jsx
 <MyComponent onChange={this.props.onFoo} />
 ```
 
@@ -40,4 +40,4 @@ The following patterns are not considered warnings:
 
 ## When Not To Use It
 
-If you are not using JSX, or if you don't want to enforce specific naming conventions for event handlers.
+If you are not using JSX, or if you don't want to enforce specific naming conventions for event handlers.

docs/rules/jsx-no-bind.md

@@ -6,15 +6,15 @@ A `bind` call or [arrow function](https://developer.mozilla.org/en-US/docs/Web/J
 
 The following patterns are considered warnings:
 
-```js
+```jsx
 <div onClick={this._handleClick.bind(this)}></div>
 ```
-```js
+```jsx
 <div onClick={() => console.log('Hello!'))}></div>
 ```
 
 The following patterns are not considered warnings:
-```js
+```jsx
 <div onClick={this._handleClick}></div>
 ```
 
@@ -59,7 +59,7 @@ When `true` the following is not considered a warning:
 
 A common use case of `bind` in render is when rendering a list, to have a separate callback per list item:
 
-```js
+```jsx
 var List = React.createClass({
   render() {
     return (
@@ -77,7 +77,7 @@ var List = React.createClass({
 
 Rather than doing it this way, pull the repeated section into its own component:
 
-```js
+```jsx
 var List = React.createClass({
   render() {
     return (
@@ -110,7 +110,7 @@ This will speed up rendering, as it avoids the need to create new functions (thr
 
 Unfortunately [React ES6 classes](https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#es6-classes) do not autobind their methods like components created with the older `React.createClass` syntax. There are several approaches to binding methods for ES6 classes. A basic approach is to just manually bind the methods in the constructor:
 
-```js
+```jsx
 class Foo extends React.Component {
   constructor() {
     super();

docs/rules/jsx-no-comment-textnodes.md

@@ -7,7 +7,7 @@ injected as a text node in JSX statements.
 
 The following patterns are considered warnings:
 
-```js
+```jsx
 var Hello = React.createClass({
   render: function() {
     return (
@@ -29,7 +29,7 @@ var Hello = React.createClass({
 
 The following patterns are not considered warnings:
 
-```js
+```jsx
 var Hello = React.createClass({
   displayName: 'Hello',
   render: function() {
@@ -57,7 +57,7 @@ var Hello = React.createClass({
 It's possible you may want to legitimately output comment start characters (`//` or `/*`)
 in a JSX text node. In which case, you can do the following:
 
-```js
+```jsx
 var Hello = React.createClass({
   render: function() {
     return (