Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
eslint-flat-config
Search
てけし
April 01, 2023
Programming
5
1k
eslint-flat-config
ESLint Flat Configで誰もが簡単に Lintを設定できる時代へ。
新しいESLintの設定方法、ESLint Flat Configを紹介します。
てけし
April 01, 2023
Tweet
Share
More Decks by てけし
See All by てけし
フロントエンドで 良いコードを書くために
t_keshi
7
2.3k
Other Decks in Programming
See All in Programming
CQRS+ES の力を使って効果を感じる / Feel the effects of using the power of CQRS+ES
seike460
PRO
0
240
ESLintプラグインを使用してCDKのセオリーを適用する
yamanashi_ren01
2
240
Rubyでつくるパケットキャプチャツール
ydah
0
170
Androidアプリのモジュール分割における:x:commonを考える
okuzawats
1
280
Amazon Nova Reelの可能性
hideg
0
200
PHPで学ぶプログラミングの教訓 / Lessons in Programming Learned through PHP
nrslib
4
1.1k
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
0
100
見えないメモリを観測する: PHP 8.4 `pg_result_memory_size()` とSQL結果のメモリ管理
kentaroutakeda
0
940
traP の部内 ISUCON とそれを支えるポータル / PISCON Portal
ikura_hamu
0
180
AHC041解説
terryu16
0
390
良いユニットテストを書こう
mototakatsu
11
3.6k
オニオンアーキテクチャを使って、 Unityと.NETでコードを共有する
soi013
0
370
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.2k
Mobile First: as difficult as doing things right
swwweet
222
9k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
570
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Making the Leap to Tech Lead
cromwellryan
133
9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
A Philosophy of Restraint
colly
203
16k
The Power of CSS Pseudo Elements
geoffreycrofte
74
5.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Visualization
eitanlees
146
15k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
30
2.1k
Transcript
ESLint Flat Configで 誰もが簡単に Lintを設定できる時代へ🥳 2023/04/01 CREATED BY t-keshi
t-keshi Web / TypeScript / React / Kotlin http://zenn.dev/t_keshi
本日はESLint Flat Configの話
None
- デフォルトでsourceTypeがesmoduleになった - デフォルトで.mjsや.cjsも対象とするようになった - ecmaVersionの指定が"latest"になった - extendsプロパティが無くなった などなど。 ☞
キャッチアップする
/) ///) /,.=゙''"/ / i f ,.r='"-‐'つ____こまけぇこたぁいいんだよ!! / / _,.-‐'~/⌒ ⌒\
/ ,i ,二ニ⊃( •). (•)\ / ノ il゙フ::::::⌒(__人__)⌒::::: \ ,イ「ト、 ,!,!| |r┬-| | / iトヾヽ_/ィ"\ `ー'´ / ひとことでまとめると、、
誰でも簡単にLintの設定が 書けるようになった
そ れ っ て 最 高 じ ゃ な い
で す か 最高である!!!
駆け足で振り返るLintの歴史
Q.以下のconsole.logの出力は? console.log(isNaN(true)); TRUE FALSE
最 高 じ ゃ な い で す か ありがとうLint!!!
ブラウザで動く(ほぼ)唯一のプログラミング言語 ⇨ 後方互換性を捨てられない ⇨ 理解不能な仕様が永遠に残り続ける LintなしでJavaScriptを書くなんて、 命綱なしでバンジージャンプするようなもの JavaScriptはLintがないと駄目な子
JavaScriptを陰で守ってきた 立役者たち... そこで JSHint / TSLint / ESLint
選ばれたのはΕSLintでした https://npmtrends.com/eslint-vs-jshint-vs-tslint
そして、ESLintは JSの未来を一身に背負ってきた...
しかし、 だからこそ複雑になりすぎてしまった extends… 独自シンタクス... 暗黙の了解...
そんな中、 彗星のごとく現れた救世主 それが、、
ESLint Flat Config
JavaScriptさえわかればOK グッバイ、ESLint独自構文👋 それは誰でもLintが設定できる技術
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!
そろそろ Flat Conigが書きたくて うずうずしてきましたか? では早速、
Let's Lint
でもちょっと待って 改めて考えたいLintの意義 慌 て る な
🤬口うるさい教師 ✨最も低コストで運用できるテスト メンタルモデルを変えよう!
NG例)ぼくのかんがえたさいきょうのりんと 時代は関数型プログラミングなんや...! わいはeslint-plugin-lodash-fp入れるんや...! Lintはみんなのもの。
Lintミニマリズムのすゝめ Marie Kondo Your Lint Config
今度こそ本当にLet's Lint
Flat Configは2023年4月現在、 Experimental Featureになっています。 導入はあくまでも自己責任でお願いします。 また、設定ノウハウの蓄積もWeb上に少ないので 場合によっては難しいと感じる部分もあるかもしれません。 ※注意事項
基本は3STEP 1 ベースとなる 設定集を選ぶ 2 環境に合わせて Pluginを入れる 3 必要に応じて 独自設定を足す
ESLintには200〜300ほどの ルールの設定項目がある(!!) 自分で一から設定するのは超困難 ⇨ベースとなる設定集を選ぼう! STEP1: ベースとなる設定集を選ぶ
選択肢は大きく3つ airbnb / standard / google (どれを選べばいいんだッ?!)
一番人気はairbnb https://npmtrends.com/eslint-config-airbnb-vs-eslint-config-google-vs-eslint-config-standard
airbnbはモリモリの設定 standardはシンプルな設定 IMO: 最初はシンプルな設定にして 少しずつ足していくのがおすすめ airbnb vs standard https://zenn.dev/tapioca/articles/5685d794f6452b
// .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に対応しきれ てない関係上、ここは少しややこしい 設定サンプル
STEP2: 環境に合わせてPluginを入れる 多種多様なPluginがある pluggableなところがESLintの思想であり魅力でもある 一例) • eslint-plugin-import • eslint-plugin-react •
eslint-plugin-jest • eslint-plugin-storybook
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/
ただ一つの完璧なLintの設定なんて存在しない 今の自分たちの状況に最もフィットするベストなLintにしよう STEP3: 必要に応じて独自設定を足す ESLint Flat Configは スタマイズしやすい...
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/
ということで 新しいESLintの設定方法、 かなり直感的ではないでしょうか? Lint 職人は もう 要らねぇ
Enjoy Your Lint Life!!!
ご清聴ありがとうございました!
• ESLint's new config system, Part 2: Introduction to flat
config • Config File Simplification • Flat Config導入完了! 新しいESLintの設定フォーマットを使ってみた • eslintをflat configで書き換える • ESLintのconfigがどのように変わり得るか(flat configとは何か) 参考資料
• 『ブラックジャックによろしく』マンガデータ • Azusa 3大体いい感じのスライドを作るための無料テンプレート 利用素材