JavaScript >> Javascript 文檔 >  >> JavaScript

介紹 ESLint

很久以前,JSLint 是 JavaScript linting 技術中最先進的。然後 JSHint 作為一個分支出現並由於增加了靈活性而被接管。我歡迎 JSHint 作為我選擇的 linter 並在任何地方使用它,愉快地提交補丁並根據項目自定義要應用的規則。在某些時候,我也開始對 JSHint 感到窒息和沮喪。沒有簡單的方法可以添加額外的規則或創建您自己的可能特定於項目的規則。

CSS Lint 的設計決策之一是讓所有規則都可插入。每個規則都是一個獨立的文件,附帶一個獨立的測試文件。通過這種方式,很容易在任何時間點合併新規則並將它們編譯成最終的分佈式版本。我真的希望能夠為 JavaScript 做同樣的事情,甚至更多。

在與 Anton 討論了 JSHint 的可能性之後,我們都得出了這樣的結論:不可能做我想做的事。我真的想要一個 AST 來評估上下文並能夠隨時動態插入新規則,包括運行時。

這是 ESLint

所以我有點遺憾地介紹了 ESLint。 ESLint 是一個建立在 Esprima 之上的 JavaScript linting 工具。該項目的目標是創建一個所有規則都可插入的 linting 工具。這是通過每個文件有一個規則並允許每個規則在它想要的點檢查 AST 來實現的。此外,還有一些關鍵功能:

  • 通過檢查 AST 輕鬆創建和合併新規則。
  • 規則可以在運行時動態加載,因此如果您有不適合包含在工具中的公司或項目特定規則,您仍然可以輕鬆使用它們。
  • 所有規則都以相同的方式打開和關閉,避免了 JSLint 使用並由 JSHint 繼承的混亂規則配置。
  • 可以將各個規則配置為警告、錯誤或禁用。錯誤使 ESLint 返回非零錯誤代碼,而警告的退出代碼為零。
  • 結果的輸出格式也是完全可插入的。現在只有一個格式化程序,但您可以輕鬆創建更多。這些最終也將能夠在運行時動態加載。

ESLint 與 JSHint 的區別

儘管目標相似,但 ESLint 和 JSHint 有一些非常具體的區別。首先,JSHint 使用漸進式解析器,在此過程中發現錯誤。 ESLint 使用 Esprima,因此先進行解析,然後再應用規則。這意味著 JSHint 將打印出警告,包括語法錯誤,其中 ESLint 將僅顯示語法錯誤。這使得 JSHint 更適合在編輯器中使用。

ESLint 更適合用於構建系統和作為通用命令行實用程序。它適用於預提交掛鉤。

ESLint 是一個兩遍實用程序。第一遍由 Esprima 完成以解析 JavaScript,第二遍是遍歷 AST 以應用某些規則。 JSHint 是一個單通道實用程序,這意味著它通常會更快。

ESLint 嚴格來說是一個 Node.js 實用程序。 JSHint 可以在大多數 JavaScript 運行時上運行,包括 Rhino。

你可以幫忙

該項目處於足夠好的狀態,我現在可以開始尋求其他人的貢獻。你可以做什麼:

  • 在 wiki 上編寫文檔
  • 創建新的格式化程序
  • 創建新規則(我想獲得與重要的 JSHint 規則相同的功能)
  • 解決一些未解決的問題
  • 你想要的任何其他東西

我希望 ESLint 的開發盡可能的開放,並接受盡可能多的貢獻。我已經開始編寫開發者指南來幫助人們入門,但該項目真正需要的是來自社區的貢獻。

我對這個項目很興奮,因為我相信它提供了 JavaScript 工具鏈中缺少的一個關鍵部分。以標準方式為您的項目創建任意規則的能力是一種強大的能力,可以實現大量的可能性。我已經計劃將其納入 Box 的 JavaScript 工作流程中,我希望其他人也能這樣做。


Tutorial JavaScript 教程
  1. 編碼提示。第三部分:用戶輸入

  2. 使用 Laravel 和 Vue 構建報價應用程序:第 2 部分

  3. 如何在 grecaptcha.execute() 之後等到用戶完成任務? reCAPTCHA v2 不可見

  4. 我可以定位一個特定的 Flexbox 容器並用另一個文件的內容填充它嗎?

  5. 如何獲取當前javascript文件名的絕對路徑

  6. 中級 JavaScript 實踐課程 - Codecademy PRO 版

  7. Fetch API 是 AJAX 的新舊版本

  1. 使用 slick.js 的可過濾圖庫

  2. 為什麼我們要放棄 REST 並實施 GraphQL

  3. 有沒有辦法在 ReactJS 中插入帶有變量值的樣式表?

  4. Javascript 後端框架。

  5. 教程:如何將我的 React 應用程序部署到 Heroku 上的生產環境

  6. Javascript 中最常用的 10 種數組方法

  7. jQuery 插件:預加載圖像

  1. LeetCode - 旋轉圖像

  2. 如何在 JavaScript 中構建消息傳遞狀態

  3. 構建可訪問的模態

  4. 用甜甜圈和餅圖顯示數據——React