Next.js +TypeScriptで環境構築！ESLint + Prettierの導入から解析自動化までやってみた
はじめに こんばんは、バックエンドエンジニア見習い1年目のkuraoです！ 「Next.js+TypeScript」でアプリケーション環境を構築する機会があり、その際リンターツール導入の手順などと併せてドキュメントとしてまとめていたので、アウトプットを兼ねてこの場に書き連ねて行こうと思います！ 実現したい事 今回のアプリケーション環境構築で目指す所としては以下です。 Next.js環境のアプリを構築 Next.js環境のアプリにTypeScriptを導入 ESLint + Prettier を導入して、コードの一貫性を高め、かつバグ回避を行う husky + lint-staged を導入して、ESlintとPrettierによるコード解析を自動化する 前提 nodeがインストールしてある事（ver. 14.15.4） yarnパッケージがインストールしてある事（ver. 1.22.4）
ESLint, Prettier, VS Code, npm scripts の設定: 2021春
eslint-plugin-prettier 時代の設定をずっと使っていたので、重い腰を上げてアップデートした作業メモ。 背景 Prettier 公式ドキュメントによれば、現在 eslint-plugin-prettier は以下の問題があるとして推奨していない。 エディタが真っ赤になる（人間が気にする必要のない問題なのに！） 直接実行するより遅い（同様に prettier-eslint も遅い） ESLint と Prettier の間に間接レイヤーを追加するので、壊れやすい なるほど正しい。 一方、別々に実行することで以下のような問題も出てくるので、解決していく。 CLI とエディタを個別に設定する必要がある エディタで ESLint と Prettier の協調動作が必要 CLI (npm scripts) で ESLint と Prettier の対象ファイルが別管理になる 上記の
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
