eslint-flat-config

ESLint Flat Conﬁgで誰もが簡単に 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！！！

ブラウザで動く(ほぼ)唯一のプログラミング言語 ⇨ 後方互換性を捨てられない ⇨ 理解不能な仕様が永遠に残り続ける 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大体いい感じのスライドを作るための無料テンプレート利用素材

eslint-flat-config

eslint-flat-config

More Decks by てけし

Other Decks in Programming

Featured

Transcript