eslint-flat-config

ESLint Flat Configで誰もが簡単に Lintを設定できる時代へ。
新しいESLintの設定方法、ESLint Flat Configを紹介します。

Transcript

1. ESLint Flat Configで
   誰もが簡単に
   Lintを設定できる時代へ🥳
   2023/04/01 CREATED BY t-keshi
   

   View Slide

2. t-keshi
   Web / TypeScript / React / Kotlin
   http://zenn.dev/t_keshi
   

   View Slide

3. 本日はESLint Flat Configの話
   

   View Slide

4. View Slide

5. - デフォルトでsourceTypeがesmoduleになった
   - デフォルトで.mjsや.cjsも対象とするようになった
   - ecmaVersionの指定が"latest"になった
   - extendsプロパティが無くなった
   などなど。
   ☞ キャッチアップする
   

   View Slide

6. 　　　　　　　　　　　 ／）

   　　　　　　　　　　　／／／）

   　　　　　　　　　 ／,.=ﾞ''"／　　　

   　　　／　　　　 i f　,.r='"-‐'つ＿＿＿_こまけぇこたぁいいんだよ！！

   　　/　　　　　 /　　　_,.-‐'~／⌒　　⌒＼

   　　　　／　 　,i　　　,二ﾆ⊃（ ●）.　（●）＼

   　　　/　 　　ﾉ　　　 ilﾞフ::::::⌒（__人__）⌒::::: ＼

   　　　　　　,ｲ｢ﾄ､　　,!,!|　　　　　|r┬-|　　　　　|

   　　　　　/　iﾄヾヽ_/ｨ"＼ 　　 　 `ー'´ 　 　 ／
   ひとことでまとめると、、
   

   View Slide

7. 誰でも簡単にLintの設定が
   書けるようになった
   

   View Slide

8. そ
   れ
   っ
   て
   最
   高
   じ
   ゃ
   な
   い
   で
   す
   か
   最高である！！！
   

   View Slide

9. 駆け足で振り返るLintの歴史
   

   View Slide

10. Q.以下のconsole.logの出力は？
    console.log(isNaN(true));
    TRUE FALSE
    

    View Slide

11. 最
    高
    じ
    ゃ
    な
    い
    で
    す
    か
    ありがとうLint！！！
    

    View Slide

12. ブラウザで動く(ほぼ)唯一のプログラミング言語
    ⇨ 後方互換性を捨てられない
    ⇨ 理解不能な仕様が永遠に残り続ける
    LintなしでJavaScriptを書くなんて、
    命綱なしでバンジージャンプするようなもの
    JavaScriptはLintがないと駄目な子
    

    View Slide

13. JavaScriptを陰で守ってきた
    立役者たち...
    そこで
    JSHint / TSLint / ESLint
    

    View Slide

14. 選ばれたのはΕSLintでした
    https://npmtrends.com/eslint-vs-jshint-vs-tslint
    

    View Slide

15. そして、ESLintは
    JSの未来を一身に背負ってきた...
    

    View Slide

16. しかし、
    だからこそ複雑になりすぎてしまった
    extends…
    独自シンタクス...
    暗黙の了解...
    

    View Slide

17. そんな中、
    彗星のごとく現れた救世主
    それが、、
    

    View Slide

18. ESLint Flat Config
    

    View Slide

19. JavaScriptさえわかればOK
    グッバイ、ESLint独自構文👋
    それは誰でもLintが設定できる技術
    

    View Slide

20. import customConfig from "eslint-config-custom";
    export default [
    customConfig,
    {
    files: ["**/*.js", "**/*.cjs"],
    rules: {
    "semi": "error",
    "no-unused-vars": "error"
    }
    },
    {
    files: ["**/*.js"],
    rules: {
    "no-undef": "error",
    "semi": "warn"
    }
    }
    ];
    JavaScriptと同じように、
    直感的にわかりやすい構文
    例えば、
    Override！
    

    View Slide

21. そろそろ
    Flat Conigが書きたくて
    うずうずしてきましたか？
    では早速、
    

    View Slide

22. Let's Lint
    

    View Slide

23. でもちょっと待って
    改めて考えたいLintの意義
    慌
    て
    る
    な
    

    View Slide

24. 🤬口うるさい教師
    ✨最も低コストで運用できるテスト
    メンタルモデルを変えよう！
    

    View Slide

25. 󰢃NG例）ぼくのかんがえたさいきょうのりんと
    時代は関数型プログラミングなんや...!
    わいはeslint-plugin-lodash-fp入れるんや...!
    Lintはみんなのもの。
    

    View Slide

