先在库里将stylelint处理成安装包，然后包安装在项目中
一.添加stylelint文件夹
二.添加配置文件 stylelint/index.js
module.exports = {
plugins: ["stylelint-order"],//定义样式的顺序插件
//规则决定检测器要查找什么和要解决什么。stylelint 有超过 150条规则。所有规则默认都是关闭的，所以，通过该选项你就可以开启相应规则，进行相应的检测。
所有规则必须显式的进行配置，因为没有默认值。
rules: {
// 指定声明块内属性的字母顺序
"order/properties-order": [
// 定位 Positioning
"position",
"top",
"right",
"bottom",
"left",
"z-index",
"clip",
// 布局 Layout
"display",
"float",
"overflow",
"overflow-x",
"overflow-y",
"visibility",
"clear",
// 弹性盒模型 Flexible Box Layout
"box-align",
"box-flex",
"box-orient",
"box-pack",
"box-shadow",
// 尺寸 Dimension
"width",
"height",
"max-width",
"max-height",
"min-width",
"min-height",
// 外边距 Margin
"margin",
"margin-top",
"margin-right",
"margin-bottom",
"margin-left",
"margin-collapse",
"margin-top-collapse",
"margin-right-collapse",
"margin-bottom-collapse",
"margin-left-collapse",
// 内边距 Padding
"padding",
"padding-top",
"padding-right",
"padding-bottom",
"padding-left",
// 边框 Border
"border",
"border-top",
"border-right",
"border-bottom",
"border-left",
"border-color",
"border-image",
"border-top-color",
"border-right-color",
"border-bottom-color",
"border-left-color",
"border-style",
"border-top-style",
"border-right-style",
"border-bottom-style",
"border-left-style",
"border-width",
"border-top-width",
"border-right-width",
"border-bottom-width",
"border-left-width",
"border-radius",
"border-top-right-radius",
"border-bottom-right-radius",
"border-bottom-left-radius",
"border-top-left-radius",
"border-radius-topright",
"border-radius-bottomright",
"border-radius-bottomleft",
"border-radius-topleft",
// 背景 Background
"background",
"background-attachment",
"background-color",
"background-image",
"background-position",
"background-repeat",
"background-size",
"background-clip",
// 色彩 Color
"color",
"opacity",
// 字体
"font",
"font-family",
"font-size",
"font-smoothing",
"font-style",
"font-weight",
// 文本 Text
"line-height",
"letter-spacing",
"word-spacing",
"text-align",
"text-decoration",
"text-indent",
"text-rendering",
"text-size-adjust",
"text-shadow",
"text-transform",
"word-break",
"word-wrap",
"white-space",
"vertical-align",
"direction",
"unicode-bidi",
// 列表 List
"list-style",
"list-style-type",
"list-style-position",
"list-style-image",
// 表格 Table
"table-layout",
"border-collapse",
"border-spacing",
// 内容 Content
"content",
"quotes",
// 用户界面 User Interface
"outline",
"outline-offset",
"text-overflow",
"box-sizing",
"cursor",
"zoom",
"resize",
// 变换 Transform
"transform",
"transform-origin",
// 过渡 Transition
"transition",
"transition-delay",
"transition-duration",
"transition-property",
"transition-timing-function",
// 动画 Animation
"animation",
"animation-delay",
"animation-duration",
"animation-iteration-count",
"animation-name",
"animation-play-state",
"animation-timing-function",
"animation-fill-mode",
],
// 注释无未知
// https://stylelint.io/user-guide/rules/list/annotation-no-unknown
"annotation-no-unknown": true,
// 禁止空块
// https://stylelint.io/user-guide/rules/list/block-no-empty
"block-no-empty": true,
// 指定注释模式
// https://stylelint.io/user-guide/rules/list/comment-pattern
"comment-pattern": null,
// 在评论中指定不允许使用的单词列表
// https://stylelint.io/user-guide/rules/list/comment-word-disallowed-list
"comment-word-disallowed-list": null,
// 禁止使用未知规则
// https://stylelint.io/user-guide/rules/list/at-rule-no-unknown
"at-rule-no-unknown": [
true,
{
ignoreAtRules: ["mixin", "include", "each"],
},
],
// 禁止未知动画
// https://stylelint.io/user-guide/rules/list/no-unknown-animations
"no-unknown-animations": null,
// 要求或禁止 Unicode BOM
// https://stylelint.io/user-guide/rules/list/unicode-bom
"unicode-bom": null,
// 为规则名称指定小写或大写
// https://stylelint.io/user-guide/rules/list/at-rule-name-case
"at-rule-name-case": null,
// 在规则名称后需要换行符
// https://stylelint.io/user-guide/rules/list/at-rule-name-newline-after
"at-rule-name-newline-after": null,
// 在规则名称后需要一个空格
// https://stylelint.io/user-guide/rules/list/at-rule-name-space-after
"at-rule-name-space-after": null,
// 在规则的分号后需要换行符
// https://stylelint.io/user-guide/rules/list/at-rule-semicolon-newline-after
"at-rule-semicolon-newline-after": null,
// 在规则的分号之前需要一个空格或不允许空格
// https://stylelint.io/user-guide/rules/list/at-rule-semicolon-space-before
"at-rule-semicolon-space-before": null,
// 指定类选择器的模式
// https://stylelint.io/user-guide/rules/list/selector-class-pattern
"selector-class-pattern": ["^([0-9a-z]{1,}(-|--))*[0-9a-z]{1,}$", { resolveNestedSelectors: true }],
},
overrides: [
//postcss-scss：解析html.vue文件里面的css规范
{
files: ["**/*.{vue,html}", "**/**/*.{vue,html}"],
customSyntax: "postcss-html",
},
//postcss-scss：解析css,scss,less,sass文件里面的css规范
{
files: ["**/*.{css,scss,less,sass}", "**/**/*.{css,scss,less,sass}"],
customSyntax: "postcss-scss",
},
],
};
三.添加插件说明
# StyleLint 代码规范
统一代码 css 规则。
## 安装依赖
通过命令行安装依赖。
npm install @nebula/stylelint-plugin --save-dev
## 配置规则
通过 stylelint 配置文件，配置规则。
module.exports = {
extends: ["plugin:@stylelint-plugin"],
};
## 参考链接
完整详细的规则说明，部分文档只有英文文档。
| 链接 | 说明 |
| ----------------------------------------------------------- | -------------- |
| <https://stylelint.io/user-guide/configure/> | stylelint 文档 |
| <https://www.kancloud.cn/surahe/front-end-notebook/1153178> | stylelint 前端笔记 |
## 代码顺序
定义代码顺序、增加可读性和维护性。
使用 stylelint-order 插件 自定义 css 顺序
定位 Positioning
布局 Layout
弹性盒模型 Flexible Box Layout
尺寸 Dimension
外补白 Margin
内补白 Padding
边框 Border
背景 Background
色彩 Color
字体 Font
文本 Text
列表 List
表格 Table
内容 Content
用户界面 User Interface
变换 Transform
过渡 Transition
动画 Animation
## 类命名
### 项目 一级类命名
统一使用 kebabCase 格式进行选择器命名。
| 项目 | 选择器 |
| ---- | ------- |
| 库 | n-view |
| 移动端 | nc-view |
| pc 端 | nb-view |
常用命名统一标准规则，易于理解。
一级结构选择器
nc-view ---------------- 根选择器
nc-header ---------------- 头部选择器
nc-content ---------------- 主体选择器
nc-footer ---------------- 底部选择器
nc-left ---------------- 左侧边栏选择器
nc-right ---------------- 右侧边栏选择器
xx-xxxx ---------------- 自定义类名
### 类名规则
1.使用小写字母和数字命名
2.两个单词链接符使用-或--
| /^([0-9a-z]{1,}(-|--))*[0-9a-z]{1,}$/ |
/* ✓ GOOD */
.xx-xxxx-xxx {
display: flex;
}
.xx-xx8-x10 {
display: flex;
}
.xx-xxxx--xxx {
display: flex;
}
/* ✗ BAD */
.XX-XX-XX {
display: flex;
}
.xx_xxxx_xxx {
display: flex;
}
## 代码嵌套
### 简化代码嵌套、增加可读性和维护性。
/* ✓ GOOD */
.nc-content {
display: flex;
align-items: center;
height: 100%;
}
.nc-content-icon {
font-size: 40px;
}
.nc-content-box {
width: 20%;
}
.nc-content-box-left {
display: flex;
align-items: center;
}
/* ✗ BAD */
.nc-content {
display: flex;
align-items: center;
height: 100%;
.nc-content-icon {
font-size: 40px;
}
.nc-content-box {
width: 20%;
.nc-content-box-left {
display: flex;
align-items: center;
}
}
}
四.添加安装依赖 stylelint/package.json
{
"name": "@stylelint-plugin",
"version": "0.0.1",
"description": "StyleList 规则",
"main": "./index.js",
"license": "MIT",
"dependencies": {
"postcss": "^8.4.16",
"postcss-html": "^1.5.0",
"postcss-less": "^6.0.0",
"postcss-scss": "^4.0.4",
"postcss-selector-parser": "^6.0.10",
"stylelint": "^14.11.0",
"stylelint-order": "^5.0.0",
"stylelint-scss": "^4.3.0"
}
}
五。在cmd 里面运行 npm publish生成包
六。项目在安装stylelint包
1.安装插件
npm install @nebula/stylelint-plugin --save-dev
2.package.json 使用包
"scripts": {
"stylelint": "stylelint --fix packages/com.less",//指定特定文件
"lint": "stylelint --fix \"**/*.{vue,html,sass,less,scss}\"",//指定多个文件
}
module.exports = {
extends: ["plugin:@stylelint-plugin"],
};
3.根目录添加.stylelintignore 忽略文件
node_modules
dist
lib
coverage
.git
*.js
*.tsx
*.ts
*.json
*.jsx
*.csv
*.ico
*.svg
*.png
4.vscode 配置
setting.json 设置stylelint 插件
{
"editor.codeActionsOnSave": {
//开启 stylelint 自动修复
"source.fixAll.stylelint": true
},
//关闭编辑器内置样式检查（避免与 stylelint 冲突）
"css.validate": false,
"less.validate": false,
"scss.validate": false,
//配置 stylelint 检查的文件类型范围
"stylelint.validate": ["css", "less", "postcss", "scss", "vue", "sass"]
}
5.在cmd 里面运行 npm run stylelint ，然后根据报错提示来修改css
