かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

ESLint

React create-react-app したプロジェクトで paths のエイリアス使おうとして盛大にハマったメモ

create-react-app で作った TypeScript の React アプリで Next.js でやって便利だと感じたパスのエイリアス設定しようとして盛大にハマったのでメモ。 ゴール create-react-app --template teypescript で作った TypeScript の React アプリで /src ディレ…

Next.js TypeScript + ESLint + Prettier の環境を作るのだ!

何回も作るのに都度調べるのめんどくなってきたからメモ Next.js のプロジェクトを作る 今いるディレクトリにプロジェクトを作る $ npx create-next-app --use-npm . --use-npm オプションつけないと npm が無いって怒られる。忘れがち… TypeScript 化 $ npm…

TypeScrip + ESLint + Prettier + Jest のプロジェクト設定にハマる

新規に作ろうとして環境作るまでに盛大にハマったのでメモ 環境 "typescript": "^4.3.5" "eslint": "^7.30.0", "prettier": "^2.3.2", "jest": "^27.0.6", 最終的にできたもの TL:DR; TypeScript + ESLint+ Prettier の環境を作る TypeScript $ npm i --save…

React 条件分岐のある箇所で Hooks を使うとエラーになる

Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement. というエラーに出会ったのでメモ。 環境 React ^17.0.1 エラーが発生した経緯 ロード中と完了後に別のコンポーネントを表示したいとか、…

React v17 create-react-app で作ったアプリで ESLint に怒られまくった

npx create-react-app で React のアプリを作ったら v17 系になっていました。 今までのプロジェクトで使っていた ESLint の設定を持ってきたらエラーになる部分があったのでメモ react 17.0.1 react-scripts 4.0.1 eslint 7.14.0 eslint-plugin-react 7.21.…

VS Code ESLint 拡張が Parsing error: Cannot read file エラー config ファイルが読み込めない問題にハマる

VS Code に入れてある ESLint 拡張が TypeScript ファイルの一行目で次のようなエラーを出てしまうことがありました。 Parsing error: Cannot read file '/users/kikiki/MyApp/tsconfig.json'.eslint tsconfig.json が第一階層にないとこのエラーが出るっぽ…

ESLint + Prettier で JavaScript と CSS を自動フォーマットするぞ

自動整形してるののメモ ESLint install $ yarn add -D eslint eslint: ^7.1.0 generate config file 対話式で設定ファイル .eslintrc.js を作成できる $ yarn eslint --init ? How would you like to use ESLint? ❯ To check syntax and find problems ? Wh…

ESlint module.exports が no-undef なエラーになるとき

react-scripts で作成したプロジェクトで init で下記のようなオプションを選択して .eslintrc.js を作成しました。 $ yarn eslint --init ? How would you like to use ESLint? To check syntax and find problems ? What type of modules does your projec…

npm script ESlint で No files matching the pattern なエラーにハマる。

React のプロジェクトに ESlint + Prettier でフォーマットする仕組みを入れたのですが、npm script で lint を走らせようとしたら、パターンマッチしないというエラーが出て少しハマったのでメモ 問題の npm script // package.json "scripts": { "lint": "…

ESlint acyncとFetchAPIがエラーになる

簡単なESlintの設定で試してたら、acyncとfetchでエラーにったのでメモ .eslintrc { "root": true, "extends": [ "eslint:recommended" ], "env": { "es6": true, "node": true, "commonjs": true }, "parserOptions": { "sourceType": "module" }, "rules":…

Mac Sublime Text 3 ESLint 導入メモ

ESLintをグローバルにインストール $ npm install -g eslint Sublime TextにSublimeLinterパッケージをインストール Sublime Textを起動しPackage Control(⌘+shift+P)を起動 Installと入力しInstall Packageを選択 SublimeLinterと入力しEnterを押してインス…