k01ken’s b10g

He110 W0r1d!

ESLintを使ってJavaScriptのコードをチェックする

開発環境は、Windows 10 Pro(64bit)。

node.jsを事前にインストールしていることが前提条件です。

ESLintは、JavaScriptのための静的検証ツールです。

1.ディレクトリを作成し、カレントディレクトリを移動する

cd c:\ && mkdir eslint_test && cd eslint_test

2.以下のコマンドを入力し、ESLintをインストールする

npm install -g eslint

3.以下のコマンドを入力し、きちんとインストールされているかチェックする

eslint -v

4.検証用のコードを書き、test.jsで保存します。

function hello(name){
  document.body.testContent = "Hello ," + nama + "!";
}

hello("World");

5.以下のコマンドを入力し、.eslintrc.jsonを作成する

copy nul .eslintrc.json

6. .eslintrc.jsonに中身を入れる

{
  "extends": ["eslint:recommended"],
  "plugins": [],
  "parserOptions": {},
  "env": {"browser": true},
  "globals": {},
  "rules": {}
}

7.以下のコマンドを入力し、ESLintを起動する

eslint test.js

チェック結果
f:id:k01ken:20200111223929p:plain


テキストエディタVisual Studio Codeを使っているんですが、拡張プラグインのESLintをインストールしておくと、JavaScriptのファイルを変更した場合、リアルタイムで検証して、おかしい場合は、波線で知らせてくれるので便利です。
f:id:k01ken:20200111224700p:plain

参考リンク
ESLint 最初の一歩 - Qiita