vue+webpack项目实战开发Web前端之路前端开发

如何在Vue+Webpack下配置Stylelint

2017-08-24  本文已影响221人  Smileswlin

Stylelint简介

stylelint是一个基于 Javascript 的代码审查工具,它易于扩展,支持最新的 CSS 语法,也理解类似 CSS 的语法。此外,因为它是基于 JavaScript,所以比起 Ruby 开发的 scss-lint 速度更快。

stylelint 是一个强大和现代的 CSS 审查工具,有助于开发者推行统一的代码规范,避免样式错误。

stylelint 由 PostCSS 提供技术支持,所以它也可以理解 PostCSS 解析的语法,比如 SCSS。

PostCSS 是一个使用 JS 解析样式的插件集合,它可以用来审查 CSS 代码,也可以增强 CSS 的语法(比如变量和混合宏),还支持未来的 CSS 语法、行内图片等等。

PostCSS 的哲学是专注于处理一件事,并做到极致,目前它已经有了 200 多个插件,由于它们都是基于 JavaScript 编写的,所以运行速度非常快。

Stylelint使用

1.安装

npm install -g stylelint --save-dev

2.配置

1.本地安装:

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

2.在项目中添加配置文件"stylelint.config.js"

module.exports = { 
    extends: ["stylelint-config-standard"] 
}

3.添加或修改标准配置中的内容

module.exports = { 
    extends: ["stylelint-config-standard"], 
    rules: { 
        "max-nesting-depth": 2 // 允许嵌套的深度为2
    } 
}

在Vue+Webpack下配置Stylelint

1.Webpack下配置

1.本地安装stylelint-webpack-plugin:

npm install stylelint-webpack-plugin --save-dev

2.打开文件 build/webpack.base.conf.js,并在顶部添加加载插件代码

var StyleLintPlugin = require('stylelint-webpack-plugin')

在plugins数组下添加以下代码:

plugins: [
    //... 
    new StyleLintPlugin({ 
        // 正则匹配想要lint监测的文件
        files: ['src/**/*.vue', 'src/assets/styles/*.l?(e|c)ss'] 
    }),
    //... 
],

2.若在Vue文件下进行stylelint校验,则需要:

1.本地安装 stylelint-processor-html:

npm install stylelint-processor-html --save-dev

2.修改配置文件"stylelint.config.js"

module.exports = { 
    processors: ["stylelint-processor-html"], 
    extends: ["stylelint-config-standard"], 
    rules: {
    } 
}

这样,当项目启动时,就会对vue文件下的css,或者目录下的css文件进行stylelint校验了

Stylelint 规则

根据自己项目规范,配置需要的规则。以下是在stylelint-config-standard基础上,根据自身项目需求修改出的一些规则:

module.exports = {
  processors: ["stylelint-processor-html"],
  extends: ["stylelint-config-standard"],
  rules: {
    "selector-class-pattern": "^[a-z]+([a-z0-9]?|[a-z0-9\\-]*[a-z0-9])$", // 限制选择器名称写法.
    "max-nesting-depth": 2, // 允许嵌套的深度为2
    "number-leading-zero": "never",
    "function-url-quotes": "always", // 地址一定要写引号
    "font-family-name-quotes": "always-where-recommended", // 字体系列中命名时带引号
    "value-list-comma-newline-after": "always-multi-line",// 在值列表的逗号后指定一个换行符或禁止留有空格。
    "value-keyword-case": "lower", // 属性值小写
    "no-empty-source": null,
    "at-rule-no-unknown": null
  }
};

具体的规则以及例子可以查看以下文档:
stylelint 的官方配置文档Example config

参考:
使用stylelint对CSS/Sass做代码审查
A nice way to lint .vue files with Stylelint?
Linting CSS in Vue files

原文:
如何在Vue+Webpack下配置Stylelint

上一篇下一篇

猜你喜欢

热点阅读