ESLint

這篇文章將解釋如何設定一個讓 React 開發容易且簡潔的 VS Code 環境，並且擁有程式碼檢查的提示和保存時自動格式化的功能。 ESLint 首先，我們將安裝 ESLint。ESLint 是一個非常棒的工具，可以幫助您保持程式碼整潔並符合規範。 使用 ESLint 延伸套件 安裝 ESLint 到 VS Code 的擴充套件商店。 然後，在終端機中執行以下 Yarn 命令（如果尚未安裝 Yarn，請參考我的教學鏈接獲取簡短的指南）： yarn add babel-eslint yarn add eslint-config-airbnb yarn add eslint-plugin-jsx-a11y yarn add eslint-plugin-react 接下來，在專案的根目錄中建立一個 .eslintrc.json 檔案，並添加以下內容以設定適用於 React 開發的基本 ESLint 配置，包括 JSX 支援： { "parser": "babel-eslint", "extends": "airbnb", "plugins": ["react", "jsx-a11y", "import"] } Prettier 接下來，我們建議安裝 Prettier。Prettier 是一個 JavaScript 的文風一致性格式化工具。它是一個很棒的工具，可以幫助您統一程式碼風格，即使只有您獨自開發也非常有用。在團隊合作中，它更是非常有用，可以避免程式碼風格的差異。請按照 Prettier 建議的方式來使用。 您可以使用 Prettier 的 VS Code 擴充套件 來安裝 Prettier，使用 npm 命令：...

Prettier 是一個主觀的代碼格式化工具。它是保持您和團隊代碼格式一致的絕佳方式，並且支援許多不同的語言。 Prettier 簡介 選項較少 與 ESLint 的區別 安裝 Prettier 簡單入門 Prettier 簡介 Prettier 是一個主觀的代碼格式化工具。 它可以直接支援許多不同的語法，包括： JavaScript Flow, TypeScript CSS, SCSS, Less JSX GraphQL JSON Markdown 而通過使用 插件，您還可以在Python、PHP、Swift、Ruby、Java等語言中使用它。 它與許多常用的編輯器集成，包括 VS Code、Sublime Text、Atom 等等。 Prettier 在開發者中非常受歡迎，截至 2018 年 2 月已下載超過 350 萬次。 了解更多有關 Prettier 的重要連結： https://prettier.io/ https://github.com/prettier/prettier https://www.npmjs.com/package/prettier 選項較少 最近我學習了 Go 語言，其中最棒的事情之一就是 gofmt，這是一個官方工具，可以根據常見的標準自動為您格式化代碼。 95% 的 Go 代碼（估計數據）看起來都是一模一樣的，因為這個工具可以輕鬆地強制執行，並且由於樣式已經由 Go 維護者為您定義，所以您更有可能適應該標準，而不是堅持使用自己的風格，例如使用制表符還是空格，或者在哪裡放置左大括號。 這聽起來可能有些局限性，但它實際上非常強大。所有的 Go 代碼都是一模一樣的。 Prettier 是其它語言世界中的 gofmt。 它幾乎沒有什麼選項，大部分的決策已經為您定好，所以您可以停止就風格和細節問題進行爭論，並專注於寫代碼。 與 ESLint 的區別 ESLint 是一個檢查工具，它不僅僅可以格式化代碼，而且還能通過靜態分析程式碼來檢測錯誤。...

一篇關於如何禁用 ESLint 規則的快速教程 您的工具可能會自動設置no-debugger和no-console規則，但您可以做些什麼來禁用它們呢？ 在開發模式中，瀏覽器調試工具和Console API的訪問是必不可少的，雖然在生產代碼中可能有正當的理由禁用它們。 您可以通過添加如下幾行代碼來禁用一個或多個特定的ESLint規則： /* eslint-disable no-debugger, no-console */ console.log('test') 或者您可以在一個區塊中禁用它，在之後重新啟用： /* eslint-disable no-debugger, no-console */ console.log('test') /* eslint-enable no-alert, no-console */ 或者您可以在特定的行中禁用該規則： console.log('test') // eslint-disable-line no-console debugger // eslint-disable-line no-debugger alert('test') // eslint-disable-line no-alert 另一種方法是在項目全局禁用該規則。 在package.json中，您可以找到eslintConfig規則，裡面可能已經有一些內容，像這樣： "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, 在這裡，您可以禁用您想禁用的規則： "eslintConfig": { "extends": [ "react-app", "react-app/jest" ], "rules": { "no-unused-vars": "off" } },

學習最受歡迎的 JavaScript Linter 基礎知識，它可以協助你的程式碼遵守特定的語法規範，檢查程式碼中是否存在潛在問題的來源，以及程式碼是否符合你或你的團隊所定義的一套標準。 什麼是 Linter？ ESLint 全域安裝 ESLint 本地安裝 ESLint 在你喜愛的編輯器中使用 ESLint 常見的 ESLint 設定 Airbnb 程式碼風格指南 React 使用特定版本的 ECMAScript 強制使用嚴格模式 更進階的規則 在特定行上禁用規則 ESLint 是一個 JavaScript Linter。 什麼是 Linter？ 好問題！Linter 是一種用於檢查程式碼中問題的工具。 運行 Linter 可以告訴你許多事情： 程式碼是否遵從特定的語法規範 程式碼是否包含可能的問題來源 程式碼是否符合你或你的團隊所定義的一套標準 它會提出警告，你或你的工具可以分析這些警告並提供可行的數據，以改進程式碼。 ESLint ESLint 是用於 JavaScript 程式語言的 Linter，使用 Node.js 撰寫。 它非常有用，因為 JavaScript 是一種解釋語言，並且許多錯誤只有在運行時才能發現。 ESLint 將幫助你捕捉這些錯誤。你問的是哪些錯誤呢？ 避免在 for 迴圈條件中出現無窮迴圈 確保所有 getter 方法返回某些值 不允許使用 console.log（或類似）語句 檢查 switch 中的重複 case 檢查無法訪問的程式碼 檢查 JSDoc 的有效性 還有更多！完整列表請參閱 https://eslint.org/docs/rules/...