@10up/stylelint-config 中文文档教程

Question

10up Stylelint Config

在 10up，我们致力于提供能够带来一流用户体验的数字产品。 为了提高我们的效率和一致性，我们需要标准化我们使用的内容和使用方式。 这个主题脚手架允许我们共享初始设置程序，以确保所有项目都能尽快启动和运行，同时严格遵守 10up 的高质量标准。

Dependencies

1. Node & NPM - 3rd party dependencies are managed through NPM, so you will need that installed globally
2. Stylelint - as this is a config extention for Stylelint, you will need Stylelint installed in your main project in order for it to work.

Installation

首先，安装Stylelint：

// NPM
npm install stylelint --save-dev

// Yarn
yarn add stylelint

然后安装 10up Stylelint 配置：

// NPM
npm install @10up/stylelint-config --save-dev

Usage

将以下内容添加到您的 .stylelintrc 文件：

{
  "extends": [
    "@10up/stylelint-config"
  ]
}

SCSS:

默认情况下，10up Stylelint Config 不支持对基于 scss 的项目的开箱即用支持. 也就是说，通过以下过程添加支持并不难：

安装 stylelint-scss 依赖项：

// NPM
npm install stylelint-scss --save-dev

然后您需要更新项目的插件部分 .stylelintrc：

{
  "plugins": [
    "stylelint-scss"
  ],
  "rules": {
   ...
  }
}

一组规则位于 packages NPM 页面 如果您想覆盖或自定义默认值更远。

Selector Nested Pattern

适用于 CSS 风格的某些规则（post-css、scss、sass 等）可能会导致构建管道发生冲突。 一个这样的规则是 选择器嵌套模式。

默认情况下，我们确保任何嵌套的 css 使用前缀 & 符号，如 post-css 或 postcss- preset-env，但是如果使用 scss，您需要将其关闭。

要解决此问题，请将以下内容添加到您的项目中，.stylelintrc

{
  "rules": [
    "selector-nested-pattern": null,
  ]
}

Webpack Setup

运行 npm install stylelint-webpack-plugin --save-dev。 您应该已经在 postcss-loader 中安装了合适的加载器，但如果您还没有安装的话。 安装 stylelint 和上述配置后，将以下内容添加到您的 Webpack 配置中：

import StyleLintPlugin from 'stylelint-webpack-plugin';

plugins: [
  new StyleLintPlugin( {
    configFile: ".stylelintrc", // if your config is in a non-standard place
    files: "src/**/*.css", // location of your CSS files
    fix: true, // if you want to auto-fix some of the basic rules
  } ),
]

在 stylelint-webpack-plugin 中阅读有关这些选项的更多信息、主要的 stylelint 文档 和 postcss -装载机。 这应该是您所需要的，但是如果本文档中有任何错误，请提出问题并让我们知道< /a>!

Autofixing

某些规则/违规可以通过命令行使用 --fix 标志自动修复。 为确保 Stylelint 修复它能修复的问题，您可以运行：

stylelint path/to/css/file.css --fix`