lint

lint

電腦科學中,lint 是一種工具程式的名稱,它用來標記原始碼中,某些可疑的、不具結構性的段落。 就是他覺得你語法不符合規則,就會提醒你的工具。這個規則通常是可以自訂的。

stylelint 使用

  • 安裝 CLI 指令集
    • 當要使用的時候用 cli 去操作編譯
    • 像下面的幾種方式去加入 cli
  • 設定配置文件 lint 的判斷依據,是根據它的 configuration 物件 (組態物件、配置檔物件)
    • 這個物件會存在一些特定的地方,下面介紹。若安裝後沒看到,有時是要自己手動建立。
    • configuration 檔要放在哪裡,lint 會根據一個 cosmiconfig 的方式來尋找:自動搜尋離「目標檔案」最接近的那個 configuration 檔作為執行規則。

CLI 指令集安裝方式

  • via the stylelint CLI 作為一個獨立指令集,全域安裝在本機。 安裝後,到專案中,以指令執行,操作專案中的檔案。 他會根據距離檔案最近的 stylelint 設定檔 (configuration object) 做規則。

  • via a plugin for your text editor (atom, vscode etc) 編輯器外掛安裝,通常可以在編輯器的外掛中找到。 可能會需要在編輯器上做一些偏好設置。

    文件說明頁面,列出一些補充工具, 這些補充工具是由各使用者社群的使用者開發維護。 它們就像 stylelint 可以用 cli 或編輯器擴衝安裝一樣,也可以以各種模式安裝操作。 所以它們也可以加入編輯器來與 stylelint 結合。 例如加裝自動修正外掛,編輯器可以知道你存檔時機, 在打字時執行 stylelint 監測錯誤、存檔時執行自動修正外掛。

  • via a plugin for your build tool (webpack, gulp etc) 管理工具的外掛,類似編輯器外掛,只是使用時機是安排在自動化的工作流程中執行。

  • via the stylelint Node API 以 nodrAPI 的模組方式使用,待研究

  • via the stylelint PostCSS plugin 放在 postCSS 流程中自動偵測,待研究

cosmiconfig 檔案

尋找 cosmiconfig:他會從當前工作目錄開始,按以下順序查找可能的來源:

  • 放在 package.json“屬性 (key)”(在目錄的任何地方) e.g. 一個 key 為 "soursocks" 的屬性
  • 放在 JSON 或 YAML 格式的 rc 文件”(在目錄的任何地方)e.g. .soursocksrc
  • 放在 .config.js 格式的 “CommonJS 模塊”(在目錄的任何地方)e.g. soursocks.config.js

configuration 物件的屬性
( 根據 stylelint 說明中 ) configuration object 有這些屬性:

{
    "rules": "要檢查的內容的規則",
    "extends": "可以擴展現有配置(例如 第三方配置)",
    "plugins": " 由官方組織或社群構建的外掛,支持方法論,工具集",
    "processors": "(還不清楚)processors 是掛鉤到 lint 流程中的函數",
    "ignoreFiles": "(還不清楚)提供 glob 或 glob array 來忽略特定文件",
    "defaultSeverity": "預設嚴重級別,有:`warning`、`error`。所有的規則都沒有 '指定自己的嚴重程度' 的選項"
}

lint 是 CLI 工具,報錯訊息也在 CLI 中顯示。 如果搭配自動化流程工具,設定為 "warning" 就不會中斷自動化流程;"error" 通常會是中斷、跳出流程。


ESLint

https://eslint.org/
是一個 JavaScript 的編碼風格除錯工具,有幾種主流的標準可以選擇,也能自訂。

ESLint 配置選項

該擴展提供了下面這些變數給配置:

  • eslint.enable: enable 啟用 / disabl 禁用 eslint. 預設 enabled.

  • eslint.provideLintTask: 該擴展是否提供一個 Lint Task 來檢測整個工作區資料夾。

  • eslint.packageManager: 控制套件管理器能被使用,來解析 ESLint 函式庫。這只會會影響到在「全域解析」的 ESLint 函式庫。有效值是 "npm" 或 "yarn"。

  • eslint.options: 用來設定 ESLint 如何開始被使用 ESLint CLI Engine API. 默認為一個空的選項集。 一個範例為指向一個自定義的 .eslintrc.json 檔案:

    {
        "eslint.options": { "configFile": "C:/mydirectory/.eslintrc.json" }
    }
    
  • eslint.run - run the linter onSave or onType, 預設是 onType.

  • eslint.autoFixOnSave - 啟用在儲存時自動修正。 請注意儲存時自動修正只有在 VS Code 的 files.autoSaveoffonFocusChangeonWindowChange 時可作用;他不會作用在 afterDelay 設定中。
  • eslint.nodePath - 若一個已安裝的 ESLint package 不能被刪除的狀況,例如 /myGlobalNodePackages/node_modules,使用這個設定。
  • eslint.validate - 一個語言定義 Array,指定要驗證的文件。例如
        "eslint.validate": [ "javascript", "javascriptreact", "html" ]
    
    若設定遺失,他預設是 ["javascript", "javascriptreact"]. 你也可以控制,哪個擴展應該提供自動修正的支援。為此,只需在 validate 設置中使用 languageautoFix 屬性,來提供物件字面值,而不是簡單的string。例如:
      "eslint.validate": [ "javascript", "javascriptreact", { "language": "html", "autoFix": true } ]
    
  • eslint.workingDirectories 這是一個用於 working directories 的 Array。ESLint 會解析相對於工作目錄的配置文件。 這個新設定,會允許使用者控制「哪些文件」要用在「該工作目錄」。 可考慮下列選項:
    client/
    .eslintignore
    .eslintrc.json
    client.js
    server/
    .eslintignore
    .eslintrc.json
    server.js
    
    設定:
    "eslint.workingDirectories": [
        "./client", "./server"
    ]
    
    意思是:當 server 目錄作為當前工作目錄,將驗證 server 目錄內的文件;client 端目錄文件也是。
    如果設定被省略,工作目錄就是工作空間資料夾。

results for ""

    No results matching ""