stylelint 规范你的 css

更新日期: 2021-11-19阅读量: 39标签: 规范

stylelint 简介

一个强大、现代的 linter 帮助团队避免规则错误,统一代码风格。和 eslint 类似可以继承开源社区的 config、自定义配置、写个性化的 rules 。


stylelint 配置

可按照官方引导 user-guide/get-started 进行配置。笔者目前公司项目采用的是 vue + scss + ts 实现的,这里主要会介绍 vue 和 scss 相关的配置。

相关依赖

stylelint 版本和依赖存在兼容性问题,下面依赖版本经过验证

  • stylelint@3.13.1
  • stylelint-config-recommended-scss@4.3.0
  • stylelint-scss@4.0.0
  • stylelint-config-recess-order@3.0.0
  • stylelint-prettier@2.0.0
  • stylelint-config-prettier@9.0.3

stylelint 插件提供扩展规则,不提供预设配置。(我只提供配置,用不用是你的事)。命名规范为 stylelint-xxxx

我们项目使用到了 scss 预处理器,需要利用 stylelint-config-recommended-scss 做 scss 规则检查。

stylelint-scss 提供了 n 多条规则,stylelint-config-recommended-scss 内开启了部分配置。

面试的时候我们经常会被问到 css 的重排和重绘,坦白讲写代码的时候并没有太多人关心这个。 让 linter 来帮助我们自动修复多香。stylelint-config-recess-order (属性配置 + stylelint-order插件)可以帮我们实现

stylelint 与 eslint 类似,都与 Prettier 规则有冲突,stylelint-config-prettier 可以解决这些冲突,stylelint-prettier 插件优化 Prettier 的执行时机

配置文件

可以是 .stylelintrc 或 .stylelintrc.js 或 stylelint.config.cjs 配置文件。推荐使用 .js 文件的形式方便自定义。

module.exports = {
  /* 继承公共配置 */
  "extends":[
    "stylelint-config-recommended-scss",
    "stylelint-config-recess-order",
    "stylelint-prettier/recommended"
  ],
  /* 扩展 stylelint 原生rules 的种类 */
  "plugins": ["stylelint-prettier"],
  /* 项目个性化的规则 */
   rules: {
    "selector-pseudo-element-no-unknown": [
      true,
      {
        ignorePseudoElements: ["v-deep"],
      }
    ],
    "prettier/prettier": true,
    "number-leading-zero": "always",
  }
}

之前搞不懂为啥有些工具配置能支持 monorepo 项目组织形式,读官方文档发现 cosmiconfig 库帮忙做到了这件事情。

Stylelint uses cosmiconfig to find and load your configuration object.

执行脚本

项目配置应结合 lint-stage 、git-hooks 对执行时机和范围做优化。本文只讲手动执行。

package.json:

 "lint:style": "stylelint 'src/**/*.{vue,htm,html,css,scss}' --fix"

在终端执行 npm run lint:style 看下代码的变化吧。

stylelint 原理

stylelint 通过使用 PostCSS API 来分析 CSS 的语法,实现样式的检查。

postcss 是 css 的 编译器。它和 babel 的功能设计类似, 有 parse -> transform -> generater 三个关键环节。开发者可以通过 parse 后的 AST 结构实现自定义的 lint 规则。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/10834

Node.js的模块加载机制(CommonJS规范)

为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码就相对较少,很多编程语言都采用这种组织代码的方式。在Node环境中,一个.js文件就称之为一个模块(module)

Web前端开发规范手册

文件命名规则:文件名称统一用小写的英文字母、数字和下划线的组合。引文件统一使用index.htm index.html index.asp文件名(小写),图片的名称分为头尾两部分,用下划线隔开,头部分表示此图片的大类性质

CommonJS 规范中的 module、module.exports 区别

CommonJS规范规定,每个模块内部,module变量代表当前模块。这个变量是一个对象,它的exports属性(即module.exports)是对外的接口。加载某个模块,其实是加载该模块的module.exports属性。module.exports属性表示当前模块对外输出的接口

谷歌的JavaScript编写风格中 13点值得我们注意的!

对于那些还不熟悉JavaScript的编写风格的人,谷歌提供了编写JavaScript的编写风格指南,谷歌风格指南 其中列出了编写干净、可理解代码的最佳风格实践。

CSS团队协作规范

命名禁止缩写,禁止在非特殊情况下写!important,img请让它自动缩放,不可直接over write或在原本框架的class增加内容,设计RWD网站,请遵循移动设备优先原则

Web 前端开发代码规范(基础)

对于一个多人团队来说,制定一个统一的规范是必要的,因为个性化的东西无法产生良好的聚合效果,规范化可以提高编码工作效率,使代码保持统一的风格,以便于代码整合和后期维护。

一文看懂前端模块化规范

将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起,块的内部数据与实现是私有的,只是向外部暴露一些接口(方法)与外部其它模块通信

CSS规范

CSS 指层叠样式表 (Cascading Style Sheets),定义如何显示 HTML 元素,但由于 CSS 天生全局性,随着项目复杂度增加,极易出现样式覆盖以及其它的问题。

编码规范_html代码规范化编写

嵌套的节点应该缩进;在属性上,使用双引号,不要使用单引号;属性名全小写,用中划线做分隔符;不要在自动闭合标签结尾处使用斜线(HTML5 规范 指出他们是可选的);不要忽略可选的关闭标签;

前端开发Js变量命名规范

JavaScript作为前端开发从业人员必须掌握的3大基础知识中最重要的一环,也是平是接触时间最长、写得最多的。本文的出现相信能够解决大部分烦恼,让你轻松写出符合规范、易读、简短的代码

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!