Getting Started を参考に ESLint を使ってみます。 軽く使えればよかったため、 Gulp とかのツールを使わずに、純粋な ESLint を使うことにしました。
環境
- npm 5.6.0
- ESLint v4.18.1
npm の初期設定
最初に npm の初期設定をしました。 npm を使って ESLint をインストールするためです。
$ npm init -y
Wrote to /home/user/dir/package.json:
{
"name": "dir",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
$ ls
package.json
npm の package.json の雛形が作成されました。
ESLint のインストール
ESLint をインストールします。
$ npm install eslint --save-dev
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN ajv-keywords@3.1.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN dir@1.0.0 No description
npm WARN dir@1.0.0 No repository field.
+ eslint@4.18.1
added 139 packages in 17.911s
$ ls
node_modules package.json package-lock.json
node_modules に ESLint がインストールされたみたいです。
ESLint の初期設定
ESLint の初期設定をします。
ESLint をグローバルではなく、ローカルにインストールしたため、 ./node_modules/.bin にコマンドがあるみたいです。
$ ./node_modules/.bin/eslint --init
? How would you like to configure ESLint?
Answer questions about your style
❯ Use a popular style guide
Inspect your JavaScript file(s)
初期設定に関する質問があるようで、矢印キーで選択しました。
最初は Use a popular style guide を選択しました。
$ ./node_modules/.bin/eslint --init
? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow?
Google
Airbnb
❯ Standard
次は Standard を選択しました。
$ ./node_modules/.bin/eslint --init
? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? Standard
? What format do you want your config file to be in? (Use arrow keys)
❯ JavaScript
YAML
JSON
次は JavaScript を選択しました。
$ ./node_modules/.bin/eslint --init
? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? Standard
? What format do you want your config file to be in? JavaScript
Checking peerDependencies of eslint-config-standard@latest
3 つ質問に答えるとインストールが始まりました。
$ ./node_modules/.bin/eslint --init
? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? Standard
? What format do you want your config file to be in? JavaScript
Checking peerDependencies of eslint-config-standard@latest
Installing eslint-config-standard@latest, eslint-plugin-import@>=2.8.0, eslint-plugin-node@>=5.2.1, eslint-plugin-promise@>=3.6.0, eslint-plugin-standard@>=3.0.1
npm WARN ajv-keywords@3.1.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN dir@1.0.0 No description
npm WARN dir@1.0.0 No repository field.
+ eslint-plugin-standard@3.0.1
+ eslint-config-standard@11.0.0
+ eslint-plugin-node@6.0.1
+ eslint-plugin-promise@3.6.0
+ eslint-plugin-import@2.9.0
added 42 packages in 9.986s
Successfully created .eslintrc.js file in /dir/
ESLint の Standard の設定がインストールされたみたいです。
.eslintrc.js が設定ファイルのようです。
.eslintrc.js ファイルの内容を確認してみました。
$ ls -a
. .. .eslintrc.js node_modules package.json package-lock.json
$ cat .eslintrc.js
module.exports = {
"extends": "standard"
};
あっさりしてました。
標準の設定を使うようになっているため個別のルールは記述されていないのかな。
チェック
次のソースファイルをチェックしてみます。
$ ls
node_modules package.json package-lock.json yourfile.js
$ cat yourfile.js
(() => {
console.log('message.');
})();
チェックするには、 eslint コマンドにソースファイルを引数として渡してあげればいいみたいです。
$ ./node_modules/.bin/eslint yourfile.js
/dir/yourfile.js
2:1 error Expected indentation of 2 spaces but found 4 indent
2:28 error Extra semicolon semi
3:5 error Extra semicolon semi
✖ 3 problems (3 errors, 0 warnings)
3 errors, 0 warnings potentially fixable with the `--fix` option.
3 つエラーがありました。 標準ではインデントが 2 つみたいです。 それから、セミコロンはつけないみたいです。
次のようにファイルを修正しました。
$ cat yourfile.js
(() => {
console.log('message.')
})()
チェックしてみます。
$ ./node_modules/.bin/eslint yourfile.js
$
何も表示されなかったので、エラーはなくなったみたいです。
もう少しチェック
スペースの扱いが気になっていたので、次のファイルを作成しました。
(() => {
console.log('message.')
const string1='abc'.substr(0,1) // = の前後のスペース、 , の後ろのスペース
console.log(string1)
const array1=[1,2,3] // [ の後ろのスペース、 ] の前のスペース
console.table(array1)
const object1={'a':1,'b':2,'c':3} // { の後ろのスペース、 : の後ろのスペース、 } の前のスペース
console.table(object1)
object1={
'a2':21,
'b2':22,
'c2':23
}
console.table(object1)
})()
チェックしてみます。
$ ./node_modules/.bin/eslint src/yourfile.js
/home/dir/src/yourfile.js
3:16 error Infix operators must be spaced space-infix-ops
3:31 error A space is required after ',' comma-spacing
5:15 error Infix operators must be spaced space-infix-ops
5:18 error A space is required after ',' comma-spacing
5:20 error A space is required after ',' comma-spacing
7:16 error Infix operators must be spaced space-infix-ops
7:22 error Missing space before value for key 'a' key-spacing
7:23 error A space is required after ',' comma-spacing
7:28 error Missing space before value for key 'b' key-spacing
7:29 error A space is required after ',' comma-spacing
7:34 error Missing space before value for key 'c' key-spacing
9:3 error 'object1' is constant no-const-assign
9:10 error Infix operators must be spaced space-infix-ops
10:10 error Missing space before value for key 'a2' key-spacing
11:10 error Missing space before value for key 'b2' key-spacing
12:10 error Missing space before value for key 'c2' key-spacing
15:5 error Newline required at end of file but not found eol-last
✖ 17 problems (17 errors, 0 warnings)
16 errors, 0 warnings potentially fixable with the `--fix` option.
エラーを修正すると、次のようになりました。
(() => {
console.log('message.')
const string1 = 'abc'.substr(0, 1) // = の前後のスペース必要、 , の後ろのスペース必要
console.log(string1)
const array1 = [1, 2, 3] // [ の後ろのスペース不要、 ] の前のスペース不要
console.table(array1)
const object1 = {'a': 1, 'b': 2, 'c': 3} // { の後ろのスペース不要、 : の後ろのスペース必要、 } の前のスペース不要
console.table(object1)
const object2 = {
'a2': 21,
'b2': 22,
'c2': 23
}
console.table(object2)
})()
チェックしてみます。
$ ./node_modules/.bin/eslint src/yourfile.js
$
何も表示されず、プロンプトに戻ってきたので、エラーはなくなったようです。
配列リテラルの [] のスペースは不要で、普段から記述していた通りでした。
オブジェクトリテラルの {} のスペースも不要で、普段から記述していた通りでした。
が、オブジェクトリテラルについては気になることがあります。
それは、関数を 1 行で記述するときに、 const func = (arg) => { return `arg is ${arg}\` } のように、 { の後ろにスペース、 } の前にスペースを入れて記述していることです。
同じ {} の記号なので、統一したい感じがします。
なので、次のファイルを作成してみました。
(() => {
console.log('message.')
const string1 = 'abc'.substr(0, 1)
console.log(string1)
const array1 = [ 1, 2, 3 ] // ← [ の後ろにスペース、] の前にスペース
console.table(array1)
const object1 = { 'a': 1, 'b': 2, 'c': 3 } // ← { の後ろにスペース、} の前にスペース
console.table(object1)
const object2 = {
'a2': 21,
'b2': 22,
'c2': 23
}
console.table(object2)
})()
チェックしてみます。
$ ./node_modules/.bin/eslint src/yourfile.js
$
何も表示されず、プロンプトに戻ってきたので、エラーはなかったようです。
整理してみます。
配列リテラルは、配列を参照するときに、 array[1] のように記述することから、 const array = ['a', 'b', 'c'] と記述した方が統一感がある気がします。
配列を参照するときに、あまり array[ 1 ] のようにしないですよね？
するのかな？
なので、 [ の後ろにスペースは不要、 ] の前にスペースは不要。
オブジェクトリテラルは、先に書いたように、 1 行の関数の宣言のときに const func = (arg) => { return `arg is ${arg}\` } と記述することから、 const object = { 'a': 1, 'b': 2, 'c': 3 } のように記述した方が統一感がある気がします。
なので、 { の後ろにスペースは必要、 } の前にスペースは必要。
カンマの後ろのスペースなんて気にすることなく、記述できてしまう人もいるようなので、主観的な好みの話でした。
終わり
ESLint を使わないまま作成していた 2,000 行くらいのソースをチェックしたら、 2,000 くらいのエラーが出ました…