Vue2.7 + Vite+ Eslint、Stylelint、Commitlint 统一开发规范
+ husky + lint-staged （git commit 时自动格式化代码）
+ Vue 全家桶集成
+ Axios 封装及接口管理
https://juejin.cn/post/7118700020911570974
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
103 lines
2.8 KiB
103 lines
2.8 KiB
2 years ago
|
# Stylelint CSS 格式化
|
||
|
|
|
||
|
|
Stylelint 是一个强大、先进的 CSS 代码检查器（linter），可以帮助你规避 CSS 代码中的错误并保持一致的编码风格。
|
||
|
|
|
||
|
|
1. 安装依赖
|
||
|
|
|
||
|
|
- [`stylelint`](https://stylelint.io/) - Stylelint 本体
|
||
|
|
- [`stylelint-config-prettier`](https://github.com/prettier/stylelint-config-prettier)- 关闭 Stylelint 中与 Prettier 中会发生冲突的规则。
|
||
|
|
- [`stylelint-config-rational-order`](https://github.com/constverum/stylelint-config-rational-order) - 对 CSS 声明进行排序
|
||
|
|
- [`stylelint-config-standard`](https://github.com/stylelint/stylelint-config-standard)- Stylelint 官方推荐规则
|
||
|
|
- `stylelint-order` 使用 `stylelint-config-rational-order` 时依赖的模块
|
||
|
|
|
||
|
|
```bash
|
||
|
|
pnpm add stylelint stylelint-config-prettier stylelint-config-rational-order stylelint-config-standard stylelint-order -D
|
||
|
|
```
|
||
|
|
|
||
|
|
2. 添加 StyleLint 配置文件
|
||
|
|
|
||
|
|
在根目录添加一个 `.stylelintrc.js` 文件，内容如下：
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
module.exports = {
|
||
|
|
root: true,
|
||
|
|
extends: [
|
||
|
|
'stylelint-config-standard',
|
||
|
|
'stylelint-config-rational-order',
|
||
|
|
'stylelint-config-prettier'
|
||
|
|
],
|
||
|
|
defaultSeverity: 'warning',
|
||
|
|
plugins: ['stylelint-order'],
|
||
|
|
rules: {
|
||
|
|
'no-empty-source': null,
|
||
|
|
'selector-class-pattern': null
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
在根目录添加一个 `.stylelintignore` 文件，内容如下：
|
||
|
|
|
||
|
|
```plain
|
||
|
|
public
|
||
|
|
dist
|
||
|
|
```
|
||
|
|
|
||
|
|
3. 启用 Vue 文件支持
|
||
|
|
|
||
|
|
`stylelint` v14 版本默认是不支持 vue 文件中的 style 代码自动检测，详情我们可以查看[官方迁移指南](https://github.com/stylelint/stylelint/blob/main/docs/migration-guide/to-14.md)，具体配置如下：
|
||
|
|
|
||
|
|
- `stylelint-config-html` 解析 vue 文件
|
||
|
|
- `postcss-html` 使用 `stylelint-config-html` 依赖的模块
|
||
|
|
- `postcss-less` 对 less 文件进行解析
|
||
|
|
|
||
|
|
```bash
|
||
|
|
pnpm add stylelint-config-html postcss-html postcss-less -D
|
||
|
|
```
|
||
|
|
|
||
|
|
4. 修改 `.stylelintrc.js` 文件：
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
module.exports = {
|
||
|
|
root: true,
|
||
|
|
extends: [
|
||
|
|
'stylelint-config-standard',
|
||
|
|
'stylelint-config-rational-order',
|
||
|
|
'stylelint-config-prettier',
|
||
|
|
'stylelint-config-html/vue' // 需要放在最后一位
|
||
|
|
],
|
||
|
|
defaultSeverity: 'warning',
|
||
|
|
plugins: ['stylelint-order'],
|
||
|
|
rules: {
|
||
|
|
'no-empty-source': null,
|
||
|
|
'selector-class-pattern': null
|
||
|
|
},
|
||
|
|
overrides: [
|
||
|
|
{
|
||
|
|
files: ['*.vue', '**/*.vue'],
|
||
|
|
rules: {
|
||
|
|
'selector-pseudo-class-no-unknown': [
|
||
|
|
true,
|
||
|
|
{
|
||
|
|
ignorePseudoClasses: ['deep', 'global']
|
||
|
|
}
|
||
|
|
],
|
||
|
|
'selector-pseudo-element-no-unknown': [
|
||
|
|
true,
|
||
|
|
{
|
||
|
|
ignorePseudoElements: ['v-deep', 'v-global', 'v-slotted']
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
5. 在 VSCode 工作区配置中，添加如下代码：
|
||
|
|
|
||
|
|
```json
|
||
|
|
{
|
||
|
|
"stylelint.validate": ["vue"] // Add "vue" language.
|
||
|
|
}
|
||
|
|
```
|