[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"navigation":3,"page-\u002Fblog\u002Ftech\u002Feslint-first-line-of-defense":147,"searchResults":866},[4],{"title":5,"path":6,"stem":7,"children":8,"description":146,"publishedAt":15,"tags":15,"image":15,"score":15,"draft":16},"Blog","\u002Fblog","blog",[9,30,44,68,112,136],{"title":10,"path":11,"stem":12,"children":13,"description":15,"publishedAt":15,"tags":15,"image":15,"score":15,"draft":16,"head":17},"最新文章","\u002Fblog\u002Fnews","blog\u002F0.news\u002F0.index",[14],{"title":10,"path":11,"stem":12,"description":15,"publishedAt":15,"tags":15,"image":15,"score":15,"draft":16},null,false,{"meta":18},[19,21,24,27],{"name":20,"content":10},"keywords",{"name":22,"content":23},"robots","index, follow",{"name":25,"content":26},"author","Annie",{"name":28,"content":29},"copyright","© 2024 RinTree",{"title":31,"path":32,"stem":33,"children":34,"description":15,"publishedAt":15,"tags":15,"image":15,"score":15,"draft":16,"head":37},"影劇推薦","\u002Fblog\u002Fdrama","blog\u002F2.drama\u002F0.index",[35],{"title":31,"path":32,"stem":33,"description":36,"publishedAt":15,"tags":15,"image":15,"score":15,"draft":16},"推薦您 Netflix 和 Disney+ 影劇小編愛好的好評清單。",{"meta":38},[39,40,41,43],{"name":20,"content":31},{"name":22,"content":23},{"name":25,"content":42},"爆米花鼠",{"name":28,"content":29},{"title":45,"path":46,"stem":47,"children":48,"description":15,"publishedAt":15,"tags":15,"image":15,"score":15,"draft":16,"head":61},"書籍分享","\u002Fblog\u002Fbook","blog\u002F3.book\u002F0.index",[49,51],{"title":45,"path":46,"stem":47,"description":50,"publishedAt":15,"tags":15,"image":15,"score":15,"draft":16},"推薦您好書與全台圖書館的免費可借閱電子書情報！",{"title":52,"path":53,"stem":54,"description":55,"publishedAt":56,"tags":57,"image":58,"score":15,"draft":16},"HyRead 電子書｜書籍推薦｜《不便利的便利店》暖心人生故事 推薦指數⭐⭐⭐⭐","\u002Fblog\u002Fbook\u002Fconvenience-store","blog\u002F3.book\u002F3.convenience-store","《不便利的便利店》以一家便利店為故事核心，是韓國年度最受歡迎的小說之一，銷量突破 70 萬冊，並獲選為 25 個城市的年度推薦好書。由金浩然著，目前已出版兩冊：《不便利的便利店》與《不便利的便利店 2》。","2025-01-17","HyRead，電子書，書籍推薦",{"src":59,"alt":60},"\u002Fcover\u002Fconvenience-store.png","HyRead 電子書 不便利的便利店",{"meta":62},[63,65,66,67],{"name":20,"content":64},"書籍，電子書",{"name":22,"content":23},{"name":25,"content":26},{"name":28,"content":29},{"title":69,"path":70,"stem":71,"children":72,"description":15,"publishedAt":15,"tags":15,"image":15,"score":15,"draft":16,"head":106},"科技生活","\u002Fblog\u002Ftech","blog\u002F4.tech\u002F0.index",[73,76,86,96],{"title":74,"path":70,"stem":71,"description":75,"publishedAt":15,"tags":15,"image":15,"score":15,"draft":16},"數位開發盒","關於程式開發、網路架站、SEO 等數位工具與心得的分享。",{"title":77,"path":78,"stem":79,"description":80,"publishedAt":81,"tags":82,"image":83,"score":15,"draft":16},"ESLint 工程師必備外掛：第一道程式碼品質檢測，一鍵清理舊程式碼，如何安裝與設定","\u002Fblog\u002Ftech\u002Feslint-first-line-of-defense","blog\u002F4.tech\u002F2.eslint-first-line-of-defense","探討 AI 開發時代為什麼更需要 ESLint，以及如何設定 ESLint 來作為程式碼品質的第一道防線。","2026-08-16","ESLint，AI，程式開發，Code Review，外掛插件",{"src":84,"alt":85},"\u002Fcover\u002Feslint.jpg","AI 寫 Code 忘記清理舊程式嗎？用 ESLint 築起專案第一道護欄，抓出潛在的程式碼地雷",{"title":87,"path":88,"stem":89,"description":90,"publishedAt":91,"tags":92,"image":93,"score":15,"draft":16},"ESLint 安全外掛 eslint-plugin-security：為 Node.js 專案進行資安檢查，攔截潛在漏洞","\u002Fblog\u002Ftech\u002Feslint-plugin-security","blog\u002F4.tech\u002F3.eslint-plugin-security","介紹如何為專案加入 eslint-plugin-security，在程式碼靜態檢查中築起安全性護欄，自動揪出 ReDoS、物件注入與危險調用等潛在資安漏洞。","2026-09-24","ESLint，Node.js，資安防護，靜態分析，外掛插件",{"src":94,"alt":95},"\u002Fcover\u002Feslint-plugin-security.jpg","ESLint 進階安全外掛 eslint-plugin-security：為專案築起資安防護網",{"title":97,"path":98,"stem":99,"description":100,"publishedAt":101,"tags":102,"image":103,"score":15,"draft":16},"Git Hooks 自動化守門員 Husky：在 Commit 與 Push 前執行檢查腳本","\u002Fblog\u002Ftech\u002Fhusky-git-hooks","blog\u002F4.tech\u002F4.husky-git-hooks","介紹如何運用 Husky 搭配 Git Hooks，在程式碼 Commit 與 Push 階段自動化執行 ESLint、測試 與各種自訂檢查腳本，只要三分鐘就能設定完成，再也不用擔心忘記執行檢查。","2026-09-30","Husky，外掛插件，專案工程，程式碼品質",{"src":104,"alt":105},"\u002Fcover\u002Fhusky.jpg","告別手動執行！Husky 幫專案築起 Git 推送守衛牆",{"meta":107},[108,110,111],{"name":20,"content":109},"科技，生活",{"name":22,"content":23},{"name":28,"content":29},{"title":113,"path":114,"stem":115,"children":116,"description":15,"publishedAt":15,"tags":15,"image":15,"score":15,"draft":16,"head":130},"梨子製造所","\u002Fblog\u002Ftools","blog\u002F5.tools\u002F0.index",[117,120],{"title":118,"path":114,"stem":115,"description":119,"publishedAt":15,"tags":15,"image":15,"score":15,"draft":16},"數位工具箱","好用的精選資源，線上網站與 手機 APP 等分享。",{"title":121,"path":122,"stem":123,"description":124,"publishedAt":125,"tags":126,"image":127,"score":15,"draft":16},"手機 One UI 6 更新！ 新增螢幕搜索功能：圖像和文字搜尋太棒了！","\u002Fblog\u002Ftools\u002Fone-ui-search","blog\u002F5.tools\u002F1.one-ui-search","最近，我的 Samsung 手機剛剛才升級到了 One UI 6.1，其中一個讓我驚喜的新功能就是螢幕搜尋圈 (Circle to Search with Google) 。這個功能讓我們可以更加輕鬆地在手機上搜尋圖片和文字。今天，我將帶大家一起探索這個實用的功能，並教大家如何使用它。","2024-03-18","安卓 Android，三星 Samsung，手機操作",{"src":128,"alt":129},"\u002Fimg\u002Fcontent\u002Fsamsung-one-ui-circle-to-search-overview.jpg","Samsung One UI 圈選搜尋 (Circle to Search)",{"meta":131},[132,134,135],{"name":20,"content":133},"開發，製造",{"name":22,"content":23},{"name":28,"content":29},{"title":113,"path":137,"stem":138,"children":139,"description":15,"publishedAt":15,"tags":15,"image":15,"score":15,"draft":16,"head":141},"\u002Fblog\u002Fcreator","blog\u002F6.creator\u002F0.index",[140],{"title":69,"path":137,"stem":138,"description":15,"publishedAt":15,"tags":15,"image":15,"score":15,"draft":16},{"meta":142},[143,144,145],{"name":20,"content":133},{"name":22,"content":23},{"name":28,"content":29},"Read the latest news about Nuxt Content or articles about the Studio platform.",{"page":148,"surround":859},{"id":149,"title":77,"author":150,"body":151,"description":80,"draft":16,"extension":854,"image":855,"meta":856,"navigation":508,"path":78,"publishedAt":81,"score":15,"seo":857,"stem":79,"tags":82,"updated":81,"__hash__":858},"blog\u002Fblog\u002F4.tech\u002F2.eslint-first-line-of-defense.md","梨子",{"type":152,"value":153,"toc":837},"minimark",[154,158,163,173,176,179,182,187,190,196,203,225,232,236,239,245,248,254,257,264,270,289,293,296,299,318,322,325,331,335,338,343,371,376,390,394,397,402,455,462,466,469,708,712,746,749,752,757,777,789,793,796,799,802,808,814,817,833],[155,156,157],"p",{},"今天來介紹一個基礎的檢查工具： ESLint ，它雖然不能保證程式碼從此萬無一失，卻是成本最低、能在第一時間幫你過濾雜訊、把關基本程式規範的「第一道防線」。",[159,160,162],"h2",{"id":161},"eslint-是什麼","ESLint 是什麼？",[164,165],"resource-card",{"description":166,"forks":167,"icon":168,"license":169,"stars":170,"title":171,"url":172},"在 JavaScript \u002F TypeScript 程式碼中快速找出語法瑕疵與潛在代碼地雷。","5.2k","ri:github-fill","MIT","27.5k","ESLint","https:\u002F\u002Fgithub.com\u002Feslint\u002Feslint",[155,174,175],{},"ESLint 是一款 JavaScript \u002F TypeScript 的靜態分析工具，俗稱 Linter。",[155,177,178],{},"簡單說，它是一個會自動檢查程式碼語法與結構的工具。在你還沒執行程式、也不需要等測試跑完的情況下，只要一存檔，就能快速抓出常見的語法瑕疵、不符合規範的寫法，或是容易引發錯誤的程式碼模式。",[155,180,181],{},"不需要跑程式，不需要等測試，一存檔就能立刻看到警告與提示，這就是靜態分析最核心的優勢：即時且零成本的反饋。",[183,184,186],"h3",{"id":185},"常見迷思eslint-只是給前端網頁用的嗎","💡 常見迷思：ESLint 只是給前端網頁用的嗎？",[155,188,189],{},"很多人初學時常有這個誤解：「只有寫網頁前端（Vue、React）時才需要裝 ESLint 吧？」",[155,191,192],{},[193,194,195],"strong",{},"答案是：完全不限於前端，它是全端（Full-stack）通用的程式碼守門員！",[155,197,198,199,202],{},"只要專案的底層語言是 ",[193,200,201],{},"JavaScript 或 TypeScript","，無論跑在哪個環境，ESLint 都能發揮關鍵作用：",[204,205,206,213,219],"ul",{},[207,208,209,212],"li",{},[193,210,211],{},"前端網頁端（瀏覽器）","：在 Vue \u002F Nuxt、React \u002F Next.js 專案中，幫你檢查組件語法、React Hooks 依賴項、DOM 渲染安全性等規範。",[207,214,215,218],{},[193,216,217],{},"後端伺服器端（Node.js）","：在 Express、NestJS、Fastify 等後端 API 專案中，幫你攔截未處理的非同步 Promise、記憶體洩漏風險、未捕獲的例外錯誤以及潛在的安全漏洞。",[207,220,221,224],{},[193,222,223],{},"工具與自動化腳本","：開發 CLI 工具、批次處理腳本或爬蟲程式，同樣能確保代碼嚴謹乾淨。",[155,226,227,228,231],{},"前端之所以讓人感覺「最常遇到 ESLint」，純粹是因為前端現代框架（如 Vite、Nuxt）的建立腳本通常預設整合了它，加上 VS Code 編輯器即時畫紅線的效果最為直觀。但對資深工程師而言，",[193,229,230],{},"無論前後端，只要涉及 JS \u002F TS，ESLint 都是團隊協作中不可或缺的基石","。",[183,233,235],{"id":234},"其實eslint-不是新工具","其實「ESLint 不是新工具」",[155,237,238],{},"其實，ESLint 根本不是什麼 AI 時代才冒出來的新產物，早在十多年前（2013 年），它就已經誕生並逐漸成為現代 JavaScript \u002F TypeScript 生態系的行業標準。",[155,240,241,242],{},"但在業界，你可能會發現一個耐人尋味的現象：\n",[193,243,244],{},"不少傳統科技業、接案外包團隊，甚至一些追求短期速度的公司，專案裡可能從未用過、甚至沒聽說過 ESLint。",[155,246,247],{},"這類專案往往只追求「功能先跑得動就好、上線要快」，忽略了工程規範與長期維護性。結果就是每個人用各自習慣的風格寫 code，變數命名混亂、格式不一、無效的陳舊代碼滿天飛，甚至留下一堆容易引發非同步錯誤的地雷，表面上求快，實際上卻在背後積累了龐大的技術債。",[155,249,250,251,231],{},"相反地，",[193,252,253],{},"真正具備工程素養、注重代碼品質的專業工程師與成熟科技團隊，無一例外都會把 ESLint 列為開案的「第一道標配」",[155,255,256],{},"回想早年在沒有 AI 輔助的純人工開發時代，團隊進行 Code Review 時，我就曾被前輩在 PR 裡細心圈出各種順序與格式瑕疵。當時總驚嘆前輩眼力驚人；直到後來自己更熟悉現代工具鏈才恍然大悟：原來這些瑣碎的規矩，專業團隊根本不用肉眼人工挑，只要在專案裡配好 ESLint，存檔或提交時就能在幾毫秒內自動過濾得一清二楚！",[155,258,259],{},[260,261],"img",{"alt":262,"src":263},"人工肉眼挑格式 vs ESLint 一秒搞定","\u002Fimg\u002Fcontent\u002Feslint-after.webp",[155,265,266,267,231],{},"追求速度固然重要，但不設防線的「盲目求快」，往往只是在向未來借高利貸。專業工程師之所以專業，正是懂得",[193,268,269],{},"把瑣碎的低級錯誤與格式規範交給自動化工具（ESLint）把關，將寶貴的專注力，保留給更具核心價值的系統架構與商業邏輯討論",[271,272,275],"footnote",{"en-title":273,"title":274},"GLOSSARY","術語說明",[204,276,277,283],{},[207,278,279,282],{},[193,280,281],{},"Code Review","：程式碼審查，在程式碼正式合併前，由團隊成員人工檢視並給予優化建議的流程。",[207,284,285,288],{},[193,286,287],{},"PR（Pull Request）","：將自己的程式碼變更提交給團隊審查、確認無誤後合併進主分支的機制。",[159,290,292],{"id":291},"為什麼-ai-時代更需要-eslint","為什麼 AI 時代更需要 ESLint？",[155,294,295],{},"AI 生成程式碼的速度極快、量極大，但它不了解你的專案架構，不知道你們團隊的命名慣例，更不會主動遵守你訂的規範。",[155,297,298],{},"設定 ESLint 的目的，並不是指望它抓出所有深層的系統漏洞，而是把基本的編碼規範化為明確的規則，先自動濾掉 80% 的低級錯誤與風格雜訊，讓開發者不用浪費時間用肉眼去挑微小毛病：",[204,300,301,307],{},[207,302,303,306],{},[193,304,305],{},"GitHub Copilot 整合 Code Review","：ESLint 在 2025 年底與 GitHub Copilot 的 Code Review 整合，在 PR 審查過程中直接標示 ESLint 違規，在合併前就先攔截基礎錯誤。",[207,308,309,312,313,317],{},[193,310,311],{},"支援 MCP（Model Context Protocol）","：ESLint 發布了官方 ",[314,315,316],"code",{},"@eslint\u002Fmcp"," 套件，讓 AI 模型可以直接與 ESLint 互動，取得 Linting 結果並即時修正，減少 AI 產出帶有語法瑕疵的程式碼。",[183,319,321],{"id":320},"目前-eslint-的下載量趨勢","目前 ESLint 的下載量趨勢",[155,323,324],{},"ESLint 官方網站數據顯示 ESLint 目前是 npm 上下載量第一的 JavaScript Linter，每週下載量超過 1.56 億次，被 Microsoft、Airbnb、Netflix、Facebook 等大公司廣泛使用，而且下載趨勢仍在上升中。",[155,326,327],{},[260,328],{"alt":329,"src":330},"npm trends ESLint 下載趨勢圖 | 資料來源:https:\u002F\u002Fnpmtrends.com\u002Feslint","\u002Fimg\u002Fcontent\u002Feslint-npm-trends.webp",[159,332,334],{"id":333},"eslint-能幫你抓什麼以及它的能力邊界","ESLint 能幫你抓什麼？（以及它的能力邊界）",[155,336,337],{},"ESLint 的本質是規則與語法樹（AST）的比對，它非常擅長抓出「明確定義的寫法問題」，但無法理解深層的「業務邏輯」：",[155,339,340],{},[193,341,342],{},"它非常擅長的領域（基礎防線）：",[204,344,345,351,365],{},[207,346,347,350],{},[193,348,349],{},"程式碼風格統一","：縮排、命名方式、引號用單引號還是雙引號。當 AI 生成大量程式碼時，若無約束，專案風格很快會凌亂不堪。",[207,352,353,356,357,360,361,364],{},[193,354,355],{},"明確的語法與邏輯漏洞","：例如宣告了變數卻沒有使用、誤用了 ",[314,358,359],{},"=="," 而不是 ",[314,362,363],{},"===","、忘記處理 Promise 的錯誤等。",[207,366,367,370],{},[193,368,369],{},"已知的反模式與安全規範","：透過自訂規則攔截寫死的憑證、缺少身份驗證的 API 端點等。",[155,372,373],{},[193,374,375],{},"它的能力邊界（需要搭配測試與人工審查）：",[204,377,378,384],{},[207,379,380,383],{},[193,381,382],{},"看不懂商業邏輯","：例如轉帳功能中，AI 漏掉了「餘額是否大於轉帳金額」，這種語法完全合法但邏輯致命的錯誤，ESLint 是無法察覺的。",[207,385,386,389],{},[193,387,388],{},"深層與跨檔案漏洞","：複雜的資料流追蹤或 AI 幻覺套件，仍需仰賴單元測試、Code Review 以及專門的 AI 安全分析工具。",[159,391,393],{"id":392},"怎麼開始設定-eslint","怎麼開始設定 ESLint？",[155,395,396],{},"現在的時代要套用 ESLint 很簡單，不需要自己研究複雜的規則設定，直接把下面這段提示詞丟給 AI：「 請幫我針對這個專案分析並設定 ESLint 」。",[155,398,399],{},[193,400,401],{},"📋 跟著參考步驟可能會執行以下指令：",[204,403,404,436],{},[207,405,406,407],{},"步驟一：安裝 ESLint\n",[408,409,414],"pre",{"className":410,"code":411,"language":412,"meta":413,"style":413},"language-bash shiki shiki-themes ayu-dark","npm install --save-dev eslint\n","bash","",[314,415,416],{"__ignoreMap":413},[417,418,421,425,429,433],"span",{"class":419,"line":420},"line",1,[417,422,424],{"class":423},"sP_rH","npm",[417,426,428],{"class":427},"skAsU"," install",[417,430,432],{"class":431},"sHCZS"," --save-dev",[417,434,435],{"class":427}," eslint\n",[207,437,438,439],{},"步驟二：初始化設定檔\n",[408,440,442],{"className":410,"code":441,"language":412,"meta":413,"style":413},"npx eslint --init\n",[314,443,444],{"__ignoreMap":413},[417,445,446,449,452],{"class":419,"line":420},[417,447,448],{"class":423},"npx",[417,450,451],{"class":427}," eslint",[417,453,454],{"class":431}," --init\n",[155,456,457,458,461],{},"接著就會幫你生成一份基本的設定檔（例如 以下格式的 ",[314,459,460],{},"eslint.config.js","）",[183,463,465],{"id":464},"eslintconfigjs-基本結構範例","eslint.config.js 基本結構範例",[155,467,468],{},"自 ESLint v9 起，官方全面採用 Flat Config 設定格式。設定檔本質上就是一個純 JavaScript 陣列設定檔，可以直接 import 推薦規則與套件進行組合：",[408,470,474],{"className":471,"code":472,"filename":460,"language":473,"meta":413,"style":413},"language-javascript shiki shiki-themes ayu-dark","\u002F\u002F 參考的簡單規範：可依照專案自由增加規則\nimport js from \"@eslint\u002Fjs\";\n\nexport default [\n  \u002F\u002F 1. 引入官方推薦規則集 依照專案自由增加\n  js.configs.recommended,\n  \u002F\u002F 2. 自訂專案規則 依照專案自由增加\n  {\n    files: [\"**\u002F*.{js,mjs,cjs,ts,jsx,tsx}\"],\n    rules: {\n      \"no-unused-vars\": \"warn\", \u002F\u002F 抓出宣告卻未使用的變數\n      \"prefer-const\": \"error\",  \u002F\u002F 建議未重新賦值的變數使用 const\n      \"no-console\": \"warn\",     \u002F\u002F 避免遺漏 console.log ...\n    },\n  },\n  \u002F\u002F 3. 忽略非程式碼相關特定目錄\n  {\n    ignores: [\"dist\u002F**\", \"node_modules\u002F**\", \".output\u002F**\"],\n  },\n];\n","javascript",[314,475,476,482,503,510,522,528,549,555,561,581,592,609,625,640,648,656,662,667,694,701],{"__ignoreMap":413},[417,477,478],{"class":419,"line":420},[417,479,481],{"class":480},"sOSKZ","\u002F\u002F 參考的簡單規範：可依照專案自由增加規則\n",[417,483,485,489,493,496,499],{"class":419,"line":484},2,[417,486,488],{"class":487},"stcy1","import",[417,490,492],{"class":491},"skCYq"," js ",[417,494,495],{"class":487},"from",[417,497,498],{"class":427}," \"@eslint\u002Fjs\"",[417,500,502],{"class":501},"s1auz",";\n",[417,504,506],{"class":419,"line":505},3,[417,507,509],{"emptyLinePlaceholder":508},true,"\n",[417,511,513,516,519],{"class":419,"line":512},4,[417,514,515],{"class":487},"export",[417,517,518],{"class":487}," default",[417,520,521],{"class":491}," [\n",[417,523,525],{"class":419,"line":524},5,[417,526,527],{"class":480},"  \u002F\u002F 1. 引入官方推薦規則集 依照專案自由增加\n",[417,529,531,534,538,541,543,546],{"class":419,"line":530},6,[417,532,533],{"class":491},"  js",[417,535,537],{"class":536},"sh1d5",".",[417,539,540],{"class":491},"configs",[417,542,537],{"class":536},[417,544,545],{"class":491},"recommended",[417,547,548],{"class":501},",\n",[417,550,552],{"class":419,"line":551},7,[417,553,554],{"class":480},"  \u002F\u002F 2. 自訂專案規則 依照專案自由增加\n",[417,556,558],{"class":419,"line":557},8,[417,559,560],{"class":491},"  {\n",[417,562,564,567,570,573,576,579],{"class":419,"line":563},9,[417,565,566],{"class":491},"    files",[417,568,569],{"class":501},":",[417,571,572],{"class":491}," [",[417,574,575],{"class":427},"\"**\u002F*.{js,mjs,cjs,ts,jsx,tsx}\"",[417,577,578],{"class":491},"]",[417,580,548],{"class":501},[417,582,584,587,589],{"class":419,"line":583},10,[417,585,586],{"class":491},"    rules",[417,588,569],{"class":501},[417,590,591],{"class":491}," {\n",[417,593,595,598,600,603,606],{"class":419,"line":594},11,[417,596,597],{"class":427},"      \"no-unused-vars\"",[417,599,569],{"class":501},[417,601,602],{"class":427}," \"warn\"",[417,604,605],{"class":501},",",[417,607,608],{"class":480}," \u002F\u002F 抓出宣告卻未使用的變數\n",[417,610,612,615,617,620,622],{"class":419,"line":611},12,[417,613,614],{"class":427},"      \"prefer-const\"",[417,616,569],{"class":501},[417,618,619],{"class":427}," \"error\"",[417,621,605],{"class":501},[417,623,624],{"class":480},"  \u002F\u002F 建議未重新賦值的變數使用 const\n",[417,626,628,631,633,635,637],{"class":419,"line":627},13,[417,629,630],{"class":427},"      \"no-console\"",[417,632,569],{"class":501},[417,634,602],{"class":427},[417,636,605],{"class":501},[417,638,639],{"class":480},"     \u002F\u002F 避免遺漏 console.log ...\n",[417,641,643,646],{"class":419,"line":642},14,[417,644,645],{"class":491},"    }",[417,647,548],{"class":501},[417,649,651,654],{"class":419,"line":650},15,[417,652,653],{"class":491},"  }",[417,655,548],{"class":501},[417,657,659],{"class":419,"line":658},16,[417,660,661],{"class":480},"  \u002F\u002F 3. 忽略非程式碼相關特定目錄\n",[417,663,665],{"class":419,"line":664},17,[417,666,560],{"class":491},[417,668,670,673,675,677,680,682,685,687,690,692],{"class":419,"line":669},18,[417,671,672],{"class":491},"    ignores",[417,674,569],{"class":501},[417,676,572],{"class":491},[417,678,679],{"class":427},"\"dist\u002F**\"",[417,681,605],{"class":501},[417,683,684],{"class":427}," \"node_modules\u002F**\"",[417,686,605],{"class":501},[417,688,689],{"class":427}," \".output\u002F**\"",[417,691,578],{"class":491},[417,693,548],{"class":501},[417,695,697,699],{"class":419,"line":696},19,[417,698,653],{"class":491},[417,700,548],{"class":501},[417,702,704,706],{"class":419,"line":703},20,[417,705,578],{"class":491},[417,707,502],{"class":501},[183,709,711],{"id":710},"怎麼執行檢查","🔍 怎麼執行檢查？",[204,713,714,736],{},[207,715,716,719,720,723,724,727,728,731,732,735],{},[193,717,718],{},"終端機指令","：設定完成後可以直接在終端機執行 ",[314,721,722],{},"npx eslint .","，或在 ",[314,725,726],{},"package.json"," 加入腳本，透過 ",[314,729,730],{},"npm run lint"," 一鍵檢查全專案，搭配 ",[314,733,734],{},"npx eslint . --fix"," 還能自動修復格式等常見問題。",[207,737,738,741,742],{},[193,739,740],{},"VS Code 擴充套件（強烈推薦）","：安裝「ESLint」外掛即可獲得即時波浪線提示；搭配「存檔自動修復」設定，存檔瞬間就能自動修好格式問題，連指令都省了！\n",[260,743],{"alt":744,"src":745},"ESLint 即時抓出語法瑕疵與未使用的變數","\u002Fimg\u002Fcontent\u002Feslint-code-problems.webp",[159,747,748],{"id":748},"進階規則與社群外掛",[155,750,751],{},"當基礎檢查跑起來後，還能請 AI 針對專案語言與框架加入進階規則；甚至額外安裝熱門的 ESLint 插件（例如無障礙設計檢查、安全性掃描、偵測 AI 生成程式碼安全漏洞等各種不同用途的社群插件），提供更完善的程式品質把關。",[155,753,754],{},[193,755,756],{},"以下有更進階的文章與檔案參考：",[204,758,759,769],{},[207,760,761,762,231],{},"📚 官方參考：更完整的設定與外掛整合方式，可參考 ",[763,764,768],"a",{"href":765,"rel":766},"https:\u002F\u002Feslint.org\u002Fdocs\u002Flatest\u002Fuse\u002Fconfigure\u002Fconfiguration-files",[767],"nofollow","ESLint 官方設定文件 (Configuration Files)",[207,770,771,772],{},"📍延伸閱讀：",[763,773,776],{"href":774,"rel":775},"https:\u002F\u002Fvocus.cc\u002Fnew-editor\u002F6a780161fd89780001952b69",[767],"只有 ESLint 還不夠！我在程式專案加裝了 eslint-plugin-security 安全檢查",[778,779,782],"callout",{"title":780,"type":781},"⚠️ 注意：小心 AI 繞過規則","warning",[155,783,784,785,788],{},"如果你是請 AI 幫忙修 ESLint 報錯時，記得多瞄一眼它的修改方法！AI 有時候為了圖快，可能會採用 ",[314,786,787],{},"\u002F\u002F eslint-disable-next-line"," 跳過規則強行通關。要留意它是真的把問題修好了與這樣做的合理性，還是只是偷偷把警報器給拔掉喔！",[159,790,792],{"id":791},"結語eslint-絕對是寫程式的人必備的工具","結語：ESLint 絕對是寫程式的人必備的工具",[155,794,795],{},"AI 帶來了前所未有的生成速度，但速度越快，專案底層的「品質護欄」就必須越穩固。",[155,797,798],{},"與其每次在程式審查時人工肉眼挑錯、或是任由微小瑕疵污染 AI 的上下文，不如讓 ESLint 在存檔的第一秒就自動擋下 80% 的語法錯誤。",[155,800,801],{},"你自己的專案平常都有配置哪些資安工具或私房 ESLint 規則呢？或者在設定上有遇到什麼眉角？非常歡迎在底下留言交流你的實戰經驗，或者給我一些建議喔！",[155,803,804],{},[260,805],{"alt":806,"src":807},"兩道品質守護流程：第 1 關 ESLint 語法守門，第 2 關 業務邏輯與測試","\u002Fimg\u002Fcontent\u002Feslint-code-review-workflow.webp",[809,810,811],"blockquote",{},[155,812,813],{},"在下一篇文章中，我們將介紹如何搭配 Husky 將這些檢查自動化鎖進 Git 流程中，徹底告別「手動執行容易忘記」的痛點！",[159,815,816],{"id":816},"參考文章",[204,818,819,826],{},[207,820,821],{},[763,822,825],{"href":823,"rel":824},"https:\u002F\u002Fgithub.blog\u002Fchangelog\u002F2025-10-28-new-public-preview-features-in-copilot-code-review-ai-reviews-that-see-the-full-picture\u002F",[767],"Copilot 程式碼審查新增公開預覽功能：AI 審查能夠洞察全局｜2025年10月28日",[207,827,828],{},[763,829,832],{"href":830,"rel":831},"https:\u002F\u002Feslint.org\u002Fblog\u002F2026\u002F01\u002Feslint-2025-year-review\u002F",[767],"ESLint 2025 年回顧 ｜2026年1月16日",[834,835,836],"style",{},"html pre.shiki code .sP_rH, html code.shiki .sP_rH{--shiki-default:#59C2FF}html pre.shiki code .skAsU, html code.shiki .skAsU{--shiki-default:#AAD94C}html pre.shiki code .sHCZS, html code.shiki .sHCZS{--shiki-default:#95E6CB}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sOSKZ, html code.shiki .sOSKZ{--shiki-default:#5A6673;--shiki-default-font-style:italic}html pre.shiki code .stcy1, html code.shiki .stcy1{--shiki-default:#FF8F40}html pre.shiki code .skCYq, html code.shiki .skCYq{--shiki-default:#BFBDB6}html pre.shiki code .s1auz, html code.shiki .s1auz{--shiki-default:#BFBDB6B3}html pre.shiki code .sh1d5, html code.shiki .sh1d5{--shiki-default:#F29668}",{"title":413,"searchDepth":484,"depth":484,"links":838},[839,843,846,847,851,852,853],{"id":161,"depth":484,"text":162,"children":840},[841,842],{"id":185,"depth":505,"text":186},{"id":234,"depth":505,"text":235},{"id":291,"depth":484,"text":292,"children":844},[845],{"id":320,"depth":505,"text":321},{"id":333,"depth":484,"text":334},{"id":392,"depth":484,"text":393,"children":848},[849,850],{"id":464,"depth":505,"text":465},{"id":710,"depth":505,"text":711},{"id":748,"depth":484,"text":748},{"id":791,"depth":484,"text":792},{"id":816,"depth":484,"text":816},"md",{"src":84,"alt":85},{},{"title":77,"description":80},"US7_dMJimRlnqdQPSRP-rG7pj5H_XmONsHk8euitL3E",[860,865],{"title":861,"path":862,"stem":863,"description":864,"children":-1},"在 macOS 上使用命令行工具 tree 一鍵輸出目錄樹狀結構","\u002Fblog\u002Ftech\u002Fcli-tree","blog\u002F4.tech\u002F1.cli-tree","tree 是一個 Unix\u002FLinux 系統的命令行工具，用於以樹狀結構顯示目錄及其內容，在 macOS 上也可以使用，幫助用戶清晰地查看文件夾結構。",{"title":87,"path":88,"stem":89,"description":90,"children":-1},[]]