TypeScript React で ref を使ったタイマーを使った処理を書いていて予期しない ESLint のエラーが出たのでメモ ESLint no-unused-expressions error が発生 const timerRef = useRef<number | null>(null); // … timerRef.current && clearTimeout(timerRef.current); // =</number>…

1. Next.js はデフォルトでは TypeScript のエラーが `npm run lint` では表示されない 2. ミニマムな TypeScript のエラーを表示させるには `@typescript-eslint/eslint-plugin` をインストールして `.eslintrc.json` にルールを追加する 3. 使用するルール…

チーム開発してる Next.js のプロジェクトで ページのコンポーネントの型を PageComponent: NextPage<PagePropsType> = ({ property }) => {} と書くと 'property' is missing in props というエラーが表示されると報告があり調べてたメモ 環境 Next.js 13.2.1 eslint ^8.34</pagepropstype>…

Vite + TypeScript + ESLint で作った環境で Multi-Page App の設定をしようとした際に __direname がエラーになってしまったのでメモ TypeScript Cannot find name '__dirname' Cannot find name '__dirname' のエラーが出る場合は Node の型が無いので @ty…

前回までのあらすじ。Vite で React (TypeScript) のプロジェクトを作ってパスエイリアスの設定をいい感じにしました 今回はいつもの ESLint と Prettier を導入します。結論から言えば VIte だからという事は特になく、`create-react-app` で作成したプロジ…

毎回 ESLint と Prettier の設定書いて、パスエイリアスの設定して、なんやかんや設定して…とメンドーなので create-react-app --template typescript ベースでゆるゆるな自分用ボイラーテンプレート作りました。 ボイラーテンプレート やったこと ESLint は…

eslint-plugin-unused-imports と eslint-plugin-import プラグインを使うといい感じにできる

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

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

新規に作ろうとして環境作るまでに盛大にハマったのでメモ 環境 "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…

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

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

自動整形してるののメモ 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…

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…

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

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

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