css代码整理_如何使用Stylelint整理CSS

css代码整理

短毛猫已经存在了一段时间。 但是如果您不熟悉CSS，那么可能是您第一次听说它们。 CSS linter将使您的样式表保持检查状态，并使您成为更好的编码器！

CSS Linters有什么好处？

作为前端开发人员，我们希望我们编写的代码可以交付生产并由我们的产品用户使用。 我们花费大量时间来确保我们编写的代码没有错误和错误。 但是，如果不实际运行代码，我们可以找出这些错误中的多少个？ 尽管肯定有些东西无法进行测试，或者可能根本无法进行测试，但这就是测试的源头。

例如，作为JavaScript开发人员，您是否会确定优先级并编写测试以处理分号丢失的情况？ 还是因为使用通用选择器而引起的性能问题？

使用CSS linters可以捕获您可能不知道CSS问题。 对于初学者来说，这尤其有用，因为他们的技能处于早期阶段。 除此之外，使用棉短绒的好处远远超出了性能方面的安全性，静态分析等范围。

为什么要用Stylelint作为棉绒呢？

用开发人员自己的话说，Stylelint是：

“强大的现代皮棉机，可帮助您避免错误并以自己的风格执行惯例。”

这是Stylelint提供的一些功能；

• 它支持最新CSS语法，并了解类似于CSS的语法，例如SCSS和Less。
• 它会自动修复某些样式的错误。
• 它具有170多个内置规则，可捕获错误并强制执行样式惯例。
• 固执己见，使您能够仅启用要使用的规则并对其进行配置以适合您的首选项。
• 它支持可共享的配置，在团队工作时可以方便使用。

您可以在此处找到更多功能。

如何使用Stylelint

有多种使用Stylelint的方式，例如为您喜欢的代码编辑器安装插件，或为Post CSS安装插件，但我们将使用命令行。

通过在您的计算机上安装NPM软件包来开始整理。 打开终端并输入以下命令：

npm install -g stylelint

上面的命令将全局安装Stylelint。 如果您希望使其基于项目 ，则可以使用以下命令进行操作：

npm install stylelint --save-dev

然后，您可以在添加到项目中的package.json文件中使用它。

"scripts": {
  "stylelint": "stylelint ’**/*.scss’"
}

运行Linter命令

注意 ：在实际运行linter之前，您需要设置配置，我们稍后将进行介绍。 没有配置，将引发错误。

运行命令以整理样式表时，有不同的组合。 让我们从上面的一个开始。

stylelint "**/*.scss"

此命令将在您的应用程序中搜索样式，并尝试将其样式化。 如果要运行限于特定目录的Stylelint，则必须使用：

stylelint "styles/*.css"

如果您已经在计算机上全局安装了Stylelint，则此方法有效。 如果不这样做，则可以将其添加到package.json文件的脚本部分。 该命令将清除 样式目录中包含的所有.css文件。

对于要整理HTML文件中包含的样式的情况，还有一个命令。

stylelint "home/*.html"

这将处理在home中所有HTML文件的<style>块中编写的<style> 。

Stylelint配置

Stylelint使用一种配置来弄清楚您如何样式化。 作为非优化工具，即使存在可以使用的默认配置，默认情况下也不会打开任何样式。

您希望使用的规则将包含在配置中。 如果在没有配置的情况下尝试掉毛，将会遇到错误。 如果没有配置，Stylelint将一无所知，它需要一个配置文件。

设置配置时可以遵循不同的方法：

1. package.json文件中的stylelint属性。
2. .stylelintrc文件。 该文件可以是JSON或YAML格式。
3. 导出JavaScript对象的stylelint.config.js文件。

这些是Stylelint在搜索要使用的配置时将查找的位置。 Stylelint期望的配置是一个对象，应具有以下键； rules ， extends ， plugins ， processors ， ignoreFiles 。

以下是配置文件的外观示例：

{
    "extends": "stylelint-config-standard",
    "plugins": [
        "stylelint-no-browser-hacks/lib"
    ],
    "rules": {
        "indentation": 2,
        "string-quotes": "double",
        "no-duplicate-selectors": true,
        "color-hex-case": "lower",
        "color-hex-length": "long",
        "color-named": "never",
         "property-no-unknown": true,
        "plugin/no-browser-hacks": [true, {
          "browsers": [
            "last 2 versions",
            "ie >=8"
          ]
        }],
    }
}

在这里，我们指定我们要扩展的配置：标准配置。

然后，我们添加一些我们想利用的规则。 开始使用Stylelint时，您可能希望使用现有的配置文件开始。 扩展已经存在的配置是一种相对容易的入门方法，然后可以通过使用自己的配置值将样式添加到rules对象中来覆盖样式。

规则

除了默认情况下关闭的规则外，任何规则都没有默认值-您必须配置要使用的规则。 要配置规则，您必须使用规则的名称（即键）和规则配置（即值）。 这是一个看起来的例子：

"rules": {
    "indentation": 2
}

在以上代码段中，我启用了indentation规则。 我通过将键和值对（即规则的名称和配置）添加到rules对象来做到这一点。

根据文档，有三种方法可以设置规则配置：

1. 单个值，例如上面的示例。
2. 具有2个值的数组-第一个是主要选项，第二个是次要选项
3. null值-这将关闭规则。

规则分为不同类别，例如错误规则，样式问题和限制语言功能。

检查文档以正确检查可能的规则。 以下是我们可以介绍的一些内容：

防止无效的十六进制值

Styelint可以使用color-no-invalid-hex规则防止无效的十六进制值。

"rules": {
    "color-no-invalid-hex": true
}

这样会使这种样式无效：

a { color: #00; }

此规则将帮助您和您的团队避免错误地为color或background-color或其他情况下需要使用十六进制颜色的值使用无效的十六进制值。

在分号后添加新行

还有一条规则在声明块中的分号后添加换行符。

"rules": {
    "declaration-block-semicolon-newline-after": "always"        
}

该规则具有三个可能的值：

• always ：要求始终在分号后添加新行。
• always-multi-line ：当规则跨越always-multi-line这需要换行。
• never-multi-line ：使用此值时，在多行规则中，分号后绝对不能有空格。

您可以查看文档以获取有关此规则的更多信息。

Stylelint插件

插件使使用默认情况下未在Stylelint中定义的规则成为可能。 您或社区成员可以构建采用Stylelint方法的插件。 然后，除了Stylelint之外，还可以使用这些插件。 已经有大量的插件可供您尝试。

stylelint-color-format是一个将十六进制颜色转换为RGB或HSL格式的插件。 要使用它，您需要先安装软件包。

npm install --save-dev stylelint-color-format

接下来，将其添加到配置中的插件数组中。

{
  "plugins": ["stylelint-color-format"]
}

这样，您便可以将其添加到规则对象，以表示规则的名称和要使用的值。

{
  "rules": {
    "color-format/format": {
      "format": "rgb"
    }
  }
}

结论

关于Stylelint，有很多要学习的知识，现在您应该掌握了它的含义及其工作原理。 展望未来，您可以开始在工作流程中采用它，并考虑使用其他linter（例如ESLint）来检查JavaScript和其他代码！

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-lint-css-using-stylehint--cms-34422

css代码整理