ESLintのエラールール。日本語ざっくり解説[スタイル編]
※こちらは2015/9/25日の古い記事です。（ESLint v1.5.1 released 22 September 2015）
現時点(2019/9/25)ではESLint v6.4.0です。
最新のドキュメントを読みに行くことを強くオススメします。
(近いうち新たに加筆してこちらに更新する予定です)
こんにちは。森田と申します。芸人をしています。今回は
ESLintのエラールール。日本語「ざっくりしたの」ないのか、と思ってぐぐしても
なさそうなので書きました。
※使い方はこちら
※ここに載っているのが「ESlintのルール全て」ではありません。
他にこういうのあります。
ESLintのエラールール。日本語ざっくり解説[可能性あるエラー編]
ESLintのエラールール。日本語ざっくり解説[ベストプラクティス編]
ESLintのエラールール。日本語ざっくり解説[ES6編]
※いろいろなオプションでルール設定できるみたいなので詳しく知りたかったら見出しがリンクになっていますので見に行ってくださいね。
※以下文章長いので注意(もし探しているルールあったらcmd+F検索したらいいかもね)
以下は「Stylistic Issues」というカテゴリーで提案しているところです。ルールはABC順
長いですので吐きそうになったら教えてください。
array-bracket-spacing
enforce spacing inside array brackets
配列のカッコ内の間隔を強制します
下記のようなnever設定がdefaultです
/*eslint array-bracket-spacing: [2, "never"]*/
var arr = [ 'foo', 'bar' ]; /*error There should be no space after '['*/ /*error There should be no space before ']'*/
var arr = ['foo', 'bar' ]; /*error There should be no space before ']'*/
var arr = [ ['foo'], 'bar']; /*error There should be no space after '['*/
var arr = [[ 'foo' ], 'bar']; /*error There should be no space after '['*/ /*error There should be no space before ']'*/
var arr = ['foo',
'bar'
];
var [ x, y ] = z; /*error There should be no space after '['*/ /*error There should be no space before ']'*/
var [ x,y ] = z; /*error There should be no space after '['*/ /*error There should be no space before ']'*/
var [ x, ...y ] = z; /*error There should be no space after '['*/ /*error There should be no space before ']'*/
var [ ,,x, ] = z; /*error There should be no space after '['*/ /*error There should be no space before ']'*/
//////////////////////////////////////
//Good
/*eslint array-bracket-spacing: [2, "never"]*/
var arr = [];
var arr = ['foo', 'bar', 'baz'];
var arr = [['foo'], 'bar', 'baz'];
var arr = [
'foo',
'bar',
'baz'
];
var arr = [
'foo',
'bar'];
var [x, y] = z;
var [x,y] = z;
var [x, ...y] = z;
var [,,x,] = z;
block-spacing
disallow or enforce spaces inside of single line blocks
単一行ブロックの内側のスペースを強制、または禁止
/*eslint block-spacing: 2*/
function foo() {return true;} /*error Requires a space after "{".*/ /*error Requires a space before "}".*/
if (foo) { bar = 0;} /*error Requires a space before "}".*/
////////////////////
//Good
/*eslint block-spacing: 2*/
function foo() { return true; }
if (foo) { bar = 0; }
brace-style
enforce one true brace style
ブレーススタイルを適用の強制
/*eslint brace-style: 2*/
function foo() /*error Opening curly brace does not appear on the same line as controlling statement.*/
{//こういうのオールマンというらしい
return true;
}
if (foo) /*error Opening curly brace does not appear on the same line as controlling statement.*/
{
bar();
}
///////////////////////
//Good
function foo() {
return true;
}
if (foo) {
bar();
}
if (foo) {
bar();
} else {
baz();
}
camelcase
require camel case names
キャメル記法とアンダースコア記法があるけどここではキャメル記法のアプローチ
先頭と末尾のアンダースコアは無視する。定数のような全て大文字もスルーする。
とか
/*eslint camelcase: 2*/
var my_favorite_color = "#112C85"; /*error Identifier 'my_favorite_color' is not in camel case.*/
function do_something() { /*error Identifier 'do_something' is not in camel case.*/
// ...
}
obj.do_something = function() { /*error Identifier 'do_something' is not in camel case.*/
// ...
};
var obj = {
my_pref: 1 /*error Identifier 'my_pref' is not in camel case.*/
};
/////////////////////////////
//Good
/*eslint camelcase: 2*/
var myFavoriteColor = "#112C85";
var _myFavoriteColor = "#112C85";
var myFavoriteColor_ = "#112C85";
var MY_FAVORITE_COLOR = "#112C85";
var foo = bar.baz_boom;
var foo = { qux: bar.baz_boom };
obj.do_something();
comma-spacing
enforce spacing before and after comma
カンマの前後の間隔を強制します。例題、よくカンマの位置みてくださいね
/*eslint comma-spacing: [2, {"before": false, "after": true}]*/
var foo = 1 ,bar = 2; /*error There should be no space before ','.*/ /*error A space is required after ','.*/
var arr = [1 , 2]; /*error There should be no space before ','.*/
var obj = {"foo": "bar" ,"baz": "qur"}; /*error There should be no space before ','.*/ /*error A space is required after ','.*/
foo(a ,b); /*error There should be no space before ','.*/ /*error A space is required after ','.*/
new Foo(a ,b); /*error There should be no space before ','.*/ /*error A space is required after ','.*/
function foo(a ,b){} /*error There should be no space before ','.*/ /*error A space is required after ','.*/
a ,b /*error There should be no space before ','.*/ /*error A space is required after ','.*/
/////////////////////////////////
//Good
/*eslint comma-spacing: [2, {"before": false, "after": true}]*/
var foo = 1, bar = 2
, baz = 3;
var arr = [1, 2];
var obj = {"foo": "bar", "baz": "qur"};
foo(a, b);
new Foo(a, b);
function foo(a, b){}
a, b
comma-style
enforce one true comma style
コンマスタイルを適用を強制
/*eslint comma-style: [2, "last"]*/
var foo = 1
, /*error Bad line breaking before and after ','.*/
bar = 2;
var foo = 1
, bar = 2; /*error ',' should be placed last.*/
var foo = ["apples"
, "oranges"]; /*error ',' should be placed last.*/
function bar() {
return {
"a": 1
,"b:": 2 /*error ',' should be placed last.*/
};
}
///////////////////////
//Good
/*eslint comma-style: [2, "last"]*/
var foo = 1, bar = 2;
var foo = 1,
bar = 2;
var foo = ["apples",
"oranges"];
function bar() {
return {
"a": 1,
"b:": 2
};
}
computed-property-spacing
require or disallow padding inside computed properties
計算されたプロパティの内側のパディングを許可、もしくは許さないの設定だよあたしゃ
/*eslint computed-property-spacing: [2, "never"]*/
obj[foo ] /*error There should be no space before ']'*/
obj[ 'foo'] /*error There should be no space after '['*/
var x = {[ b ]: a} /*error There should be no space after '['*/ /*error There should be no space before ']'*/
obj[foo[ bar ]] /*error There should be no space after '['*/ /*error There should be no space before ']'*/
////////////////////////
//Good
/*eslint computed-property-spacing: [2, "never"]*/
obj[foo]
obj['foo']
var x = {[b]: a}
obj[foo[bar]]
consistent-this
enforce consistent naming when capturing the current execution context
現在の実行コンテキストをキャプチャする際に一貫性のあるネーミングを強制
/*eslint consistent-this: [2, "self"]*/
var self = 42; /*error Designated alias 'self' is not assigned to 'this'.*/
var that = this; /*error Unexpected alias 'that' for 'this'.*/
self = 42; /*error Designated alias 'self' is not assigned to 'this'.*/
that = this; /*error Unexpected alias 'that' for 'this'.*/
//////////////////
//Good
/*eslint consistent-this: [2, "self"]*/
var self = this;
var that = 42;
var that;
self = this;
foo.bar = this;
eol-last
enforce newline at the end of file, with no multiple empty lines (fixable)
複数の空白行で、ファイルの最後に（固定可能）改行を強制
改行を末尾の利点は、連結またはシェルプロンプトに干渉することなく、端末にファイルと出力ファイルに追加する機能があります。このルールは、すべての非空のプログラムの改行を強制しますよ。
/*eslint eol-last: 2*/
function doSmth() {
var foo = 2;
}
///////////////////////
///Good
/*eslint eol-last: 2*/
function doSmth() {
var foo = 2;
}
// ここにスペースを！！
func-names
require function expressions to have a name
関数が例外をスローしたときに、関数名をオフのままにした場合、スタックトレース内の無名関数に似た何かを得る可能性があります。関数発見のためにオプション名を指定した場合、スタックトレース内の関数式の名前を取得するよ。
/* eslint func-names: 2*/
Foo.prototype.bar = function() {}; /*error Missing function expression name.*/
(function() { /*error Missing function expression name.*/
// ...
}())
///////////////////////////
//Good
/* eslint func-names: 2*/
Foo.prototype.bar = function bar() {};
(function bar() {
// ...
}())
func-style
enforce use of function declarations or expressions
関数宣言や表現の使用を強制します
関数宣言が巻き上げられることのスタイル強制みたいだよ
これはエラーではないみたいな、下記は関数宣言だけど、関数式の場合、前記述の関数実行を防ぐためのやつみたい
doSomething();
function doSomething() {
// ...
}
/*eslint func-style: [2, "declaration"]*/
var foo = function() { /*error Expected a function declaration.*/
// ...
};
/*eslint func-style: [2, "expression"]*/
function foo() { /*error Expected a function expression.*/
// ...
}
/////////////////////
//Good
/*eslint func-style: [2, "declaration"]*/
function foo() {
// ...
}
// Methods (functions assigned to objects) are not checked by this rule
SomeObject.foo = function() {
// ...
};
/*eslint func-style: [2, "expression"]*/
var foo = function() {
// ...
};
//arrowFunctionを許可する
/*eslint func-style: ["error", "declaration", { "allowArrowFunctions": true }]*/
var foo = () => {};
id-length
this option enforces minimum and maximum identifier lengths (variable names, property names etc.)
最小と最大の識別子の長さ（変数名、プロパティ名など）を強制
/*eslint id-length: 2*/ // default is minimum 2-chars ({ min: 2})
var x = 5; /*error Identifier name 'x' is too short. (< 2)*/
obj.e = document.body; /*error Identifier name 'e' is too short. (< 2)*/
var foo = function (e) { }; /*error Identifier name 'e' is too short. (< 2)*/
try {
dangerousStuff();
} catch (e) { /*error Identifier name 'e' is too short. (< 2)*/
// ignore as many do
}
var myObj = { a: 1 }; /*error Identifier name 'a' is too short. (< 2)*/
(a) => { a * a }; /*error Identifier name 'a' is too short. (< 2)*/
function foo(x = 0) { } /*error Identifier name 'x' is too short. (< 2)*/
class x { } /*error Identifier name 'x' is too short. (< 2)*/
class Foo { x() {} } /*error Identifier name 'x' is too short. (< 2)*/
function foo(...x) { } /*error Identifier name 'x' is too short. (< 2)*/
var { x} = {}; /*error Identifier name 'x' is too short. (< 2)*/
var { x: a} = {}; /*error Identifier name 'x' is too short. (< 2)*/
var { a: [x]} = {}; /*error Identifier name 'a' is too short. (< 2)*/
import x from 'y'; /*error Identifier name 'x' is too short. (< 2)*/
export var x = 0; /*error Identifier name 'x' is too short. (< 2)*/
({ a: obj.x.y.z }) = {}; /*error Identifier name 'a' is too short. (< 2)*/ /*error Identifier name 'z' is too short. (< 2)*/
({ prop: obj.x }) = {}; /*error Identifier name 'x' is too short. (< 2)*/
//////////////////////
//Good
/*eslint id-length: 2*/ // default is minimum 2-chars ({ min: 2})
var num = 5;
function _f() { return 42; }
function _func() { return 42; }
obj.el = document.body;
var foo = function (evt) { /* do stuff */ };
try {
dangerousStuff();
} catch (error) {
// ignore as many do
}
var myObj = { apple: 1 };
(num) => { num * num };
function foo(num = 0) { }
class MyClass { }
class Foo { method() {} }
function foo(...args) { }
var { prop } = {};
var { prop: a } = {};
var { prop: [x] } = {};
import something from "y";
export var num = 0;
({ prop: obj.x.y.something }) = {};
({ prop: obj.longName }) = {};
var data = { "x": 1 }; // excused because of quotes
data["y"] = 3; // excused because of calculated property access
id-match
require identifiers to match the provided regular expression
与えられた正規表現に一致する識別子を必要とします
/*eslint id-match: [2, "^[a-z]+([A-Z][a-z]+)*$", {"properties": true}]*/
var my_favorite_color = "#112C85"; /*error Identifier 'my_favorite_color' does not match the pattern '^[a-z]+([A-Z][a-z]+)*$'.*/
var _myFavoriteColor = "#112C85"; /*error Identifier '_myFavoriteColor' does not match the pattern '^[a-z]+([A-Z][a-z]+)*$'.*/
var myFavoriteColor_ = "#112C85"; /*error Identifier 'myFavoriteColor_' does not match the pattern '^[a-z]+([A-Z][a-z]+)*$'.*/
var MY_FAVORITE_COLOR = "#112C85"; /*error Identifier 'MY_FAVORITE_COLOR' does not match the pattern '^[a-z]+([A-Z][a-z]+)*$'.*/
function do_something() { /*error Identifier 'do_something' does not match the pattern '^[a-z]+([A-Z][a-z]+)*$'.*/
// ...
}
obj.do_something = function() { /*error Identifier 'do_something' does not match the pattern '^[a-z]+([A-Z][a-z]+)*$'.*/
// ...
};
var obj = {
my_pref: 1 /*error Identifier 'my_pref' does not match the pattern '^[a-z]+([A-Z][a-z]+)*$'.*/
};
///////////////////////////
//Good
/*eslint id-match: [2, "^[a-z]+([A-Z][a-z]+)*$", {"properties": false}]*/
var myFavoriteColor = "#112C85";
var foo = bar.baz_boom;
var foo = { qux: bar.baz_boom };
obj.do_something();
/*eslint id-match: [2, "", {properties: false}]*/
var obj = {
my_pref: 1
};
indent
specify tab or space width for your code (fixable)
コードのタブやスペース幅を指定します（修正可能
/*eslint indent: [2, 2]*/
if (a) {
b=c; /*error Expected indentation of 2 space characters but found 3.*/
function foo(d) { /*error Expected indentation of 2 space characters but found 0.*/
e=f; /*error Expected indentation of 8 space characters but found 7.*/
} /*error Expected indentation of 6 space characters but found 0.*/
}
/////////////////
//Good
/*eslint indent: [2, 2]*/
if (a) {
b=c;
function foo(d) {
e=f;
}
}
jsx-quotes
specify whether double or single quotes should be used in JSX attributes
二重引用符または一重引用符がJSX属性で使用するかどうかを指定
JSXのこういうやつどうする？
<a b='c' />
<a b="c" />
<a b="'" />
<a b='"' />
key-spacing
enforce spacing between keys and values in object literal properties
オブジェクトリテラル・プロパティのキーと値の間の間隔を強制します
//いろいろなオプションある。この指定ではこれはエラーの意
/*eslint key-spacing: [2, {"beforeColon": false, "afterColon": false}]*/
var obj = { foo: 42 }; /*error Extra space before value for key "foo".*/
var bar = { baz :52 }; /*error Extra space after key "baz".*/
foo = { thisLineWouldBeTooLong:
soUseAnotherLine }; /*error Extra space before value for key "thisLineWouldBeTooLong".*/
/////////////////
// デフォルト
/*eslint key-spacing: [2, {"beforeColon": false, "afterColon": true}]*/
var obj = { "foo": (42) };
foo = { thisLineWouldBeTooLong:
soUseAnotherLine };
lines-around-comment
enforce empty lines around comments
コメントの周りの空行を強制
var x = 0;
/* the vertical position */
var y = 10;
///////////
//Good
var x = 0;
/**
* The vertical position.
*/
var y = 10;
no-lonely-if
disallow if as the only statement in an else block
他のブロック内の唯一のステートメントだった場合、それを許可しない
if文は、親の他のブロック内の唯一のステートメントがある場合に文は、
それが形成している場合、他の使用に結合することは明確になります。
if (foo) {
// ...
} else {
if (bar) {
// ...
}
}
/////////////////////
//Good
if (foo) {
// ...
} else if (bar) {
// ...
}
no-mixed-spaces-and-tabs
disallow mixed spaces and tabs for indentation (recommended)
インデントに混合スペースとタブを許可しない（推奨）
/*eslint no-mixed-spaces-and-tabs: 2*/
function add(x, y) {
// --->..return x + y;
return x + y; /*error Mixed spaces and tabs.*/
}
function main() {
// --->var x = 5,
// --->....y = 7;
var x = 5,
y = 7; /*error Mixed spaces and tabs.*/
}
//////////////////////
//Good
/*eslint no-mixed-spaces-and-tabs: 2*/
function add(x, y) {
// --->return x + y;
return x + y;
}
no-multiple-empty-lines
disallow multiple empty lines
複数の空行を許可しません絶対にマジで
/*eslint no-multiple-empty-lines: [2, {max: 2}]*/
var foo = 5;
/*error Multiple blank lines not allowed.*/
var bar = 3;
///////////////////////
//Good
//最大指定している値に注意
/*eslint no-multiple-empty-lines: [2, {max: 2}]*/
var foo = 5;
var bar = 3;
no-nested-ternary
disallow nested ternary expressions
ネストされた三元表現を許可しません
/*eslint no-nested-ternary: 2*/
var thing = foo ? bar : baz === qux ? quxx : foobar; /*error Do not nest ternary expressions*/
foo ? baz === qux ? quxx() : foobar() : bar(); /*error Do not nest ternary expressions*/
//////////////////////
///good
/*eslint no-nested-ternary: 2*/
var thing;
if (foo) {
thing = bar;
} else if (baz === qux) {
thing = quxx;
} else {
thing = foobar;
}
no-new-object
disallow the use of the Object constructor
Objectコンストラクタの使用を許可しません
/*eslint no-new-object: 2*/
var myObject = new Object(); /*error The object literal notation {} is preferrable.*/
var myObject = new Object; /*error The object literal notation {} is preferrable.*/
///////////////////
//good
/*eslint no-new-object: 2*/
var myObject = new CustomObject();
var myObject = {};
no-restricted-syntax
disallow use of certain syntax in code
コード内の特定の構文の使用を許可しません
/* eslint no-restricted-syntax: [2, "FunctionExpression", "WithStatement"] */
with (me) { /*error Using "WithStatement" is not allowed.*/
dontMess();
}
var doSomething = function () {}; /*error Using "FunctionExpression" is not allowed.*/
//////////////
//gddo
/* eslint no-restricted-syntax: [2, "FunctionExpression", "WithStatement"] */
me.dontMess();
function doSomething() {};
no-spaced-func
disallow space between function identifier and application (fixable)
関数識別子とアプリケーション（修正可能）の間にスペースを許可しませんa
/*eslint no-spaced-func: 2*/
fn () /*error Unexpected space between function name and paren.*/
fn /*error Unexpected space between function name and paren.*/
()
/////////////////////
//good
/*eslint no-spaced-func: 2*/
fn()
no-ternary
disallow the use of ternary operators
三項演算子の使用を許可しません
/*eslint no-ternary: 2*/
var foo = isBar ? baz : qux; /*error Ternary operator used.*/
foo ? bar() : baz(); /*error Ternary operator used.*/
function quux() {
return foo ? bar : baz; /*error Ternary operator used.*/
}
//////////////////
//good
/*eslint no-ternary: 2*/
var foo;
if (isBar) {
foo = baz;
} else {
foo = qux;
}
if (foo) {
bar();
} else {
baz();
}
function quux() {
if (foo) {
return bar;
} else {
return baz;
}
}
no-trailing-spaces
disallow trailing whitespace at the end of lines (fixable)
行の末尾に空白を末尾に（修正可能）禁止
/*eslint no-trailing-spaces: 2*/
// spaces, tabs and unicode whitespaces
// are not allowed at the end of lines
var foo = 0;//••••• /*error Trailing spaces not allowed.*/
var baz = 5;//•• /*error Trailing spaces not allowed.*/
/////////////////
//good
/*eslint no-trailing-spaces: 2*/
var foo = 0;
var baz = 5;
no-underscore-dangle
disallow dangling underscores in identifiers
識別子にアンダースコアをダングリングすることを禁止
/*eslint no-underscore-dangle: 2*/
var foo_; /*error Unexpected dangling "_" in "foo_".*/
var __proto__ = {}; /*error Unexpected dangling "_" in "__proto__".*/
foo._bar(); /*error Unexpected dangling "_" in "_bar".*/
///////////////////////////
///good
/*eslint no-underscore-dangle: 2*/
var _ = require('underscore');
var obj = _.contains(items, item);
obj.__proto__ = {};
var file = __filename;
no-unneeded-ternary
disallow the use of ternary operators when a simpler alternative exists
単純な選択肢が存在する場合に三元の演算子の使用を許可しません
// Bad
var isYes = answer === 1 ? true : false;
// Good
var isYes = answer === 1;
// Bad
var isNo = answer === 1 ? false : true;
// Good
var isYes = answer !== 1;
object-curly-spacing
require or disallow padding inside curly braces
必要とするか、または中括弧内のパディングを許可しません
/*eslint object-curly-spacing: [2, "never"]*/
var obj = { 'foo': 'bar' }; /*error There should be no space after '{'*/ /*error There should be no space before '}'*/
var obj = {'foo': 'bar' }; /*error There should be no space before '}'*/
var obj = { baz: {'foo': 'qux'}, bar}; /*error There should be no space after '{'*/
var obj = {baz: { 'foo': 'qux'}, bar}; /*error There should be no space after '{'*/
var {x } = y; /*error There should be no space before '}'*/
import { foo } from 'bar'; /*error There should be no space after '{'*/ /*error There should be no space before '}'*/
////////////////////////
///good
/*eslint object-curly-spacing: [2, "never"]*/
var obj = {'foo': 'bar'};
var obj = {'foo': {'bar': 'baz'}, 'qux': 'quxx'};
var obj = {
'foo': 'bar'
};
var obj = {'foo': 'bar'
};
var obj = {
'foo':'bar'};
var obj = {};
var {x} = y;
import {foo} from 'bar';
one-var
require or disallow one variable declaration per function
必要とするか、または機能ごとの変数の宣言を許可しません
/*eslint one-var: [2, "always"]*/
function foo() {
var bar;
var baz; /*error Combine this with the previous 'var' statement.*/
let qux;
let norf; /*error Combine this with the previous 'let' statement.*/
}
function foo(){
const bar = false;
const baz = true; /*error Combine this with the previous 'const' statement.*/
let qux;
let norf; /*error Combine this with the previous 'let' statement.*/
}
function foo() {
var bar;
if (baz) {
var qux = true; /*error Combine this with the previous 'var' statement.*/
}
}
///////////////////
///good
/*eslint one-var: [2, "always"]*/
function foo() {
var bar,
baz;
let qux,
norf;
}
function foo(){
const bar = true,
baz = false;
let qux,
norf;
}
function foo() {
var bar,
qux;
if (baz) {
qux = true;
}
}
function foo(){
let bar;
if (baz) {
let qux;
}
}
operator-assignment
require assignment operator shorthand where possible or prohibit it entirely
可能な場合は代入演算子の省略形を必要とするか、またはそれを完全に禁止します
/*eslint operator-assignment: [2, "always"]*/
x = x + y; /*error Assignment can be replaced with operator assignment.*/
x = y * x; /*error Assignment can be replaced with operator assignment.*/
x[0] = x[0] / y; /*error Assignment can be replaced with operator assignment.*/
x.y = x.y << z; /*error Assignment can be replaced with operator assignment.*/
//////////////////////////
///////good
/*eslint operator-assignment: [2, "always"]*/
x = y;
x += y;
x = y * z;
x = (x * y) * z;
x[0] /= y;
x[foo()] = x[foo()] % 2;
x = y + x; // `+` is not always commutative (e.g. x = "abc")
operator-linebreak
enforce operators to be placed before or after line breaks
改行の後か前に位置させる操作を強制。afterとbeforで違うから詳しくはリン先に行ってね
/*eslint operator-linebreak: [2, "after"]*/
foo = 1
+ /*error Bad line breaking before and after '+'.*/
2;
foo = 1
+ 2; /*error '+' should be placed at the end of the line.*/
foo
= 5; /*error '=' should be placed at the end of the line.*/
if (someCondition
|| otherCondition) { /*error '||' should be placed at the end of the line.*/
}
answer = everything
? 42 /*error '?' should be placed at the end of the line.*/
: foo; /*error ':' should be placed at the end of the line.*/
///////////////////////////////
///good
/*eslint operator-linebreak: [2, "after"]*/
foo = 1 + 2;
foo = 1 +
2;
foo =
5;
if (someCondition ||
otherCondition) {
}
answer = everything ?
42 :
foo;
padded-blocks
enforce padding within blocks
ブロック内のパディングを強制。下記、すかすかだね。
if (a) {
b();
}
quote-props
require quotes around object literal property names
引用符は、周りのリテラルプロパティオブジェクト名に必要とするかどうか。
いろいろあるね。
/*eslint quote-props: [2, "always"]*/
var object = {
foo: "bar", /*error Unquoted property `foo` found.*/
baz: 42, /*error Unquoted property `baz` found.*/
"qux-lorem": true
};
/////////////////////
///good
/*eslint quote-props: [2, "always"]*/
var object1 = {
"foo": "bar",
"baz": 42,
"qux-lorem": true
};
var object2 = {
'foo': 'bar',
'baz': 42,
'qux-lorem': true
};
var object3 = {
foo() {
return;
}
};
quotes
specify whether backticks, double or single quotes should be used (fixable)
ダブルバッククォート、または単一引用符を使用するかどうかを指定します（修正可能）
下記のような３つ方法があるうちどれをどうするかの設定
var double = "double";
var single = 'single';
var backtick = `backtick`; // ES6 only
require-jsdoc
Require JSDoc comment
Docのコメントを要求
/*eslint require-jsdoc: 2*/
function foo() { /*error Missing JSDoc comment.*/
return 10;
}
///////////////////
////////good
/*eslint require-jsdoc: 2*/
/**
* It returns 10
*/
function foo() {
return 10;
}
/**
* It returns 10
*/
var foo = function() {
return 10;
}
var array = [1,2,3];
array.filter(function(item) {
return item > 2;
});
semi-spacing
enforce spacing before and after semicolons
前とセミコロンの後の間隔を強制します
セミコロンの周りにスペースを許可しないか、強制することは、プログラムの可読性を向上させるよ
var a = "b" ;
var c = "d";var e = "f";
semi
require or disallow use of semicolons instead of ASI (fixable)
ASIのセミコロンの使用を許可するか否か
自動でセミコロンが挿入されるASIをどうするかということ
下のはどっちも有効とされる。その設定
var name = "ESLint"
var website = "eslint.org";
sort-vars
sort variables within the same declaration block
同じ宣言ブロック内の変数たちのソート設定っつ！！
大文字、小文字のソート順とかとか
/*eslint sort-vars: 2*/
var b, a; /*error Variables within the same declaration block should be sorted alphabetically*/
var a, B, c; /*error Variables within the same declaration block should be sorted alphabetically*/
var a, A; /*error Variables within the same declaration block should be sorted alphabetically*/
////////////////////////////
///good
/*eslint sort-vars: 2*/
var a, b, c, d;
var _a = 10;
var _b = 20;
var A, a;
var B, a, c;
space-after-keywords
require a space after certain keywords (fixable)
特定のキーワードの後にスペースを必要とします
ifの後のスペースのとこよーくみてーーー
/*eslint space-after-keywords: 2*/
if(a) {} /*error Keyword "if" must be followed by whitespace.*/
if (a) {} else{} /*error Keyword "else" must be followed by whitespace.*/
do{} while (a); /*error Keyword "do" must be followed by whitespace.*/
/*eslint space-after-keywords: [2, "never"]*/
if (a) {} /*error Keyword "if" must not be followed by whitespace.*/
////////////////////////
///good
/*eslint space-after-keywords: 2*/
if (a) {}
if (a) {} else {}
/*eslint space-after-keywords: [2, "never"]*/
if(a) {}
space-before-keywords
require a space before certain keywords (fixable)
特定のキーワードの前にスペースが必要です
/*eslint space-before-keywords: [2, "never"]*/
if (foo) {
// ...
} else {} /*error Unexpected space before keyword "else".*/
do {
}
while (foo) /*error Unexpected space before keyword "while".*/
try {} finally {} /*error Unexpected space before keyword "finally".*/
try {} catch(e) {} /*error Unexpected space before keyword "catch".*/
//////////////////////
///good
/*eslint space-before-keywords: [2, "never"]*/
if (foo) {
// ...
}else {}
do {}while (foo)
try {}finally {}
try{}catch(e) {}
space-before-blocks
require or disallow a space before blocks (fixable)
ブロック前のスペースを許可しないかするか否か
/*eslint space-before-blocks: 2*/
if (a){ /*error Missing space before opening brace.*/
b();
}
if (a) {
b();
} else{ /*error Missing space before opening brace.*/
c();
}
function a(){} /*error Missing space before opening brace.*/
for (;;){ /*error Missing space before opening brace.*/
b();
}
try {} catch(a){} /*error Missing space before opening brace.*/
/////////////////////////
////good
/*eslint space-before-blocks: 2*/
if (a) {
b();
}
function a() {}
for (;;) {
b();
}
try {} catch(a) {}
space-before-function-paren
require or disallow a space before function opening parenthesis
関数の括弧の前にスペースを許可するか必要とするか。どする？？
下のみてね
function withoutSpace(x) {
// ...
}
function withSpace (x) {
// ...
}
var anonymousWithoutSpace = function() {};
var anonymousWithSpace = function () {};
space-in-parens
require or disallow spaces inside parentheses
括弧内のスペースを許可するか必要とするか。どする？？あ、それそこに置いておいて？
foo( 'bar' );
var x = ( 1 + 2 ) * 3;
foo('bar');
var x = (1 + 2) * 3;
space-infix-ops
require spaces around operators (fixable)
演算子の前後にスペースが必要です
/*eslint space-infix-ops: 2*/
a+b /*error Infix operators must be spaced.*/
a+ b /*error Infix operators must be spaced.*/
a +b /*error Infix operators must be spaced.*/
a?b:c /*error Infix operators must be spaced.*/
const a={b:1}; /*error Infix operators must be spaced.*/
var {a=0}=bar; /*error Infix operators must be spaced.*/
function foo(a=0) { } /*error Infix operators must be spaced.*/
////////////////////
///good
/*eslint space-infix-ops: 2*/
a + b
a + b
a ? b : c
const a = {b:1};
var {a = 0} = bar;
function foo(a = 0) { }
space-return-throw-case
require a space after return, throw, and case (fixable)
リターンやスロー、ケースなどのスペースどする？
/*eslint space-return-throw-case: 2*/
throw{a:0} /*error Keyword "throw" must be followed by whitespace.*/
function f(){ return-a; } /*error Keyword "return" must be followed by whitespace.*/
switch(a){ case'a': break; } /*error Keyword "case" must be followed by whitespace.*/
///////////////////////
/////good
/*eslint space-return-throw-case: 2*/
throw {a: 0};
function f(){ return -a; }
switch(a){ case 'a': break; }
space-unary-ops
require or disallow spaces before/after unary operators
単項演算子の後/前にスペースを許可しません、もしくは必要とするかの設定
/*eslint space-unary-ops: 2*/
typeof!foo; /*error Unary word operator "typeof" must be followed by whitespace.*/
void{foo:0}; /*error Unary word operator "void" must be followed by whitespace.*/
new[foo][0]; /*error Unary word operator "new" must be followed by whitespace.*/
delete(foo.bar); /*error Unary word operator "delete" must be followed by whitespace.*/
function *foo() {
yield(0) /*error Unary word operator "yield" must be followed by whitespace.*/
}
++ foo; /*error Unexpected space after unary operator "++".*/
foo --; /*error Unexpected space before unary operator "--".*/
- foo; /*error Unexpected space after unary operator "-".*/
+ "3"; /*error Unexpected space after unary operator "+".*/
////////////////////////
///good
/*eslint space-unary-ops: 2*/
// Word unary operator "delete" is followed by a whitespace.
delete foo.bar;
// Word unary operator "new" is followed by a whitespace.
new Foo;
// Word unary operator "void" is followed by a whitespace.
void 0;
// Unary operator "++" is not followed by whitespace.
++foo;
// Unary operator "--" is not preceeded by whitespace.
foo--;
// Unary operator "-" is not followed by whitespace.
-foo;
// Unary operator "+" is not followed by whitespace.
+"3";
spaced-comment
コメント付近のスペースのあり方についてのスタイル設定です
いろいろありすぎるのでリンク先参照願います。。
wrap-regex
require regex literals to be wrapped in parentheses
括弧内にラップされる正規表現リテラルが必要です
/*eslint wrap-regex: 2*/
function a() {
return /foo/.test("bar"); /*error Wrap the regexp literal in parens to disambiguate the slash.*/
}
/////////////////
//good
/*eslint wrap-regex: 2*/
function a() {
return (/foo/).test("bar");
}
最後に
隣の人がカルボナーラ食べてる。。美味しそう。。
このほかのLintルールはこちら
ESLintのエラールール。日本語ざっくり解説[可能性あるエラー編]
ESLintのエラールール。日本語ざっくり解説[ベストプラクティス編]
ESLintのエラールール。日本語ざっくり解説[ES6編]
があります。
この記事全部書いたら痩せた。絶対
ESLintQiita記事ダイエットあります。