使用Stylelint提高你的CSS检查水平

尼耳多
1,434 阅读11分钟

编写高质量的CSS是很困难的。与其他技术相比，人们似乎更容易被CSS所激怒，这就是为什么我很惊讶在CSS中使用Stylelint这样的interter没有被更多地讨论。在编写过程中捕捉和修复错误，以及在编码时执行最佳实践，可以显著提高代码质量。

虽然许多现代开发工具，如Vue CLI和Create React App，都将ESLint作为其配置的一部分，这样你就可以轻松地对JavaScript进行检查，但在对CSS进行检查时，你只能靠自己。

这篇文章并不意味着是Stylelint官方用户指南的替身，后者写得很好，将涵盖你的大部分需求。本文旨在让你了解Stylelint可以为你做的一些高级事情（这可能会让你吃惊！），并展示你如何将Stylelint整合到你的工作流程中。

首先，这里有一个关于Stylelint的快速概述。

什么是Stylelint？

如果你刚接触linters，你可以阅读Stylelint的作者写的关于linting CSS的教程，以了解完整的背景。

Stylelint理解最新的CSS语法，并解析类似CSS的语法，如SCSS、Sass和Less。

Stylelint可以从以下方面提取嵌入式样式。

  • HTML
  • 马克顿
  • CSS-in-JS 对象
  • 模板字样

基本上，Stylelint应该能够解析你的任何形式的CSS，在任何地方。与ESLint类似，它有内置的规则来捕捉错误，并能自动修复其中的一些错误。它支持可共享的配置，并有扩展功能的插件。它有代码编辑器、任务运行器和一些捆绑器的集成。

使用Stylelint进行标记

Stylelint遵循与ESLint类似的惯例。

首先，使用npm来安装Stylelint，以及stylelint-config-standard来启用一套核心规则。stylelint-config-standard是基于少数CSS风格指南中常见的风格惯例，如idiomatic CSS原则和Airbnb的风格指南。

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

在你的项目的根部创建一个配置文件。它可以被命名为.stylelintrc 或.stylelintrc.json 。

{
  "extends": "stylelint-config-standard"
}

现在你可以在命令行上运行Stylelint。例如，如果只针对你项目中的CSS文件，运行stylelint "**/*.css" 。要自动修复错误，你可以添加--fix 标志。

Code Running Stylelint And Highlighting Two Errors

阅读一下标准规则是个好主意，可以让你更熟悉Stylelint。有些人主张从一个空白的配置开始，只添加你需要的规则，而有些人则以标准配置为基础，随着经验的增加而修改。

后者当然是最快的方法。我认为最初关闭自动修复是一个好主意，这样你就可以看到发生的常见错误并理解它们。一旦你达到了很好的理解，再打开自动修复。当然，这取决于你!

如果你想了解更多关于Stylelint的配置和一般用法，请查看官方用户指南。我现在要谈的是我在其他地方没有看到很好的介绍的部分。

使用Stylelint执行鲜为人知的新颖技巧

除了基本的东西，Stylelint还可以做一些你可能想不到但会欣赏的事情。如果你想要一个使用我将要讨论的大部分内容的配置例子，你可以从我的npm中安装我的配置。

自动排列属性以提高可读性

stylelint-order插件可以自动将属性按你选择的顺序排序。这可以帮助使你的CSS代码更容易扫描和理解。在你每次保存时对属性进行排序是很方便的，如下图。

Code Being Automatically Organized

我想提醒大家，在项目中实现自动化，如果盲目地做，可能会破坏东西。这就是为什么Prettier选择不把它作为一项功能。在Sass中使用@mixin 和@include 是一个你要小心的地方。因为属性是从当前块之外包含的，改变现有声明的顺序可能会改变该规则的计算样式。

按字母顺序排列并不是人们遵循的唯一排序模式。另外两个例子是。

  1. Jonathan Snook的SMACSS
  2. Anton Korzunov的stylelint-semantic-groups

习惯性的CSS样式指南对使用哪种样式和何时使用有一些建议。

如果要对声明进行一致的排序，那么它们就应该符合单一的、简单的原则。

较小的团队可能更喜欢将相关的属性（如定位和盒状模型）集中在一起。

