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

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

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