Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

本日はESLint Flat Configの話

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

　　　　　　　　　　　 ／）
 　　　　　　　　　　　／／／）
 　　　　　　　　　 ／,.=ﾞ''"／　　　
 　　　／　　　　 i f　,.r='"-‐'つ＿＿＿_こまけぇこたぁいいんだよ！！
 　　/　　　　　 /　　　_,.-‐'~／⌒　　⌒＼
 　　　　／　 　,i　　　,二ﾆ⊃（ ●）.　（●）＼
 　　　/　 　　ﾉ　　　 ilﾞフ::::::⌒（__人__）⌒::::: ＼
 　　　　　　,ｲ｢ﾄ､　　,!,!|　　　　　|r┬-|　　　　　|
 　　　　　/　iﾄヾヽ_/ｨ"＼ 　　 　 `ー'´ 　 　 ／ ひとことでまとめると、、

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

ESLint Flat Config

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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！

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Let's Lint

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

今度こそ本当にLet's Lint

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

// .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に対応しきれ てない関係上、ここは少しややこしい 設定サンプル

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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/

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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/

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Enjoy Your Lint Life!!!

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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