Skip to end of banner
Go to start of banner

Suggestions for ESLint Rules

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 6 Next »

  • key-spacing
  • padding-line-between-statements
  • comma-dangle
  • max-len
  • react/sort-comp
  • react/jsx-one-expression-per-line
  • react/jsx-closing-bracket-location

  • react/jsx-closing-tag-location

  • react/jsx-wrap-multilines

key-spacing

currently: "key-spacing": "off"

  • beforeColon

Examples of incorrect code for this rule with the default { "beforeColon": false } option:

/*eslint key-spacing: ["error", { "beforeColon": false }]*/
var obj = { "foo" : 42 };

Examples of correct code for this rule with the default { "beforeColon": false } option:

/*eslint key-spacing: ["error", { "beforeColon": false }]*/
var obj = { "foo": 42 };

  • afterColon

Examples of incorrect code for this rule with the default { "afterColon": true } option:

/*eslint key-spacing: ["error", { "afterColon": true }]*/
var obj = { "foo":42 };

Examples of correct code for this rule with the default { "afterColon": true } option:

/*eslint key-spacing: ["error", { "afterColon": true }]*/
var obj = { "foo": 42 };

padding-line-between-statements

  • one or more blank lines are required between a variable declaration and a return statement.

Examples of incorrect code for the [{ blankLine: "always", prev: "*", next: "return" }] configuration:

/*eslint padding-line-between-statements: [
    "error",
    { blankLine: "always", prev: "*", next: "return" }
]*/

function foo() {
    bar();
    return;
}

Examples of correct code for the [{ blankLine: "always", prev: "*", next: "return" }] configuration:

/*eslint padding-line-between-statements: [
    "error",
    { blankLine: "always", prev: "*", next: "return" }
]*/

function foo() {
    bar();

    return;
}

function foo() {
    return;
}

  • This configuration would require blank lines after every sequence of variable declarations, like the newline-after-var rule.

Examples of incorrect code for the [{ blankLine: "always", prev: ["const", "let", "var"], next: "*"}, { blankLine: "any", prev: ["const", "let", "var"], next: ["const", "let", "var"]}] configuration:

/*eslint padding-line-between-statements: [
    "error",
    { blankLine: "always", prev: ["const", "let", "var"], next: "*"},
    { blankLine: "any",    prev: ["const", "let", "var"], next: ["const", "let", "var"]}
]*/

function foo() {
    var a = 0;
    var b = 0;
    bar();
}

function foo() {
    let a = 0;
    const b = 0;
    bar();
}

function foo() {
    const a = 0;
    const b = 0;
    bar();
}

Examples of correct code for the [{ blankLine: "always", prev: ["const", "let", "var"], next: "*"}, { blankLine: "any", prev: ["const", "let", "var"], next: ["const", "let", "var"]}] configuration:

/*eslint padding-line-between-statements: [
    "error",
    { blankLine: "always", prev: ["const", "let", "var"], next: "*"},
    { blankLine: "any",    prev: ["const", "let", "var"], next: ["const", "let", "var"]}
]*/

function foo() {
    var a = 0;
    var b = 0;

    bar();
}

function foo() {
    let a = 0;
    const b = 0;

    bar();
}

function foo() {
    const a = 0;
    const b = 0;

    bar();
}

comma-dangle

currently: 

/*"only-multiline" allows (but does not require) trailing commas when the last element or property is 
in a different line than the closing ] or } and disallows trailing commas when the last element or property 
is on the same line as the closing ] or }*/
"comma-dangle": [
	"error",
	{
		"arrays": "only-multiline",
		"objects": "only-multiline",
		"imports": "only-multiline",
		"exports": "only-multiline",
		"functions": "only-multiline"
	}
]

  • always-multiline

Examples of incorrect code for this rule with the "always-multiline" option:

/*eslint comma-dangle: ["error", "always-multiline"]*/

var foo = {
    bar: "baz",
    qux: "quux"
};

var foo = { bar: "baz", qux: "quux", };

var arr = [1,2,];

var arr = [1,
    2,];

var arr = [
    1,
    2
];

foo({
  bar: "baz",
  qux: "quux"
});

Examples of correct code for this rule with the "always-multiline" option:

/*eslint comma-dangle: ["error", "always-multiline"]*/

