👋

VSCodeでESLintを使いましょう

2022/07/18に公開

インストール

ESLintをインストールします

sudo npm install -g eslint

eslint --versionでインストール成功しているかを確認します

そして、設定ファイルを作ります
フォルダ内に.eslintrcというファイルを作ります
そして、以下のように書きます

.eslintrc
{
	"env": {
		"es6": false,
		"browser": true,
		"node": true,
		"jquery": false
	}
}

次はJavaScriptファイルを書きましょう
bad-code.jsというファイルを作り、以下のようにエラー入りのコードを書きましょう
設定はES6を使用することを禁止させるので、敢えてES6を書きましょう

base-code.js
const [a, b] = [123, 1234];

コマンド検査の使い方

以下のコマンドをRun

eslint bad-code.js

予想通り以下のメッセージが出ました

error  Parsing error: The keyword 'const' is reserved

ちなみに全てのJSファイルを検査するには以下のコマンドです

eslint *.js

セーブしてすぐにESLint検査

プラグインを使って、セーブすると自動的に検査しましょう

まずは「ESLint」というプラグインをインストールします

プラグインをインストール後、bad-code.jsというファイル名は赤になりました

マウスをconstの部分に触ると、エラーメッセージが出ました

ターミナルの「Problems」というタブにもエラーメッセージが出ました

注意

npm eslintが存在してない、ただ直接にVSCodeプラグイン「ESLint」を使う場合は
コードの検査が不具合になる状況が多いです

なのでnpmのeslintは削除せずにおきましょう

コードの修正

修正は二つの方法はあります

VSCodeの修正

VSCodeの下方の青いアイコンをクリック、「Fix this no-var problem」をクリックします

コマンドでの修正

ターミナルに以下のコマンドをRun

eslint bad-code.js --fix

Discussion