# ESLint One for All Made Easy - Anthony Fu

{%hackmd LeyMdnM3Q4ipfr57bkqpyA %}

#### [📚 議程介紹](https://webconf.tw/agenda/day2-3-m)

###### ▼▼▼ 開始筆記 ▼▼▼

**[投影片在這](https://talks.antfu.me/2024/webconf-tw)**

個人網站: [Anthony Fu](https://antfu.me/)
Anthony Fu 开源工作坊： [Link](https://workshop.antfu.me/zh/workshops/1)
簡報PDF: [Link](https://talks.antfu.me/2024-12-28/pdf)
Github: [Link](https://github.com/antfu)
NuxtLab: [Link](https://nuxtlabs.com/)

slidev [link](https://sli.dev/)

* ESLint v9.0.0
* ESLint 傳統設定檔(.eslintrc) vs Flat config
* 傳統設定檔案
* 多種檔案來源
* 基於約定的extends
* 基於npm包名外掛系統
* 既成數可能很複雜
* flat
* 單一來源
* 基於js原生的顯示匯入
* 基於js原生的匯入的對象
* 可組合，更容易追溯


例如原先的配置檔 替換 n 需要多個地方寫 n ，現在可以透過 js 的方式重新命名

### 遷移工具至v9
[@esling/migrate-config](https://www.npmjs.com/package/@eslint/migrate-config)

### One for All ~~(一個打十個)~~

傳統的做法要做一個monorepo 才能管理，每次增加一個選項需要很多的手動覆蓋

新型的設定檔我可以撰寫一個工廠函式，底層去改內部的位置。

[flat config utils](https://github.com/antfu/eslint-flat-config-utils) ＊Community

[eslint typegen](https://github.com/antfu/eslint-typegen) ＊Community

[eslint inspector](https://eslint-config.antfu.me/configs) ＊官方
> eslint --inspect-config
- 設定檔視覺化
- 理解設定檔組合
- 內置設定檔
- 用 filter, tag 去查看篩選
- 檔案路徑測試器
-

可以將複雜度抽象到工廠就可以很好的配置

### 專案感知的設定檔

[Nuxt ESLint](https://eslint.nuxt.com/)

例如server 中 不能導入 client 的API

動態生成 eslint config
有了 flat config 才開始推動

## ESLint 不只是一個 Linter
更是一個成熟且強大的AST工具包

## ESLint 也可以是一個格式化工具
- eslint 是一種 AST(Abstract Syntax Tree) ?

格式化工具？Linter？長期的辯論

[Frozen stylistic rules](https://github.com/eslint/eslint/issues/18694)

eslint https://eslint.style/

[ESLint Stylistic](https://eslint.style/)

## ESLint 也可以是遷移工具（Code modification)

ex:
// @keep-sorted
// @keep-unique

[eslint-plugin-command](https://github.com/antfu/eslint-plugin-command)

ESlint 有很好的生態，整合性高

## ESLint 也可以是多語的 Linter

歸功於可擴展性，變成社群的標準，除了 JS 也支援不同程式語言

* Markdown
* CSS ..還比較早期 -> 想參與開源是一個不錯機會
* TypeScript
* Vue
* Svelte
* Astro
* JSON
* YAML
* TOML
* GraphQL
* HTML
* MDX
* 其他(prettier)

[ESLint RFC ＃99](https://github.com/eslint/rfcs/blob/main/designs/2022-languages/README.md)
希望可以成為一個跟語言無關的 Linter

去看！
https://github.com/antfu/eslint-config


講者推薦參可考這個 repo 來構建屬於自己/團隊的 eslint file

---

## 聊天區

vue生態系很難不用到他做的東西ＸＤ

完了 講者要被圍起來了 要貼紙ＸＤ

講話很台灣人
true

講者 IG: https://www.instagram.com/antfu7/

slidev真的很讚推薦工程師講簡報的時候用，效果很好
看到神明了，之後的課都不重要了

數組是什麼？ array?
陣列 YES

類型是 型別

這段好猛
剛剛是說安麗嗎

angular哭哭都沒被提到
angular? 那是什麼