26. Lintミニマリズムのすゝめ
    Marie Kondo Your Lint Config
    

    View Slide

27. 今度こそ本当にLet's Lint
    

    View Slide

28. Flat Configは2023年4月現在、
    Experimental Featureになっています。
    導入はあくまでも自己責任でお願いします。
    また、設定ノウハウの蓄積もWeb上に少ないので
    場合によっては難しいと感じる部分もあるかもしれません。
    ※注意事項
    

    View Slide

29. 基本は3STEP
    1
    ベースとなる
    設定集を選ぶ
    2
    環境に合わせて
    Pluginを入れる
    3
    必要に応じて
    独自設定を足す
    

    View Slide

30. ESLintには200〜300ほどの
    ルールの設定項目がある(!!)
    自分で一から設定するのは超困難
    ⇨ベースとなる設定集を選ぼう！
    STEP1: ベースとなる設定集を選ぶ
    

    View Slide

31. 選択肢は大きく3つ
    airbnb / standard / google
    (どれを選べばいいんだッ?!)
    

    View Slide

32. 一番人気はairbnb
    https://npmtrends.com/eslint-config-airbnb-vs-eslint-config-google-vs-eslint-config-standard
    

    View Slide

33. airbnbはモリモリの設定
    standardはシンプルな設定
    IMO:
    最初はシンプルな設定にして
    少しずつ足していくのがおすすめ
    airbnb vs standard
    https://zenn.dev/tapioca/articles/5685d794f6452b
    

    View Slide

34. // .eslintrc
    {
    "extends": ["standard"]
    }
    // eslint.config.js
    import { FlatCompat } from '@eslint/eslintrc'
    const compat = new FlatCompat()
    export default [
    ...compat.extends('eslint-config-standard'),
    ]
    config形式がflat configに対応しきれ
    てない関係上、ここは少しややこしい
    設定サンプル
    

    View Slide

35. STEP2: 環境に合わせてPluginを入れる
    多種多様なPluginがある
    pluggableなところがESLintの思想であり魅力でもある
    一例)
    ● eslint-plugin-import
    ● eslint-plugin-react
    ● eslint-plugin-jest
    ● eslint-plugin-storybook
    

    View Slide

36. import ts from "@typescript-eslint/eslint-plugin"
    import tsParser from "@typescript-eslint/parser"
    export default [{
    files: ["src/**/*.ts", "src/**/*.tsx"],
    languageOptions: {
    parser: tsParser,
    },
    plugins: {
    "@typescript-eslint": ts,
    },
    rules: {
    ...ts.configs["recommended"].rules,
    ...ts.configs["eslint-recommended"].rules,
    }
    }];
    TypeScript環境に
    TypeScript用のLintを入れる
    例えば、
    https://www.sunapro.com/eslint-flat-config/
    

    View Slide

37. ただ一つの完璧なLintの設定なんて存在しない
    今の自分たちの状況に最もフィットするベストなLintにしよう
    STEP3: 必要に応じて独自設定を足す
    ESLint Flat Configは
    スタマイズしやすい...
    

    View Slide

38. import jsdoc from "eslint-plugin-jsdoc";
    export default [
    {
    files: ["**/*.js"],
    plugins: {
    jsd: jsdoc
    }
    rules: {
    "jsd/require-description": "error",
    "jsd/check-values": "error"
    }
    }
    ];
    せめてJSDocを書きたい
    TypeScript化が間に合わないチーム
    右のようなlintConfigを置くことで
    JSDocの記述を強制できる
    例えば、
    https://eslint.org/blog/2022/08/new-config-system-part-2/
    

    View Slide

39. ということで
    新しいESLintの設定方法、
    かなり直感的ではないでしょうか？
    Lint
    職人は
    もう
    要らねぇ
    

    View Slide

40. Enjoy Your Lint Life!!!
    

    View Slide

41. ご清聴ありがとうございました！
    

    View Slide

42. ● ESLint's new config system, Part 2: Introduction to flat config
    ● Config File Simplification
    ● Flat Config導入完了！　新しいESLintの設定フォーマットを使ってみた
    ● eslintをflat configで書き換える
    ● ESLintのconfigがどのように変わり得るか（flat configとは何か）
    参考資料
    

    View Slide

43. ● 『ブラックジャックによろしく』マンガデータ
    ● Azusa 3大体いい感じのスライドを作るための無料テンプレート
    利用素材
    

    View Slide