var foo = {
    bar: "baz",
    qux: "quux",
};

var foo = {bar: "baz", qux: "quux"};
var arr = [1,2];

var arr = [1,
    2];

var arr = [
    1,
    2,
];

foo({
  bar: "baz",
  qux: "quux",
});


max-len

     {
        "code": 120,
        "ignoreComments": true,
        "ignoreTrailingComments": true,
        "ignoreUrls": true,
        "ignoreStrings": true,
        "ignoreTemplateLiterals": true,
        "ignoreRegExpLiterals": true
      }

Examples of incorrect code for this rule with the default { "code": 80 } option:

/*eslint max-len: ["error", { "code": 80 }]*/

var foo = { "bar": "This is a bar.", "baz": { "qux": "This is a qux" }, "difficult": "to read" };

Examples of correct code for this rule with the default { "code": 80 } option:

/*eslint max-len: ["error", { "code": 80 }]*/

var foo = {
  "bar": "This is a bar.",
  "baz": { "qux": "This is a qux" },
  "easier": "to read"
};


react/sort-comp

Examples of incorrect code for this rule with   ["error", {  order: [ 'static-methods', 'lifecycle', 'render', 'everything-else' ], groups: <groups> }] option:

/*eslint "react/sort-comp": [<enabled>, { order: [ 'static-methods', 'lifecycle', 'render', 'everything-else' ] }]*/

var Hello = createReactClass({
  onClick: function() {},
	render: function() {
    return <div>Hello</div>;
  },
});

Examples of correct code for this rule with   ["error", {  order: [ 'static-methods', 'lifecycle', 'render', 'everything-else' ], groups: <groups> }] option:

/*eslint "react/sort-comp": [<enabled>, { order: [ 'static-methods', 'lifecycle', 'render', 'everything-else' ] }]*/

var Hello = createReactClass({
  render: function() {
    return <div>Hello</div>;
  },
  onClick: function() {}
});

react/jsx-one-expression-per-line

Examples of incorrect code for this rule with  ["error", { "allow": "literal" }] option:

/* "react/jsx-one-expression-per-line": ["error", { "allow": "literal" }] */
<App><Hello /></App>

<App><Hello />
</App>

<App>
  <Hello>
  </Hello></App>

<App>
  <Hello /> World
</App>

Examples of correct code for this rule with ["error", { "allow": "literal" }] option:

<App>Hello</App>


react/jsx-closing-bracket-location

Examples of incorrect code for this rule with [ 2, "tag-aligned"] option:

/* "react/jsx-closing-bracket-location": [ 2, "tag-aligned"] */

<Hello
  lastName="Smith"
  firstName="John" />;

<Hello
  lastName="Smith"
  firstName="John"
  />;

Examples of correct code for this rule with [ 2, "tag-aligned"] option:

<Hello firstName="John" lastName="Smith" />;

<Hello
  firstName="John"
  lastName="Smith"
/>;

react/jsx-closing-tag-location

Examples of incorrect code for this rule with [ 2, "tag-aligned"] option:

/* "react/jsx-closing-tag-location": [ 2, "tag-aligned"] */

<Hello>
  marklar
  </Hello>

<Hello>
  marklar</Hello>

Examples of correct code for this rule with [ 2, "tag-aligned"] option:

/* "react/jsx-closing-tag-location": [ 2, "tag-aligned"] */

<Hello>
  marklar
</Hello>

<Hello>marklar</Hello>

react/jsx-wrap-multilines

Examples of incorrect code for this rule with ["error","parens-new-line"] option:

/* "react/jsx-wrap-multilines": ["error","parens-new-line"] */

var Hello = createReactClass({
  render: function() {
    return <div>
      <p>Hello {this.props.name}</p>
    </div>;
  }
});


var Hello = createReactClass({
  render: function() {
    return (<div>
      <p>Hello {this.props.name}</p>
    </div>);
  }
});

Examples of correct code for this rule with [ 2, "tag-aligned"] option:

/* "react/jsx-wrap-multilines": ["error","parens-new-line"] */

var singleLineJSX = <p>Hello</p>

var Hello = createReactClass({
  render: function() {
    return (
      <div>
        <p>Hello {this.props.name}</p>
      </div>
    );
  }
});
  • No labels