Stylelint

前端工程化模块化开发

css代码的lint操作使用工具Stylelint,和eslint基本一致

  • 提供默认的代码检查规则,可以手动开启或者关闭某个规则
  • 提供CLI工具,可以在终端中快速调用检查文件
  • 通过插件支持Sass Less PostCSS
  • 支持 Gulp 或 Webpack 等自动化打包工具的集成

# 快速上手

  1. npm初始化npm init -y,安装stylelint模块npm install stylelint -D
  2. 使用之前需要先进行文件配置stylelintrc.js
  3. 安装共享的配置模块 npm i stylelint-config-standard,在配置文件中使用
module.exports = {
  extends: 'stylelint-config-standard'
}
1
2
3
  1. 准备错误文件index.css
.{
  background:chartreuse;
  color: center;
  hello: '20px'
}
1
2
3
4
5

命令行npx stylelint ./index.ts可以看到所有报错

image

也可以使用npx stylelint index.css --fix自动解决大部分问题。

# stylelint检查sass代码

我们如果要检查sass代码,需要额外安装插件stylelint-config-sass-guidelines

  1. 原来项目的中安装npm i stylelint-config-sass-guidelines -D
  2. stylelintrc.js配置文件中修改
module.exports = {
  extends: [
    'stylelint-config-standard',
    // 添加模块继承
    'stylelint-config-sass-guidelines'
  ]
}
1
2
3
4
5
6
7
  1. 创建index.scss文件并写入错误样式
$jumbotron-bg: #ccc;

body{
  background-color: $jumbotron-bg
}

1
2
3
4
5
6
  1. 执行命令npx stylelint index.scss可以看到文件检查报错

image

更新时间: 2021-12-18 20:56