ESLint使ってますか？

ESLint を使っていない人、良いコードを書きたいけど何をしたら良いのか分からない人に向けて、ESLint で何ができるかを説明します。

Transcript

1. ESLint 使ってますか? 株式会社coroutine 東川 諒央
2. 自己紹介 1 ルールとか何も考えたくない 3 名前にこだわりたい 4 ESLint とは? 2 5 まとめ
3. 自己紹介 1 株式会社 coroutine 東川 諒央 @biwakonbu 大学教員 ゲームバックエンド フリーランス 経歴 Go Python JavaScript 実績言語 Ruby 技術顧問 エンジニア教育 業務 設計 プログラミング インフラ etc… Rust Haskell TypeScript 学習中言語
4. > ESLint とは？
5. ESLint とは？ 2 > ESLintは、ECMAScript/JavaScriptの コードに見られるパターンを特定し、報告す るためのツールで、コードの一貫性を高 め、バグを回避することを目的としていま す。
6. ESLint とは？ 2 ❏ TypeScript だけでは駄目なの？ ❏ TS は型による論理的な動作保証が仕事 ❏ ESLint はコーディングルールを守れているかを検証するのが仕事 ❏ 良くある使用例 ❏ モジュールの import を制限 ❏ src/A.ts module が src/B.ts module を import できなくするなど ❏ 未使用の変数やモジュールなどを検出 ❏ 命名規則を守らないものを検出 ❏ JS で推奨されない記法の制限 ❏ == を検出し、=== を許可するなど
7. ESLint とは？ 2 ・console.log の制限　 ・シングルクォートの使用を強制　
8. ESLint とは？ 2
9. > ルールとか何も考えたくない
10. ルールとか何も考えたくない 3 ❏ 最初からルールを考えすぎると大変なので、何をやられたくないかを検討 ❏ 例 ❏ 意味なく let を使わないで欲しい (var は絶許) ❏ 代入より前に利用して欲しくない ❏ セミコロンを省略したくない ❏ ケツカンマ問題で悩みたくない (全部にカンマを入れて欲しい) ❏ TypeScript のコードに ESLint を効かせたい ❏ etc, …
11. ルールとか何も考えたくない 3 ❏ 本当に何もしたくないけど PJ に一旦導入したい場合 ❏ “eslint:recommended” を使いましょう ❏ ESLint が推奨する最低限のリントが適応されます ❏ カスタマイズしたい場合は公式ドキュメント参照 ❏ TypeScript でも推奨のリント設定を使いたい場合は下記を使いましょう ❏ “plugin:@typescript-eslint/recommend” ❏ “plugin:@typescript-eslint/recommended-requiring-type-checking” ❏ typescript-eslint という別パッケージを入れる必要があるので注意 ❏ 上記コンフィグも typescript-eslint のドキュメントにて言及されています ❏ 厳格なチェックは recommended を strict に変えて使いましょう ❏ typescript-eslint v6 で設定内容に影響がでる変更がありました ※注意
12. > 名前にこだわりたい
13. 名前にこだわりたい 4 ❏ naming-convention を使う事で色々できます ❏ 変数名は camelCase か UPPER_CASE にしたい ❏ rures に下記を指定 ❏ const 変数は format を camelCase or UPPER_CASE にする
14. 名前にこだわりたい 4 ❏ 変数名は camelCase か UPPER_CASE にしたい ❏ rures に下記を指定 ❏ const 変数は format を camelCase or UPPER_CASE にする
15. 名前にこだわりたい 4 ❏ boolean の変数や関数名に prefix を指定したい ❏ types を指定する事で特定の型での名前を限定できる ❏ prefix を指定する事で特定の名前が頭に付く事を指定できる (suffix もある) ❏ prefix, suffix の際合致する名前がトリミングされるため、 prefix の場合の変数 名は camelCase を指定してても PascalCase にする必要がる
16. 名前にこだわりたい 4 ❏ boolean の変数や関数名に prefix を指定したい ❏ types を指定する事で特定の型での名前を限定できる ❏ prefix を指定する事で特定の名前が頭に付く事を指定できる (suffix もある) ❏ prefix, suffix の際合致する名前がトリミングされるため、 prefix の場合の変数 名は camelCase を指定してても PascalCase にする必要がる
17. まとめ 6 ❏ ESLint を導入する事でプロジェクト全体の品質を維持しやすくなる ❏ コーディングスタイルも非推奨の書き方もなるべく指摘したくない ❏ ただ、リントが強すぎると不便にもなりえるので最初は recommended で ❏ 他で使われている ESLint がまとめられているので参考にすると良いかも ❏ dustinspecker/awesome-eslint とかを見ると情報が沢山まとまってます ❏ textlint という Markdown ファイルの自然言語向けのものもあります ❏ ドキュメント作りの時の用語のブレとかを検出できます ❏ Docuzaurus とかでドキュメントサイトを作る際に便利 ❏ eslint の plugin で色々やれそうなのでちょっと自分でも作ってみたさがありました ❏ 開発する時に使っていい用語集とか欲しいですね ❏ 標準のものでもある程度は頑張れそうですが、個人的にはちょっと不足かな ...
18. おわり
19. P.S. エンジニアのための学習・交流を行うコミュニティスペースを作ります 未経験者・学生・社会人・フリーランス歓迎、プログラミング等は教えます 色々なご相談にも対応します ・就活・キャリアアップ相談 ・業務に関する相談 ・個人的な学習の相談 大阪でのエンジニアコミュニティを応援します ・勉強会場として無料で場所貸し ・むしろ開催応援のギフト券なども考えています ・長く続く開発者コミュニティ作りを実行します