开源一个代码规范检测工具

最近写了一个代码规范检测工具 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 字段
  }
}
复制代码

---

公众号不定时分享我的在前端方面的学习经验，欢迎关注。