Zenn
📜

npx eslint --init 解説

2021/07/08に公開
ESLint
tech

Next.js を使用する私には ver.11.0.0 になった今、あえて npx eslint --init を実行することはなくなりそうですが、たまたま調査したので以下、 npx eslint --init 勉強がてら個人的な実行時の解説文を掲載します

ターミナルで以下のコマンドを入力し、設定ファイルを作成します

npx eslint --init



上記を実行すると以下の文が表示されるので初心者の私は一番シンプルな syntax only を選択

? How would you like to use ESLint? … 
❯ To check syntax only
  To check syntax and find problems
  To check syntax, find problems, and enforce code style

上記和訳は以下の通り
(以下、原文→和訳文の並びで表示)

ESLintをどのように使用しますか？
… ❯構文のみを確認する
構文をチェックして問題を見つける
構文をチェックし、問題を見つけ、コードスタイルを適用するには



次は私の好みで JavaScriptを選択

? What type of modules does your project use? … 
❯ JavaScript modules (import/export)
CommonJS (require/exports)
None of these

？プロジェクトではどのタイプのモジュールを使用していますか？
… ❯JavaScriptモジュール（インポート/エクスポート）
CommonJS（必須/エクスポート）
どれでもない


上記選択後の表示

✔ What type of modules does your project use? · esm

Q: ところで私が選んだのは JavaScript modulesだが esm ってなんだ？
A: どうやら ECMAScript Modules の略のようです
A: ECMAScript は JavaScript の規格です

? Which framework does your project use? … 
❯ React
  Vue.js
  None of these

？プロジェクトで使用しているフレームワークはどれですか？
… ❯React
Vue.js
どれでもない

今回は React を使用します

✔ Does your project use TypeScript? · No / Yes

プロジェクトはTypeScriptを使用していますか？ いいえ

私はまだ TypeScript を使いこなせないので今回は No

? Where does your code run? 
…  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
✔ Node

コードはどこで実行されますか？
…（ <space> を押して選択、
<a> を押してすべてを切り替え、 <i> を押して選択を反転します）
✔ブラウザ
✔ノード

今回は JavaScript を Browser で使用します

? What format do you want your config file to be in? … 
❯ JavaScript
  YAML
  JSON

設定ファイルをどの形式にしますか？
… ❯JavaScript
YAML
JSON

私の好みで JavaScript
理由は

  • 使い慣れている
  • コメントの記入ができる
  • コメントアウトの切り替えが容易にできて、ルール有無の違いを試しやすい


The config that you've selected requires the following dependencies:

eslint-plugin-react@latest
? Would you like to install them now with npm? › No / Yes

選択した構成には、次の依存関係が必要です。
eslint-plugin-react の最新バージョンを今すぐ npm でインストールしますか?



Yes を選択すると .eslintrc.js 内に "eslint-plugin-react" や他のルールが追加されます

rules の記述方法

  • 例えば'pageProps' is missing in props validationeslint (react/prop-types) というエラー文が表示された場合、() で囲われた (react/prop-types) がルール内容となります
  • エラーにするかどうかは以下の３段階で指定できるます(数字でも指定可能)
    error エラーとして検出 (2)
    warn 警告 (1)
    off エラーの無効化 (0)
  • 第二引数でオプションを指定できます
    例) always 常に
  • オプションが必要ない場合は配列として記入する必要はない
rules: {
"ルール内容": ["エラーにするかどうか","オプション"],
  },

Discussion