ESLint Flat Configで誰もが簡単に Lintを設定できる時代へ

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

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

• http://zenn.dev/t_keshi

本日はESLint Flat Configの話

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

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

ひとことでまとめると、、

• https://dic.nicovideo.jp/a/ﾞ
• https://dic.nicovideo.jp/a/~

誰でも簡単に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

• 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

• https://overreacted.io/writing-resilient-components/#marie-kondo-your-lint-configMarie 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

• 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

• 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/

}];

• 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/

• 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とは何か）

• https://eslint.org/blog/2022/08/new-config-system-part-2/
• https://github.com/eslint/rfcs/pull/9
• https://zenn.dev/babel/articles/eslint-flat-config-for-babel
• https://www.sunapro.com/eslint-flat-config/
• https://zenn.dev/makotot/articles/0d9184f3dde858

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

• https://densho810.com/free/
• https://azusa3.sanographix.net/