0.0.4-beta.11 • Published 1 year ago

@cmsk/stylelint-config v0.0.4-beta.11

Weekly downloads
-
License
ISC
Repository
-
Last release
1 year ago

StyleLint规范

前端stylelint规范,目前支持css|scss

安装

npm install @cmsk/stylelint-config -D

# OR
yarn add @cmsk/stylelint-config --dev

# OR
pnpm install @cmsk/stylelint-config -D

使用

在你的工程根目录下创建一个.stylelintrc.js配置文件

配置如下即可:

module.exports = {
  "extends": "@cmsk/stylelint-config"
}

如果你使用vscode编辑器,建议安装stylelint插件,并在设置配置文件settings.json中配置如下,在代码编写时会实时提示,保存是会自动修复

  "stylelint.validate": [
      "css",
      "scss",
      "vue", // 如果是Vue技术栈,需要加上,识别.vue文件中的style
  ],
  "css.validate": true,
  "scss.validate": true,
  "stylelint.enable": true,

:::caution 如果项目之前安装过Stylelint相关的包,建议卸载,避免引入不必要的包。如@stylelintstylelint-config-standardstylelint-order等,直接在package.json搜索stylelint,相关的包全部卸载 :::

规范

使用stylelint官方代码风格stylelint-config-standard;该风格是 stylelint汲取了GitHubGoogleAirbnb等;使用stylelint-order强制按照某个顺序进行编码

目的:

  • 增加css代码的重用性和易于维护性
  • 统一规范、提高协作效率
  • 提升渲染性能

具体见StyleLint规范