コマンド
|
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" } } ] } |
この記事へのコメントはありません。