SCSS-lint入門

SCSS-Lint：保持Sass代碼整潔一致的利器

本文將介紹如何使用SCSS-Lint，一個強大的Ruby gem工具，來維護Sass代碼庫的整潔和一致性。它通過標記可疑用法並確保樣式表易於閱讀來實現這一目標。

核心要點：

• SCSS-Lint是一個強大的Ruby gem工具，通過標記可疑用法和確保樣式表易於閱讀來幫助維護Sass代碼庫的整潔和一致性。使用前需要安裝，命令行工具名為scss-lint。
• SCSS-Lint的配置涉及通過項目根目錄下的YAML文件定義要遵守的規則。此文件通常命名為.scss-lint.yml，包含所有代碼風格檢查配置。可以向SCSS-Lint傳遞--config或--exclude等選項來自定義代碼風格檢查過程。
• 建議在提交到遠程存儲庫之前使用預提交鉤子來檢查代碼，以保持代碼整潔。這可以通過一個輕量級的npm包來設置，該包通過package.json文件提供對Git鉤子的支持。如果在此過程中SCSS-Lint返回錯誤，則提交將中止，需要修復代碼才能通過提交。

編寫可運行的代碼是網站、應用程序或任何軟件開發中最簡單的部分。使整個項目具有可擴展性、經過測試、有適當的文檔記錄且易於貢獻才是困難的部分。

其中一部分是擁有一個既乾淨又一致的代碼庫。乾淨，因為維護醜陋的“奇怪”代碼絕對不是一件令人愉快的事情；一致，因為它使維護代碼庫更容易、更快。如果軟件中所有地方的代碼看起來都一樣，那麼很快就能習慣它的編寫方式。

在Sass方面，您可以採取一些措施來使代碼整潔一致。首先是遵守一些編碼指南，例如CSS指南和Sass指南。另一件事是檢查您的代碼庫。

如果您不熟悉檢查這個詞，以下是維基百科的解釋：

在計算機編程中，“檢查”最初是指一個特定程序，該程序標記C語言源代碼中一些可疑和不可移植的結構（可能是錯誤）。現在，這個術語通常用於指代標記任何計算機語言編寫的軟件中可疑用法的工具。

Sass中可疑的用法是什麼？這取決於您如何定義“可疑”，但更廣泛地說，它可能只是確保樣式表易於閱讀且不復雜的問題。例如，將選擇器嵌套的用法限制為單個級別。

為了檢查我們的Sass代碼庫，有一個非常棒的工具叫做SCSS-Lint。現在讓我們先說壞消息：SCSS-Lint是一個Ruby gem，無論您如何運行它（CLI、Grunt、Gulp……），您都需要預先安裝此gem。好消息是，一些可愛的人們目前正在開發SCSS-Lint的npm包版本，因此我們遲早可能會擺脫這個繁瑣的額外步驟。好的，讓我們開始吧：

$ gem install scss_lint

注意：由於命名原因，gem名為scss_lint，但命令行工具實際上是scss-lint。庫名為SCSS-Lint。因為它還不夠複雜……:)

使用CLI工具入門

SCSS-Lint有很多選項。實際上，如此之多以至於一開始可能會有點不知所措。幸運的是，我們經常使用的選項並不多，所以讓我們來看看這些選項。

通過-c或--config選項，您可以傳遞配置文件的路徑，這將有助於定義要應用於代碼庫的規則。例如：

$ scss-lint . --config .scss-lint.yml

根據您的項目，您可能希望使用-e或--exclude選項從代碼風格檢查過程中排除某些文件或文件夾。例如，您可能不想檢查您的第三方庫或您的node模塊。例如：

$ scss-lint . --exclude ./node_modules/**/*

對於--exclude的更複雜用法，您可以在通過--config傳遞的配置文件中定義它。

還有其他選項，但我感覺這已經足夠入門了。

傳遞給scss-lint的第一個參數是要運行的文件夾。如果省略，則默認為.，即當前文件夾。如果要指定特定文件夾，則可以：

scss-lint ./assets/stylesheets

配置代碼風格檢查器

現在我們準備好檢查我們的Sass代碼庫了，我們需要定義應該遵守哪些規則。 SCSS-Lint有很多代碼風格檢查器（它們被稱為），多到在這裡列出所有檢查器都太長了。我建議您閱讀代碼風格檢查器的文檔。

我們的想法是，您在項目根目錄創建一個YAML文件，其中包含所有代碼風格檢查配置。默認情況下，SCSS-Lint將嘗試在當前文件夾中查找.scss-lint.yml文件，所以我建議您將文件命名為這樣。但是，如果您更喜歡其他名稱，您可以這樣做；只需確保使用--config選項傳遞它即可。

Sass指南為您提供了一個現成的配置文件，供您在項目中使用。如果您想自定義某些內容，請務必仔細查看，但總的來說，它應該可以解決問題。

