引入stylelint对CSS/Sass做代码审查

klinson 发布于2019-08-29 12:14 / 1001人阅读

摘要：规范越早引入越好，规范的约束永远不嫌多。是什么是一个基于的代码审查工具，它易于扩展，支持最新的语法，也理解类似的语法。是一个强大和现代的审查工具，有助于开发者推行统一的代码规范，避免样式错误。

规范越早引入越好，规范的约束永远不嫌多。

stylelint是什么？

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

stylelint 是一个强大和现代的 CSS 审查工具，有助于开发者推行统一的代码规范，避免样式错误。stylelint 由 PostCSS 提供技术支持，所以它也可以理解 PostCSS 解析的语法，比如 SCSS。

PostCSS 是一个使用 JS 解析样式的插件集合，它可以用来审查 CSS 代码，也可以增强 CSS 的语法（比如变量和混合宏），还支持未来的 CSS 语法、行内图片等等。正因为PostCSS解析器，因此stylelint支持SCSS，Less以及新SugarSS。如果你想要实现另外一个自定义语法的支持，你可以通过PostLess得以实现！

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

使用方法

上面copy写了一堆废话，其实不用我多言，既然你已经知道了stylelint那说明你已经遇到了css/scss不规范的难题且已经发现了stylelint的优点。下面，我们直接进入正题。

安装

npm install stylelint

引入

在package.json里面加入以下配置（参考），其中rules`里面是我自己加入的一些配置。

"stylelint": {
    "extends": "stylelint-config-standard",
    "rules": {
      "string-quotes": "single",
      "property-no-unknown": [
        true,
        {
          "ignoreProperties": [
            "composes"
          ]
        }
      ],
      "selector-pseudo-class-no-unknown": [
        true,
        {
          "ignorePseudoClasses": [
            "global"
          ]
        }
      ]
    }
  }

在这里要重点说一下stylelint-config-standard，该配置是 stylelint 的官方推荐配置，自己基于它来拓展的话会事半功倍。

在代码commit时校验

我们需要的结果是，在代码commit时进行css/scss校验，不符合格式的代码禁止提交。

这里，我们需要借助husky来配置github hooks。

npm install husky --save-dev

在package.json里面加入：

// Edit package.json
{
  "scripts": {
    "precommit": "stylelint css/*.scss",
    "...": "..."
  }
}

其中后面的目录可以自己修改，这样，就实现了在commit前进行css/scss代码校验。

插件

光在代码提交前校验还是不够的，我们追求的是，在写了不符合规范的css/scss代码后，直接在编辑器中编辑器中提示。

WebStorm

WebStorm天然支持stylelint，只需在设置里面开启并配置安装包path即可。

sublime

SublimeLinter-contrib-stylelint

Atom

linter-stylelint

GPU云服务器云服务器代码审查 php代码审查工具 stylelint 对php代码进行编码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111770.html

如何为你的 Vue 项目添加配置 Stylelint

摘要：如何为你的项目添加配置如何为你的项目添加配置现在已经是年了，网上许多教程和分享帖都已经过期，照着他们的步骤来会踩一些坑，如已经不再维护，以及之后文件只剩下部分等。如有疑问或授权协商请与我联系。如何为你的 Vue 项目添加配置 Stylelint 现在已经是 9102 年了，网上许多教程和分享帖都已经过期，照着他们的步骤来会踩一些坑，如 stylelint-processor-html 已经不...

番茄西红柿 2019-04-23 11:56 评论0 收藏0
【Cute-Webpack】Webpack4 入门手册（共 18 章）

摘要：介绍背景最近和部门老大，一起在研究团队前端新手村的建设，目的在于帮助新人快速了解和融入公司团队，帮助零基础新人学习和入门前端开发并且达到公司业务开发水平。 showImg(https://segmentfault.com/img/remote/1460000020063710?w=1300&h=646); 介绍 1. 背景最近和部门老大，一起在研究团队【EFT - 前端新手村】的建设...

AlanKeene 2019-08-26 10:45 评论0 收藏0
从 0 到 1 再到 100, 搭建、编写、构建一个前端项目

摘要：从到再到搭建编写构建一个前端项目选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种选择现成的项目模板自己搭建项目骨架。使用版本控制系统管理源代码项目搭建好后，需要一个版本控制系统来管理源代码。从 0 到 1 再到 100, 搭建、编写、构建一个前端项目 1. 选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种：选择现成的项目模板、自己搭建项目骨架。 ...

call_me_R 2019-08-23 13:43 评论0 收藏0
从 0 到 1 再到 100, 搭建、编写、构建一个前端项目

摘要：从到再到搭建编写构建一个前端项目选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种选择现成的项目模板自己搭建项目骨架。使用版本控制系统管理源代码项目搭建好后，需要一个版本控制系统来管理源代码。从 0 到 1 再到 100, 搭建、编写、构建一个前端项目 1. 选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种：选择现成的项目模板、自己搭建项目骨架。 ...

wzyplus 2019-08-02 12:08 评论0 收藏0
从 0 到 1 再到 100, 搭建、编写、构建一个前端项目

摘要：从到再到搭建编写构建一个前端项目选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种选择现成的项目模板自己搭建项目骨架。使用版本控制系统管理源代码项目搭建好后，需要一个版本控制系统来管理源代码。从 0 到 1 再到 100, 搭建、编写、构建一个前端项目 1. 选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种：选择现成的项目模板、自己搭建项目骨架。 ...

aristark 2019-08-29 17:24 评论0 收藏0