開源一個代碼規範檢測工具

最近寫了一個代碼規範檢測工具 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.config.json，文件格式示例內容以下

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

lintTargetFiles 爲檢測目標文件，使用 glob 語法。

• 運行檢測命令檢測或

npm run lint
複製代碼

localdiff 檢測

只檢測本地 diff 的文件（包含 untracked 文件）。diff 檢測容許沒有配置文件 lint.config.json。

• 在根目錄 package.json 文件中加入檢測命令

"scripts": {
  "lint-localdiff": "code-lint --localdiff"
}
複製代碼

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

npm run lint-localdiff
複製代碼

檢測規則

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 字段
  }
}
複製代碼

---

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