stylelint 使用指南及发布自定义 NPM Package

一、概述

stylelint 自 2015 年诞生以来，已被越来越多项目用于规范 CSS 及其预处理语言编写（如 bootstrap，ant-design 等） 。
作为一个强大、现代的代码检查工具，在项目中能避免样式代码错误以及强制执行代码约定风格，具体内容可参考印记中文团队维护的 stylelint 中文网。

二、在 Vue 项目中使用 Stylelint

1、安装 stylelint、stylelint-order、stylelint-config-standard

其中，stylelint 是运行工具；stylelint-order 是 CSS 属性排序插件；stylelint-config-standard 是官方维护的标准 stylelint 规则配置。

npm install stylelint stylelint-order stylelint-config-standard --save-dev

2、在根目录创建 .stylelintrc.js 配置文件（若需补充规则，则在 rules 对象中继续添加）

module.exports = {
  root: true,
  extends: "stylelint-config-standard",
  plugins: ["stylelint-order"],
  rules: {
    "order/order": [
      "declarations",
      "custom-properties",
      "dollar-variables",
      "rules",
      "at-rules"
    ],
    "order/properties-order": [
            'position',
      'top',
      'right',
      'bottom',
      'left',
      'z-index',
      'box-sizing',
      'display',
      'flex',
      'flex-align',
      'flex-basis',
      'flex-direction',
      'flex-wrap',
      'flex-flow',
      'flex-shrink',
      'flex-grow',
      'flex-order',
      'flex-pack',
      'align-content',
      'align-items',
      'align-self',
      'justify-content',
      'order',
      'float',
      'width',
      'min-width',
      'max-width',
      'height',
      'min-height',
      'max-height',
      'padding',
      'padding-top',
      'padding-right',
      'padding-bottom',
      'padding-left',
      'margin',
      'margin-top',
      'margin-right',
      'margin-bottom',
      'margin-left',
      'overflow',
      'overflow-x',
      'overflow-y',
      '-webkit-overflow-scrolling',
      '-ms-overflow-x',
      '-ms-overflow-y',
      '-ms-overflow-style',
      'columns',
      'column-count',
      'column-fill',
      'column-gap',
      'column-rule',
      'column-rule-width',
      'column-rule-style',
      'column-rule-color',
      'column-span',
      'column-width',
      'orphans',
      'widows',
      'clip',
      'clear',
      'font',
      'font-family',
      'font-size',
      'font-style',
      'font-weight',
      'font-variant',
      'font-size-adjust',
      'font-stretch',
      'font-effect',
      'font-emphasize',
      'font-emphasize-position',
      'font-emphasize-style',
      'font-smooth',
      'src',
      'hyphens',
      'line-height',
      'color',
      'text-align',
      'text-align-last',
      'text-emphasis',
      'text-emphasis-color',
      'text-emphasis-style',
      'text-emphasis-position',
      'text-decoration',
      'text-indent',
      'text-justify',
      'text-outline',
      '-ms-text-overflow',
      'text-overflow',
      'text-overflow-ellipsis',
      'text-overflow-mode',
      'text-shadow',
      'text-transform',
      'text-wrap',
      '-webkit-text-size-adjust',
      '-ms-text-size-adjust',
      'letter-spacing',
      '-ms-word-break',
      'word-break',
      'word-spacing',
      '-ms-word-wrap',
      'word-wrap',
      'overflow-wrap',
      'tab-size',
      'white-space',
      'vertical-align',
      'direction',
      'unicode-bidi',
      'list-style',
      'list-style-position',
      'list-style-type',
      'list-style-image',
      'pointer-events',
      '-ms-touch-action',
      'touch-action',
      'cursor',
      'visibility',
      'zoom',
      'table-layout',
      'empty-cells',
      'caption-side',
      'border-spacing',
      'border-collapse',
      'content',
      'quotes',
      'counter-reset',
      'counter-increment',
      'resize',
      'user-select',
      'nav-index',
      'nav-up',
      'nav-right',
      'nav-down',
      'nav-left',
      'background',
      'background-color',
      'background-image',
      'filter',
      'background-repeat',
      'background-attachment',
      'background-position',
      'background-position-x',
      'background-position-y',
      'background-clip',
      'background-origin',
      'background-size',
      'border',
      'border-color',
      'border-style',
      'border-width',
      'border-top',
      'border-top-color',
      'border-top-style',
      'border-top-width',
      'border-right',
      'border-right-color',
      'border-right-style',
      'border-right-width',
      'border-bottom',
      'border-bottom-color',
      'border-bottom-style',
      'border-bottom-width',
      'border-left',
      'border-left-color',
      'border-left-style',
      'border-left-width',
      'border-radius',
      'border-top-left-radius',
      'border-top-right-radius',
      'border-bottom-right-radius',
      'border-bottom-left-radius',
      'border-image',
      'border-image-source',
      'border-image-slice',
      'border-image-width',
      'border-image-outset',
      'border-image-repeat',
      'outline',
      'outline-width',
      'outline-style',
      'outline-color',
      'outline-offset',
      'box-shadow',
      'opacity',
      '-ms-interpolation-mode',
      'page-break-after',
      'page-break-before',
      'page-break-inside',
      'transition',
      'transition-delay',
      'transition-timing-function',
      'transition-duration',
      'transition-property',
      'transform',
      'transform-origin',
      'perspective',
      'appearance',
      'animation',
      'animation-name',
      'animation-duration',
      'animation-play-state',
      'animation-timing-function',
      'animation-delay',
      'animation-iteration-count',
      'animation-direction',
      'animation-fill-mode',
      'fill',
      'stroke'
    ]
  }
}

3、使用 stylelint 验证 CSS 代码，如检查 src 目录下所有 vue 文件

4、为在编码过程中实现保存即检测和自动修复 CSS 代码，仍需安装 stylelint 插件和进行 setting 配置（以 VS Code 为例）

5、特殊情况下，单独禁用 stylelint 校验

三、封装并发布自定义规则配置 package

在日常工作中，常需要开发和维护多个项目，而 stylelint 涉及的配置和插件仍然过于繁多。为了业务项目中不出现过多配置，不妨将 stylelint 插件及相关共用配置封装成 npm 包进行使用。

本人基于 bootstrap 团队的 stylelint 配置 ，以实用性、灵活性为主进行适当调整，整理和维护自己的一份配置 stylelint-config-qiuzi。以下演示以此为基础封装 npm package：

1、克隆 stylelint-config-qiuzi 项目并安装依赖包

// 克隆
git clone git@github.com:qiuziGirl/stylelint-config-qiuzi.git

// 安装依赖
npm install

2、修改 package.json 相关配置，如 name，version，author，repository 等描述

3、根据需求调整校验规则，并在 example/index.scss 文件编写样式进行测试

4、登录 npm 账号（注：需确保 Node 镜像源为 npm，本人已使用 nrm 管理镜像源）

5、发布 npm 包并查看发布情况

6、在 vue 项目中使用自定义配置包

安装 stylelint，stylelint-config-qiuzi-test

npm install stylelint stylelint-config-qiuzi-test --save-dev

在 stylelintrc.js 文件配置包引用

module.exports = {
  root: true,
  extends: ['stylelint-config-qiuzi-test/scss']
}