NodeCGでスポーツコーダ#4:環境構築(ESLintの設定)

[重要]今回の設定は難しいので、飛ばしても問題ありません

概要

NodeCGを使ってスポーツコーダが作れるか検証していきます。
今回はESLintを設定して、エラー箇所を素早く発見します。
また、前回導入したPrettierとESLintは機能が一部競合するのでエラーが起きないようにします。

ESLintとは

ESLintは、JavaScriptやTypeScriptのコードを静的解析してエラーやコードスタイルの問題を検出し、修正を提案してくれるツールです。端的にいうと「コードをチェックして間違いや汚い部分を教えてくれる賢い先生」です。
ただし、コード整形はPrettierで行うのでESLintはコードのチェックに専念してもらうように設定します。

ESLintのインストール

ESLint公式サイトに従いインストールを行います。
VSCodeでルートフォルダに移動してターミナルで下記コマンドを実行します

npm init @eslint/config@latest

実行すると設定値を訪ねてくるので答えます。
ポイントはWhere does your code runで"browser"と"node"の両方を選びます
また、Would you like to install them nowは"Yes"を選びインストールします

- How would you like to use ESLint? · problems
- What type of modules does your project use? · esm
- Which framework does your project use? · none
- Does your project use TypeScript? · javascript
- Where does your code run? · browser, node
The config that you've selected requires the following dependencies:
eslint, globals, @eslint/js
- Would you like to install them now? · No / Yes
- Which package manager do you want to use? · npm

ルートフォルダにeslint.config.mjsが作成されたことを確認します

ESLintとPrettierが競合しないようにする(eslint-config-prettier)

ESLintもPrettier同様にフォーマッター機能を持っています。
ただ、Prettierのほうが高機能なのでESLintのフォーマッター機能を無効にします。
無効にする方法はnpmパッケージeslint-config-prettierをインストールした後にESLintの設定を編集します

npm install -D eslint-config-prettier

ESLint設定をする(eslint.config.mjs)

デフォルトのESLintのエラーチェックで十分ですが、NodeCGを使うにあたりエラーと認識される箇所があるので設定ファイルを修正します。

ルートフォルダのeslint.config.mjsを開き編集します。
ここでは、初期設定の他に変数が宣言されたが使われていない箇所に警告を出すようにします(デフォルトではエラー)

なお、追加した行がわかるように// 追加と入れています。コピペするときはコメントを削除してください。

[重要]ESLint設定ファイルは、バージョン9以降書き方が変わりました。Webサイトの検索では旧設定方法が表示されることもあるのでご留意ください。

eslint.config.mjs

import globals from 'globals'
import pluginJs from '@eslint/js'
import eslintConfigPrettier from 'eslint-config-prettier' // 追加

/** @type {import('eslint').Linter.Config[]} */
export default[
  pluginJs.configs.recommended,  // 下から移動
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node,
        nodecg: 'readonly',  // 追加
      },
    },
    // rulesを追加(下3行)
    rules: {
        'no-unused-vars': 'warn',  // 未使用の変数をエラーから警告に変更
    },
  },
  eslintConfigPrettier,  // 追加
]

動作確認

各ファイルにエラー表示がないことを確認してください。
また、jsファイルなどで、わざと文法エラーをして赤い波線が表示されるか確認してください。

留意点や感想など

• ESLintでver9以上になると設定ファイルの書き方が従来と異なりますが、初めのころは全く知らなくて設定方法に四苦八苦しました。新しいことはドキュメントがないので新参者にとっては高いハードルでした。といっても、この設定が正しいか自信がないので検証を進めながら知見を増やしていきます。
• NodeCGをインストールするとPrettier, ESLint, eslint-config-prettierは同時にインストールされるようです。ただ、設定ファイルがないので作る必要があります。少し怖いので私は再インストールするようにしています。