较大的团队可能更喜欢按字母顺序排列带来的简单性和更容易维护。

分组的例子有：定位属性 (position,top,bottom,left,right,float,display) 和盒式模型属性 (width,height,margin,padding) 。

我建议阅读这些文章。Anton Korzunov的 "哈利波特和CSS的顺序"和Eric Bailey的 "按字母顺序组织你的CSS声明"，如果你想了解更多关于这个主题的信息。这两位作者的观点是截然不同的!

我开始在我的一些个人项目中使用stylelint-config-idiomatic-order配置。它将属性组织成几个不同的组，主要的组是：布局、显示和盒子模型。

这个组织大致相当于这样的东西。

.wrapper{ 
  /* position */
  position: absolute; 
  top: 20px;
  left: 0;

  /* display */
  display: flex; 
  justify-content: center;

  /* box-model */
  width: 100%; 
  height: 100%; 
  margin-bottom: 20px;
  margin-left: 20px; 
  margin-left: 2px;

  color: red;

  /* groups family of props together */
  border: 1px solid red;
  border-radius: 5px; 
}

如果你想在各组之间设置空行，你需要用declaration-empty-line-before调整与空行有关的内置规则。添加下面的规则对我来说是个好办法。它有效地禁止了将声明之间的空行作为一个错误来报告。

 "declaration-empty-line-before": [
      "always",
      {
        "ignore": [
          "after-comment",
          "after-declaration",
          "first-nested",
          "inside-single-line-block"
        ]
      }
    ]

提高可访问性

stylelint-a11y插件可以帮助使可及性成为你开发过程中更重要的一部分。我认为这很好。可访问性应该是一个关键的问题，而不是留到以后。

该插件增加了这些规则。

推荐/可修复规则规则ID规则描述
content-property-no-static-value不允许在伪元素中生成无法访问的CSS内容。
字体大小是可读的不允许字体大小小于15px
行高是垂直韵律的不允许没有垂直韵律的内容line-height
⭐✒媒体-倾向于减少运动如果媒体中的动画或过渡功能，需要某些样式。
media-preferers-color-scheme要求对有颜色的选择器实施某些样式。
no-display-none不允许用display: none 属性隐藏内容
no-obsolete-attribute不允许使用过时的属性
no-obsolete-element不允许使用过时的选择器
no-spread-text要求文本的宽度在一个舒适的范围内
⭐no-outline-none不允许清除轮廓
no-text-align-justify不允许内容有text-align: justify
⭐✒选择器-伪类-焦点要求或不允许选择器中的伪元素与:hover

⭐ ：推荐规则的标记✒ ：可固定规则的标记。

规范化的颜色格式

stylelint-color-format插件可以将所有颜色规范化为RGB（A）或HSL（A）。我喜欢到处使用HSL。HSL是一种更直观的使用格式，并且有一些其他格式无法实现的独特应用。

Code Adding HSL Colors

唯一的限制是，如果你有一个带有名称的颜色，例如，color: blue; ，它不会为你转换这个。

过渡到较新的推荐功能，如逻辑属性

对于开发人员来说，继续学习和适应不断发展的最佳实践是很有挑战性的，所以增加新的规则集，使新的建议成为你开发过程中的一个积极部分，是非常有帮助的。

最近的一个例子是使用逻辑属性。逻辑属性是物理属性的写作模式的等价物。它们提供了一种以通用词汇描述网页布局的方法，这种词汇在不同的语言中是毫不含糊的。

例如，你可以有一套单一的CSS声明，适用于从右到左的语言（如阿拉伯语）和从左到右的语言，如英语。你可以在《CSS逻辑属性和值》这篇文章中了解更多关于这些属性的信息。

Diagram Of Languages Showing The Direction Languages Are Read

图片来源：Web.dev

逻辑属性已经存在了相当长的时间，但只是在过去的几年里，所有主要的浏览器对它的采用才有了明显的改善。你可以使用stylelint-use-logical-spec插件来过渡到逻辑属性，并打破你的旧习惯!

增进知识，抓住容易犯的错误

你知道有些属性在与其他属性值组合使用时被忽略了吗？

