Chiroru's Diary

日々の学びをちょこちょこメモしていきます

ESLintのインストール(+VSCodeにESLintのプラグイン導入)

JavaScript

ESLintをJavaScript Standard Styleで利用+VSCodeにプラグイン導入したかったのですが、思ったより手間取ってしまったのでまとめておきます！

【目次】

ESLintとは

JSの静的検証ツールです。コードのバグや、コロン・スペースなどのスタイルをルールに従って検証します。

VSCodeのプラグインを導入

事前にこちらを導入しておきます。

marketplace.visualstudio.com

参考：VS CodeにESLintを設定する

インストール方法

package.json作成

まず$ npm initでpackage.jsonを作成します。
質問がいくつかされますが、ここはenterでOK。

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (eslint_test) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /Users/name/xxx/eslint_test/package.json:


// package.json↓
{
  "name": "eslint_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)

パッケージインストール

$ npm install eslint --save-devでESLintパッケージをインストールします。

$ npm install eslint --save-dev
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN eslint_test@1.0.0 No description
npm WARN eslint_test@1.0.0 No repository field.

+ eslint@7.8.1
…


// インストール確認
$ npm list --depth=0 
eslint_test@1.0.0 /Users/name/xxx/eslint_test
└── eslint@7.8.1

この時--save-dev(-D)オプションをつけて実行することで、開発時のみ使用することを示すpackage.json の「devDependencies 一覧」に追加されます。

 // package.json
{
  "name": "eslint_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "eslint": "^7.8.1"
  }
}

また、パッケージをインストールするとnode_modules というディレクトリが自動的生成され、その中にパッケージに関連するファイルが格納されます。

.eslintrc.json作成

$ npx eslint --initで.eslintrc.jsonを作成します。
質問への回答はプロジェクト内容により異なりますが、今回は以下のようにしました。

ルールはJavaScript Standard Styleになります。

f:id:chiroru_memo:20200904135723p:plain

また「Would you like to install them now with npm? · No / Yes」をYesにすると以下の必要なファイルをその場でダウンロードすることができます。

(私はこの必要なファイルのインストールを行わなかったため、最初eslintコマンドが実行できませんでした・・)

✔ Would you like to install them now with npm? · No / Yes
Installing eslint-config-standard@latest, eslint@>=6.2.2, eslint-plugin-import@>=2.18.0, eslint-plugin-node@>=9.1.0, eslint-plugin-promise@>=4.2.1, eslint-plugin-standard@>=4.0.0
npm WARN eslint_test@1.0.0 No description
npm WARN eslint_test@1.0.0 No repository field.

+ eslint-config-standard@14.1.1
+ eslint-plugin-promise@4.2.1
+ eslint-plugin-node@11.1.0
+ eslint-plugin-import@2.22.0
+ eslint-plugin-standard@4.0.1
+ eslint@7.8.1
added 68 packages from 48 contributors, updated 1 package and audited 177 packages in 5.667s

実行する

$ npx eslint ファイル名で実行し、$ npx eslint ファイル名 --fixで自動修正してくれます。

f:id:chiroru_memo:20200904141757p:plain

上記のファイルを実行した結果です↓

$ npx eslint test.js

/Users/name/xxx/eslint_test/test.js
  1:13  error  'aaa' is not defined  no-undef
  1:17  error  Extra semicolon       semi

✖ 2 problems (2 errors, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

$ npx eslint test.js --fix

/Users/name/xxx/eslint_test/test.js
  1:13  error  'aaa' is not defined  no-undef

✖ 1 problem (1 error, 0 warnings)

以上になります！

参考