ESLint を使ってみました

広告

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 くらいのエラーが出ました…

参考

広告
広告