Closed2

eslintの導入手順

スジ彫りのマサスジ彫りのマサ

1.package.jsonファイルは作っておく。
(無い場合npm initで作成可能)

2.ローカルでeslintをインストールする場合
(versionを指定してインストールしたい場合eslint@version(数値))

npm install --save-dev eslint

3.eslintの設定ファイルを作成する
(rulesに記述して色々ルールを追加できる)

.eslintrc.json
{
    "extends": ["eslint:recommended"],
    "plugins": [],
    "parserOptions": {},
    "env": {"browser": true},
    "globals": {},
    "rules": {
        "indent": ["error", 2]  // rule名:[]でオプション設定
    }
}

4.npmコマンドとして設定して楽にデバック
(npm run lint or lint:fix でコードチェック or 自動整形ができる)

package.json
  "scripts": {
    "lint": "eslint src", // srcの部分は適用したいディレクトリやファイルを指定
    "lint:fix": "eslint src --fix",
  },

もう少し深い設定はこちらで必要になったら勉強する(pluginsの使い方など)
https://zenn.dev/januswel/articles/402774d76424e71ac906

スジ彫りのマサスジ彫りのマサ

余談というか今後の学習の兆し

4.のような作業タスクを自動で処理してくれる機能をタスクランナーというらしい・・
タスクランナーとしてgulpとかの名前をよく聞くけど、npmにもそういった機能があることを知る・・
https://gulpjs.com/

gulp->npm-scripts
https://naokeyzmt.com/rogue/npm-scripts-nogulp/
npmは基本的には1つずつしか処理を実行できないため、複数の処理を同時に実行させるにはnpm-run-allモジュールを追加する必要がある

このスクラップは2022/04/19にクローズされました