進めてる(進めていく)教材とか

• HypertextCandy React入門チュートリアル 完了
• りあクト！ TypeScriptで始めるつらくないReact開発 5/13 完了
• Udemy フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門 完了
• Udemy React Hooks 入門 - Hooksと Redux を組み合わせて最新のフロントエンド状態管理手法を習得しよう！ 完了
• React 公式チュートリアル 完了

今日やったこと

• りあクト！ TypeScriptで始めるつらくないReact開発 第6章 Linterとフォーマッタでコード美人に

りあクト！ TypeScriptで始めるつらくないReact開発 第6章 Linterとフォーマッタでコード美人に

ざっくりサマリー

ESLint

• linter とはコードを静的解析してコンパイルではじかれない潜在的なバグを警告するもの

• コードフォーマッタはインデントや改行などのスタイルを一律に自動整形してくれるもの

• チーム開発するなら必須ですね

• JSLint

  • JSとはこうあるべきという理念の強いルール
  • ルールの適用をON-OFFできない

• ESLint

  • 開発動機 → 開発者が独自のlintルールを作れるようにすること
• linterにも歴史があるんだなー
• どんどんESLintが飲み込んでってESLint一強

• lintingあってはじめてJSは言語として完成される

  • モダン開発にはlintingは必須

• ESLint本体を除くエコシステムパッケージは大きく3つに分類される

  • パーサ(Parser)

  • ソースコードを特定の言語仕様に沿って解析してくれるライブラリ

  • プラグイン(Plugin)

  • ESLintの組み込みルール以外に独自のルールを追加するもの

  • 共有設定(Shareable Config)

  • 複数のルールの適用をまとめてせっていするもの

• yarn eslint --initでインタラクティブにESLint設定ファイルの雛形を作成できる

• ESLintの適用ルールをカスタマイズする

  • .eslintrc.jsを編集する
  • 共有設定とプラグインを主に設定していく
  • プラグインに記述しただけではルールは適用されない
  • 共有設定に書かれたものが適用される
  • 設定ルールが衝突したときは記述順が後のほうが勝つ
  • 記述順は勝手に変えてはいけない
  • 新しくプラグイン,拡張ルールセットを入れるときは最低限npmのページを確認しておく
  • rules
  • 書くルールの適用の可否,エラーレベルを設定する
  • 主にextendsで読み込んだ共有設定の値を書き換えるときに使う
• 公式ドキュメントにルール一覧がある
• VSCodeでコーディング中にもESLintが走る設定にしておくといい

• ESLintのチェックを無効化する → eslint-disable {ルール名}

  • ルール名をかかなければすべてのルールが無効化される

まとめ

早速アウトプットしていこうと思ったけど,LinterとPretterあとから入れるのは大変そうだから先に概要だけでも掴んでおこうと結局インプットしているという。。。
アウトプットも平行して進めるよ。。。多分w

それではまた明日。