Stylelint 插件 Defensive CSS 使用教程

Stylelint 插件 Defensive CSS 使用教程

stylelint-plugin-defensive-cssA Stylelint plugin for enforcing defensive CSS best practices.项目地址:https://gitcode.com/gh_mirrors/st/stylelint-plugin-defensive-css

目录结构及介绍

Stylelint 插件 Defensive CSS 的目录结构如下：

stylelint-plugin-defensive-css/
├── src/
│   ├── rules/
│   └── index.js
├── .eslintrc.json
├── .gitignore
├── .prettierrc
├── LICENSE
├── README.md
├── commitlint.config.js
├── jest.config.js
├── jest.setup.js
├── package-lock.json
├── package.json

目录介绍

• src/: 包含插件的主要源代码。
  • rules/: 包含各种规则的实现。
  • index.js: 插件的入口文件。
• .eslintrc.json: ESLint 配置文件。
• .gitignore: Git 忽略文件配置。
• .prettierrc: Prettier 代码格式化配置。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• commitlint.config.js: Commitlint 配置文件。
• jest.config.js: Jest 测试配置文件。
• jest.setup.js: Jest 测试初始化文件。
• package-lock.json: npm 依赖锁定文件。
• package.json: 项目依赖和脚本配置。

项目的启动文件介绍

项目的启动文件是 src/index.js，它是插件的入口文件，负责导出所有规则和配置。

// src/index.js
module.exports = {
  rules: {
    'accidental-hover': require('./rules/accidental-hover'),
    'background-repeat': require('./rules/background-repeat'),
    'custom-property-fallbacks': require('./rules/custom-property-fallbacks'),
    'flex-wrapping': require('./rules/flex-wrapping'),
    'scroll-chaining': require('./rules/scroll-chaining'),
    'scrollbar-gutter': require('./rules/scrollbar-gutter'),
    'vendor-prefix-grouping': require('./rules/vendor-prefix-grouping')
  }
};

项目的配置文件介绍

Stylelint 配置文件

要使用 Stylelint 插件 Defensive CSS，需要在项目的 Stylelint 配置文件中添加以下配置：

{
  "plugins": ["stylelint-plugin-defensive-css"],
  "rules": {
    "plugin/use-defensive-css": [true, { "severity": "warning" }]
  }
}

ESLint 配置文件

.eslintrc.json 文件用于配置 ESLint，确保代码风格一致：

{
  "extends": ["eslint:recommended"],
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "env": {
    "node": true,
    "es6": true
  }
}

Prettier 配置文件

.prettierrc 文件用于配置 Prettier，确保代码格式化一致：

{
  "singleQuote": true,
  "trailingComma": "all"
}

Jest 配置文件

jest.config.js 文件用于配置 Jest 测试框架：

module.exports = {
  testEnvironment: 'node',
  setupFilesAfterEnv: ['./jest.setup.js']
};

Commitlint 配置文件

commitlint.config.js 文件用于配置 Commitlint，确保提交信息规范：

module.exports = {
  extends: ['@commitlint/config-conventional']
};

通过以上配置，可以确保项目代码风格一致，提交信息规范，并且能够使用 Stylelint 插件 Defensive CSS 进行防御性 CSS 的最佳实践检查。

stylelint-plugin-defensive-cssA Stylelint plugin for enforcing defensive CSS best practices.项目地址:https://gitcode.com/gh_mirrors/st/stylelint-plugin-defensive-css