提交時進行代碼風格檢查

一件很不錯的事情是，在提交時使用預提交鉤子來確保代碼是乾淨的（經過檢查）。我在之前的SitePoint文章中介紹了Sass測試和預提交鉤子。

如果您不確定預提交鉤子是什麼，基本上它是一種機制，旨在在應用提交之前運行一些操作。如果執行的任何操作引發錯誤，則提交將中止。

確保在提交到遠程存儲庫之前檢查代碼，這是Git鉤子的完美用例。在本節中，我們將看到如何以非常簡單的方式設置它。

為此，我們將使用一個非常輕量級的npm包，該包通過package.json文件直接提供對Git鉤子的支持。有很多庫可以做到這一點，但我個人選擇了pre-commit。如下所示：

$ gem install scss_lint

提交時，預提交鉤子會觸發並運行lint npm腳本（與npm run lint完全一樣）。從代碼中可以看到，lint npm腳本運行scss-lint .命令。如果SCSS-Lint返回錯誤，則提交將中止，需要修復代碼才能通過提交。

如果您通過Gulp、Grunt或其他任何工具運行SCSS-Lint，則可以在lint npm腳本中運行任務，而不是直接使用scss-lint二進製文件。同樣，您可以傳遞--config或--exclude等選項。

最終想法

我們總是可以做得更好，但我認為這是SCSS-Lint的一個很好的介紹，我們實際上可以以一種簡單而強大的方式將其用於現有項目和新項目。

伙計們，沒有理由再繼續提交臟代碼了，在推送之前先檢查一下吧！

(此處保留了原文中的FAQ部分，因為其內容與文章主題相關，且改寫後會損失信息)

What is the main purpose of SCSS Lint?

SCSS Lint is a tool that helps developers maintain a consistent coding style in their SCSS files. It analyzes your SCSS code and flags any deviations from the defined coding standards. This tool is particularly useful in large projects where multiple developers are working on the same codebase. By enforcing a consistent coding style, SCSS Lint makes the code easier to read, understand, and maintain.

How do I install SCSS Lint?

SCSS Lint is a Ruby gem, so you need to have Ruby installed on your system to use it. Once you have Ruby, you can install SCSS Lint by running the command gem install scss_lint in your terminal. After the installation is complete , you can run scss-lint from the command line to lint your SCSS files.

How do I configure SCSS Lint?

SCSS Lint can be configured by creating a .scss-lint.yml file in the root directory of your project. This file allows you to enable or disable specific linters, and to customize the behavior of the linters. The configuration file uses the YAML syntax , and each linter has its own set of options that you can configure.

我可以將SCSS絨毛與其他工具一起使用嗎？

是的，SCSS皮棉可以與許多流行的工具和編輯器集成在一起。例如，您可以將其與Grunt和Gulp這樣的任務跑步者或Sublime Text和Atom等代碼編輯使用。這使您可以在開發工作流程的一部分中自動提交SCSS文件。 >

>

SCSS LINT

有多種規則，可以在SCSS代碼中執行良好的實踐。一些共同的規則包括執行一致的凹痕，不遵循尾隨的空格以及在文件末尾需要新線。還有一些更具體的SCSS功能的規則，例如不使用ID選擇器的使用或在規則開放之前需要一個空間。

我如何忽略某些SCSS棉絨警告？

如果您想忽略某些警告，則可以通過在代碼行之前使用

>添加評論來做到這一點。為了重新啟用該規則，您可以添加其他評論

。您還可以使用// scss-lint:disable RuleName>。 // scss-lint:enable RuleName>我可以將SCSS絨毛與CSS文件使用嗎？ // scss-lint:disable all

scss lint是專門為SCSS設計的，SCS是CSS的超集。這意味著它可以說明CSS代碼，但可能不了解某些CSS特定語法。如果您主要與CSS合作，則可能需要考慮使用CSS特定的Linter（例如StyleLint）。

我如何更新SCSS lint？

>您可以通過在終端中運行命令

來更新SCSS皮棉。這將下載並安裝最新版本的寶石。最好讓您的工具保持最新狀態，以便從最新功能和錯誤修復中受益。

>

gem update scss_lint>有幾種SCS棉絨替代品，包括Stylelint，csslint和Sass lint。這些工具具有相似的功能，但是它們可能具有不同的規則或配置選項。您應該選擇最適合您的需求和偏好的工具。

我如何卸載SCSS lint？

如果您不再需要SCSS皮棉，則可以通過在終端中運行命令

來卸載它。這將從您的系統中刪除寶石。如果要以後重新安裝它，則可以通過再次運行安裝命令來進行。

>

以上是SCSS-lint入門的詳細內容。更多資訊請關注PHP中文網其他相關文章！