コマンド
1 |
npx eslint --init |
ESlintをどのように使いますか?(How would you like to use ESLint?)
1 2 3 |
To check syntax only(構文チェックのみ) To check syntax and find problems(構文チェックと問題の探索) To check syntax, find problems, and enforce code style(構文チェックと問題の探索と、コードスタイルの適用) |
特に、なければ「To check syntax, find problems, and enforce code style」を選んでおけば良いでしょう。
プロジェクトで使っているモジュールの管理方法は?(What type of modules does your project use?)
1 2 3 |
JavaScript modules (import/export) CommonJS (require/exports) None of these |
Reactを使う場合は「JavaScript modules (import/export)」を選んでおけば良いでしょう。Node.js環境とかであれば、「CommonJS (require/exports)」になるでしょう。
どのフレームワークを使ってるか(Which framework does your project use?)
1 2 3 |
React Vue.js None of these |
普通に選びましょう。
TypeScriptを使ってるか?(Does your project use TypeScript? › No / Yes)
使っている場合は「Yes」で問題ないです。
コードの実行環境は?(Where does your code run?)
1 2 |
Browser Node |
Reactであれば、ブラウザなのでBrowserを選んでおけば良いでしょう。
プロジェクトで使うスタイルはどのように定義しますか?(How would you like to define a style for your project?)
1 2 3 |
Use a popular style guide(人気のスタイルガイド) Answer questions about your style(自分で決める) Inspect your JavaScript file(s) |
無難に「Use a popular style guide」を選んでおけば良いでしょう。
どのスタイルガイドを使いますか?(Which style guide do you want to follow?)
1 2 3 4 |
Airbnb: https://github.com/airbnb/javascript Standard: https://github.com/standard/standard Google: https://github.com/google/eslint-config-google XO: https://github.com/xojs/eslint-config-xo |
現状、一番人気なのは「Airbnb」でしょう。
設定ファイルをどの形式で作成するか?(What format do you want your config file to be in?)
1 2 3 |
JavaScript YAML JSON |
無難にJSONなどを選んでおけば良いでしょう。
すぐパッケージをインストールしますか?(Would you like to install them now with npm?)
はいを選ぶと以下のパッケージとeslintの設定ファイル(.eslintrc.json)が生成されます。
パッケージ
1 2 3 4 5 6 7 8 |
eslint-plugin-react @typescript-eslint/eslint-plugin eslint-config-airbnb eslint eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react-hooks @typescript-eslint/parser |
設定後
Strings must use singlequote.(quotes)
シングルコーテーションでないとエラーになる。pretterの整形の邪魔になるので解除しておきましょう。
1 |
"quotes": "off" |
JSX not allowed in files with extension
拡張子系エラーが出た。ので以下のルールを追加する。
1 |
"react/jsx-filename-extension": [1, { "extensions": [".ts", ".tsx"] }] |
その他
普通に実装するとこの辺のエラーに引っかかったので以下のような設定にしておいた方が良さそう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
"rules": { "quotes": "off", "react/jsx-filename-extension": [1, { "extensions": [".ts", ".tsx"] }], "react/function-component-definition": [ 2, { "namedComponents": "arrow-function", "unnamedComponents": "arrow-function" } ], "import/no-unresolved": "off", "import/extensions": [".js", ".jsx", ".json", ".ts", ".tsx"], "trailing-comma": [ true, { "singleline": "never", "multiline": { "objects": "always", "arrays": "always", "functions": "never", "typeLiterals": "ignore" } } ] } |
この記事へのコメントはありません。