ESLint Flat Configで誰もが簡単に Lintを設定できる時代へ
76.6K Views
April 01, 23
スライド概要
新しいESLintの設定方法、ESLint Flat Configを紹介します。
関連スライド
VRTあるとき・ないとき
てけし
7.5K
各ページのテキスト
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の話
☞ キャッチアップする - デフォルトで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！！！
JavaScriptはLintがないと駄目な子 ブラウザで動く(ほぼ)唯一のプログラミング言語 ⇨ 後方互換性を捨てられない ⇨ 理解不能な仕様が永遠に残り続ける LintなしでJavaScriptを書くなんて、 命綱なしでバンジージャンプするようなもの
そこで JSHint / TSLint / ESLint JavaScriptを陰で守ってきた 立役者たち...
選ばれたのはΕSLintでした https://npmtrends.com/eslint-vs-jshint-vs-tslint
そして、ESLintは JSの未来を一身に背負ってきた...
しかし、 だからこそ複雑になりすぎてしまった 独自シンタクス... extends… 暗黙の了解...
そんな中、 彗星のごとく現れた救世主 それが、、
ESLint Flat Config
それは誰でもLintが設定できる技術 JavaScriptさえわかればOK グッバイ、ESLint独自構文👋
import customConfig from "eslint-config-custom";
export default [
customConfig,
例えば、
{
files: ["**/*.js", "**/*.cjs"],
rules: {
"semi": "error",
"no-unused-vars": "error"
JavaScriptと同じように、
直感的にわかりやすい構文
}
},
{
files: ["**/*.js"],
rules: {
"no-undef": "error",
"semi": "warn"
}
}
];
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 3 ベースとなる 環境に合わせて 必要に応じて 設定集を選ぶ Pluginを入れる 独自設定を足す
STEP1: ベースとなる設定集を選ぶ ESLintには200〜300ほどの ルールの設定項目がある(!!) 自分で一から設定するのは超困難 ⇨ベースとなる設定集を選ぼう！
選択肢は大きく3つ airbnb / standard / google (どれを選べばいいんだッ?!)
一番人気はairbnb https://npmtrends.com/eslint-config-airbnb-vs-eslint-config-google-vs-eslint-config-standard
airbnb vs standard airbnbはモリモリの設定 standardはシンプルな設定 IMO: 最初はシンプルな設定にして 少しずつ足していくのがおすすめ https://zenn.dev/tapioca/articles/5685d794f6452b
// .eslintrc
{
設定サンプル
"extends": ["standard"]
}
config形式がflat configに対応しきれ
てない関係上、ここは少しややこしい
// eslint.config.js
import { FlatCompat } from '@eslint/eslintrc'
const compat = new FlatCompat()
export default [
...compat.extends('eslint-config-standard'),
]
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: {
TypeScript環境に
parser: tsParser,
TypeScript用のLintを入れる
},
plugins: {
"@typescript-eslint": ts,
},
rules: {
...ts.configs["recommended"].rules,
...ts.configs["eslint-recommended"].rules,
}
https://www.sunapro.com/eslint-flat-config/
}];
STEP3: 必要に応じて独自設定を足す ただ一つの完璧なLintの設定なんて存在しない 今の自分たちの状況に最もフィットするベストなLintにしよう ESLint Flat Configは スタマイズしやすい ...
import jsdoc from "eslint-plugin-jsdoc";
例えば、
export default [
{
files: ["**/*.js"],
せめてJSDocを書きたい
plugins: {
jsd: jsdoc
TypeScript化が間に合わないチーム
}
rules: {
"jsd/require-description": "error",
右のようなlintConfigを置くことで
"jsd/check-values": "error"
}
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大体いい感じのスライドを作るための無料テンプレート