样式林特- rscs

将CSS(和SCSS, 减, SugarSS)验证为RSCSS公约

这个寄存器是维护叉 rstacruz/stylelint-rscs (英语)。它已经在 TypeScript 中被重写,并且与样式lint v16 兼容.

样式lint-rscs 是一个插件,用于 样式lint 用于验证您的代码 区域支助系统 公约。 它支持由stylelint支持的SCSS(Sass),SugarSS和Less.

作为样式林插件,可以使用样式林 几百个规则 或其他类型 样式lint 配置 也验证其他良好的CSS做法.

快速启动指南

安装 : 安装 样式lint 并给您的项目设置样式.

npm install --save-dev stylelint @elecdeer/stylelint-rscss

配置 : 创建一个 .stylelintrc 在你的项目。 使用 stylelint-rscss/config 配置,对严格的RSCSS常规有默认.

// .stylelintrc
{
  "extends": [
    "@elecdeer/stylelint-rscss/config"
  ]
}

添加脚本 : 向您添加 npm 脚本 package.json。 。 。 .

// package.json
{
  "scripts": {
    "lint:css": "stylelint path/to/css/**/*"
  }
}

运行它!

npm run lint:css

建议

不需要这些步骤,但 高级 建议:

• 添加 样式lint-配置-标准 还有!
• 配置您的文本编辑器以使用样式林特 。 (见 文本编辑器支持(中文(简体) )
• 添加 npm run lint:css 给你的CI脚本.

文本编辑器支持

您需要在全球安装样式lint(npm install -g stylelint)用于文本编辑器支持.

npm install -g stylelint

在此之后,我推荐的插件如下:

• 尼奥维姆: 新制作 (不需要设置)
• 维姆: 合成 (使用 stylelint 检查器)
• 原子 : 原子流 + 键 中间样式lint

也见"风格林" 辅助工具 文档.

实例

以下是一些有效的例子 区域支助系统 规则.

.component-name { }
  // ✓ Components should be two or more words, separated by dashes.
.component-name > .element { }
  // ✓ Elements should be one word. Use `>` to denote markup structure.
.component-name > .element.-foo { }
  // ✓ Variant classes begin with a dash (`-`).
.component-name.-variant { }
  // ✓ Components can have variants.
._helper { }
  // ✓ Helpers start with an underscore (`_`).

有些案件不允许:

.component-name .element { }
  // ✗ Use `>` to denote markup structure.
.component-name.variant { }
  // ✗ Variants must begin with a dash.
.componentname { }
  // ✗ Components should be two or more words.
.component-name.other-component { }
  // ✗ Only one component name is allowed.
.component-name > .-foo { }
.-foo { }
  // ✗ Variants should be attached to components or elements.

还行:

h2 { }
  // ✓ Bare elements can be styled.
.component-name > h2 { }
  // ✓ Bare elements can be styled as elements.
.component-name > a:hover[aria-hidden="false"] { }
  // ✓ Pseudo-classes and attributes are OK.
.component-name:hover > .element { }
  // ✓ They're ok for components too.

见 规则 需要更多的实例.

规则和定制

见 规则 详细的规则和如何自定义样式的示例.

谢谢

样式林特- rscs 2016+, Rico Sta. Cruz. (原始内容存档于2018-10-12). 释放 麻省理工学院 执照.
由Rico Sta撰写并维护. Cruz在捐款者的帮助下(列表) (中文(简体) ).

互联网档案馆的存檔,存档日期2013-12-02. ricostacruz.com  • 妇女  GitHub 图像 @rstacruz (英语)  • 妇女  微博 @rstacruz (英语)