例如，当你使用display: inline ，尺寸属性（如width ）会被忽略。这对你来说可能是一个明显的例子，但其他的就不那么明显了。无论是否明显，在繁忙的项目中，这些都可能被遗忘或遗漏你为什么不让linter为你捕捉这些呢？

你可以使用stylelint-declaration-block-no-ignored-properties插件来提示这些。

顺便提一下，一些浏览器已经开始在其开发工具中突出显示这些被忽略的值。这是在Firefox中的样子。

Firefox's Development Tool Highlighting Ignored Values

Chrome则不显示这个信息。

使用Stylelint的常见方法

我通常

  1. 使用Stylelint和Prettier来检查和格式化我的CSS
  2. 使用VS Code和Stylelint扩展，为错误提供下划线，并将错误设置为保存时自动修复。
  3. 对于使用webpack的项目，我将Stylelint插件添加到我的webpack配置中，以便在每次构建时检查样式。
  4. 对于Vue项目，我在Vue CLI配置中加入Stylelint。

这些是Stylelint的几种常见使用方式。我将告诉你如何设置这些情况。

1.与Prettier一起使用Stylelint

Prettier在处理代码格式化方面非常受欢迎。因为Stylelint将一些格式化约定报告为错误，所以会与Prettier发生冲突。Prettier会以一种特殊的方式格式化一些东西，而Stylelint不喜欢它。

你可以在你的配置中包括stylelint-config-prettier来禁用任何冲突的规则。这应该永远是extends 中最后引用的配置，这样它的规则就不会被覆盖。

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-prettier",
  ]
};

2.在VS代码中使用Stylelint

有一个Stylelint扩展可以使用。一旦你安装了Stylelint（全局或本地），并在你的工作区添加了Stylelint配置，该扩展将自动对打开的文件进行检查。它涵盖了大多数可能包含CSS的默认语言，例如Svelte。

你可能想添加一些脚本到你的package.json ，以便定期从命令行运行它。

{
     "scripts": {
       "lint": "stylelint src",
       "lint:fix": "npm run lint -- --fix",
     }
}

如果你想在VS Code中使用Stylelint与Prettier，我建议安装这两个扩展。Prettier和Format Code Action，它可以使Prettier作为一个代码动作运行。为了在保存时格式化和提示CSS代码，你可以通过以下方式更新你的用户设置。

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": [
    "source.formatDocument",
    "source.fixAll"
  ],
}

3.在webpack中使用Stylelint

如果你使用webpack，你可能更喜欢让Stylelint作为构建过程的一部分来运行。你需要安装stylelint-webpack-plugin来实现这一点。

如果你是通过Create React App或Vue CLI等开发工具使用webpack，你需要以不同的方式行事。在下一节中，我将描述如何为Vue CLI做这件事。

要自己在webpack中进行设置。

  • 安装Stylelint和webpack插件。npm i --save-dev stylelint stylelint-webpack-plugin
  • 在你的webpack.config.js// webpack.config.js中包括该插件
// webpack.config.js
const StyleLintPlugin = require('stylelint-webpack-plugin');
module.exports = {
  // ... other options
  plugins: [
    new StyleLintPlugin({
      files: ['**/*.{htm,html,css,sss,less,scss,sass}'],
    })
  ]
}
  • 将你的.stylelintrc 配置添加到根目录中，就可以了

4.在Vue CLI中使用Stylelint

对于Vue CLI，你可以安装npm包@steveworkman/vue-cli-plugin-stylelint来为你整合Stylelint。要把它添加到一个现有的项目中，运行命令vue add @steveworkman/vue-cli-plugin-stylelint ，它将引导你完成设置。

npm Package Running To Integrate Stylelint

它将用你选择的插件选项填充vue.config.js ，并为你添加一个Stylelint配置（.stylelintrc.js ）。

它还会将以下脚本添加到你的package.json 。

 "lint:style": "vue-cli-service lint:style"

结论

我希望在读完这篇文章后，你能看到对CSS进行提示的价值有多大。尽管许多前端开发工具没有强调它的使用，也没有将它包含在他们的快速设置中，我认为使用Stylelint是至关重要的。它可以为你省去一些麻烦，帮助你保持高水平的代码质量。祝你品评愉快!

The postLevel up your CSS linting using Stylelintappeared first onLogRocket Blog.

avatar
文章
阅读
粉丝