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
1.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.4k
Other Decks in Programming
See All in Programming
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
110
TanStack DB ~状態管理の新しい考え方~
bmthd
2
340
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
250
AWS Serverless Application Model入門_20250708
smatsuzaki
0
140
為你自己學 Python - 冷知識篇
eddie
1
220
testingを眺める
matumoto
1
110
実践!App Intents対応
yuukiw00w
1
360
あなたとJIT, 今すぐアセンブ ル
sisshiki1969
1
730
AIエージェント開発、DevOps and LLMOps
ymd65536
1
350
Honoアップデート 2025年夏
yusukebe
1
860
WebAssemblyインタプリタを書く ~Component Modelを添えて~
ruccho
1
920
コンテキストエンジニアリング Cursor編
kinopeee
1
710
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
95
14k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
YesSQL, Process and Tooling at Scale
rocio
173
14k
It's Worth the Effort
3n
187
28k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
The Language of Interfaces
destraynor
160
25k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
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大体いい感じのスライドを作るための無料テンプレート 利用素材