2026年6月18日木曜日

ESLintを入れてみた話

タイトル通りです。デフォルトのハイライト機能というか未使用変数判定が出なくなって対処方法を探ったけど結局見つからず、なんかもっとちゃんとしたものがあると言う事で入れる事に。
Microsoft製なので最低限怪しい拡張機能のバグを踏むこともないかなと。

ESLintを入れよう

最初はただの便利なハイライト機能なのかと思ったらそういうモノではない。
node.jsがなんのライブラリなのかと思うくらい違う話。

インストールだけなら簡単いつも通り左の検索から拡張機能を選択してインストールするだけ。
ただし、そのままでは使えない。設定ファイルなどを作らなければならない。
まずは「Ctrl＋@」で画面下にconsoleを出す。
実行カレントは作ってるコードの親あたり。実際の作業場所は1つ深く掘ってた方が良いかも。

「npm init @eslint/config」を実行

『pm : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Program Files\nodejs\npm.ps1 を読み込むことができません。詳細については、「about_Execution_Policies」(https://go.microsoft.com/fwlink/?LinkID=135170

) を参照してください。

発生場所行:1 文字:1

+ npm init @eslint/config

+ ~~~

+ CategoryInfo : セキュリティエラー: (: ) []、PSSecurityException

+ FullyQualifiedErrorId : UnauthorizedAccess』

はい。ダメです！
単純にセキュリティで弾いてくれていますね。
「PS＞」と表示されてる通りパワーシェルは許可しないと実行権限がありません。
なので一時的に緩和します。

Set-ExecutionPolicy RemoteSigned -Scope Process

コマンド	意味
Set-ExecutionPolicy	PowerShellのスクリプト実行制限（ポリシー）を変更する
RemoteSigned	ローカルのファイルは許可、ネットからのファイルは署名を必須にする
-Scope	変更する「有効範囲（スコープ）」を指定する宣言
Process	「今開いているこのターミナルの画面（プロセス）だけ」を対象にする

こんな感じ。そして先ほどのコマンド「npm init @eslint/config」を実行。

ここから英語で質問が続きます。

「@eslint/create-config というツールをダウンロードして実行してもいいですか？」

『Node.js v22.14.0

npm error code 7

npm error path C:\alldata\website\bsc

npm error command failed

npm error command C:\WINDOWS\system32\cmd.exe /d /s /c create-config

npm error A complete log of this run can be found in: C:\Users\master\AppData\Local\npm-cache\_logs\2026-06-18T04_08_33_535Z-debug-0.log』

詰まる所「package.json ファイルがないため、ESLintを初期化できません」

であるならば「npm init -y」を実行

三度目のなんとやら「npm init @eslint/config」を実行

やっと質問に入れました。
↑↓キーで選択するだけです。スペースキーを押すと選択肢を追加可能。

「ESLintをどのように使いたいか？」
「To check syntax and find problems」（構文チェックと問題の検出を行う）

プロジェクトで使用しているJavaScriptの「モジュールシステム」
・「JavaScript modules (import/export)」
・「CommonJS (require/exports)」
記載されている通りですがjs内で(import/export)を使ってるなら上、古いjsしかなくrequireがあるなら下だと思いますが、基本的には上で良いと思います。