最近寫了一個程式碼規範檢測工具 code-lint （借鑑了前公司部門前端大佬開發的一個工具），能夠通過 npm 直接安裝和一份配置檔案實現對專案的程式碼規範檢測。

為什麼要寫這樣的一個工具呢？

一是希望能夠避免在多個專案中重複地去做程式碼規範配置；

二是希望能夠使不同技術棧的專案都使用同一份程式碼規範配置；

在這個工具中的文件規範部分我參考了顏海鏡大神的《8102年如何寫一個現代的JavaScript庫》這篇博文中所講的開源庫的規範，我覺得這篇博文對於想要開發並開源一個執行在瀏覽器端的工具庫的童鞋有很大的啟示意義和借鑑作用（我才不會說我以後也要借鑑這個庫來開發工具庫呢）。

那麼，回到正題

這個專案的地址是：github.com/ttsy/code-l…

就讓我們來看看這個程式碼規範檢測工具是怎樣的吧。

特性

• 基於 eslint 進行 js 程式碼規範檢測
• 基於 stylelint 進行 css 程式碼規範檢測
• 基於 stylelint-scss 對 scss 程式碼更加友好的規範檢測
• 定向檢測/修復檔案
• localdiff 檢測/修復檔案（基於 git）

介紹

目前，code-lint 只實現了對 js 以及 css 程式碼規範的檢測，js 程式碼規範檢測是基於 eslint 的，而 css 程式碼規範檢測則基於 stylelint，由於配置了 stylelint-scss 外掛，所以對 scss 程式碼的規範檢測會更加友好。

js 程式碼檢測僅包含字尾為 .html、.vue、.js 的檔案，而 css 程式碼檢測僅包含字尾為 .html、.vue、.css、.scss、less 的檔案。

目前該工具包含了定向檢測/修復以及 localdiff 檢測/修復功能。定向檢測/修復僅檢測/修復配置檔案中所指定的檔案；而 localdiff 檢測/修復則是檢測/修復當前 git 倉庫中發生過修改的檔案，該功能是基於 git 的。

使用指南

通過 npm 下載安裝

npm install code-lint --save-dev
複製程式碼

定向檢測/修復

檢測配置檔案中配置的檔案

• 在根目錄 package.json 檔案中加入檢測命令

"scripts": {
  "lint": "code-lint",
  "lint-fix": "code-lint --fix",
}
複製程式碼

• 在根目錄中加入配置檔案，檔名為 lint.config.json，檔案格式示例內容如下

{
  "lintTargetFiles": [
    "**/*.html",
    "**/*.vue",
    "**/*.js",
    "**/*.css",
    "**/*.scss",
    "**/*.less",
    "!**/ignore/*.js"
  ]
}
複製程式碼

lintTargetFiles 為檢測目標檔案，使用 glob 語法，在前面加上 ! 則表示忽略檢測的檔案。

• 執行檢測命令檢測或修復

npm run lint
或
npm run lint-fix
複製程式碼

localdiff 檢測/修復

只檢測本地 diff 的檔案（包含 untracked 檔案）。diff 檢測允許沒有配置檔案 lint.config.json。

• 在根目錄 package.json 檔案中加入檢測命令

"scripts": {
  "lint-localdiff": "code-lint --localdiff",
  "lint-localdiff-fix":"code-lint --localdiff --fix"
}
複製程式碼

• 執行檢測命令檢測或修復

npm run lint-localdiff
或
npm run lint-localdiff-fix
複製程式碼

檢測規則

js 檢測規則繼承 eslint-config-standard 中的規則，並可根據配置檔案中 eslint.rules 引數新增檢測規則。

css 檢測規則繼承 stylelint-config-standard 中的規則，可根據配置檔案中 stylelint.rules 引數新增檢測規則。

預設配置

lint.config.json 配置檔案中，除了 lintTargetFiles 引數外，還可以通過配置其它引數決定僅檢測 js 或者 css 以及新增自己的檢測規則，預設配置如下

module.exports = {
  "lintTargetFiles": [], // 檢測目標檔案（可選）
  "lintType": { // 檢測型別（可選）
    "js": true,
    "css": true
  },
  "eslint": { // eslint 配置規則（可選）
    "globals": { // 同 eslint globals 欄位
      '$': false,
      'jQuery': false
    },
    "rules": {} // 同 eslint rules 欄位
  },
  "stylelint": { // stylelint 配置規則（可選）
    "rules": {} // 同 stylelint rules 欄位
  }
}
複製程式碼

公眾號不定時分享個人在前端方面的學習經驗，歡迎關注。