### 配置 Vue3 + TypeScript + Less 项目以实现 Stylelint 使用 order-smacss 插件
在 Vue3 + TypeScript + Less 的项目中，可以通过以下配置实现 Stylelint 使用 `order-smacss` 插件对 `.css`、`.less` 和 `.vue` 文件进行样式自动排序和格式化。以下是具体的配置方法：
#### 1. 安装依赖
首先需要安装与 Stylelint 相关的插件和工具：
```bash
npm install --save-dev stylelint stylelint-config-standard stylelint-order stylelint-config-sass-guidelines stylelint-config-recess-order stylelint-config-smacss stylelint-declaration-strict-value postcss-less
```
这些依赖包括：
- `stylelint`: 核心工具。
- `stylelint-config-standard`: 基础规则集。
- `stylelint-order`: 提供样式属性顺序校验。
- `stylelint-config-sass-guidelines`: 支持 Sass/SCSS 规则。
- `stylelint-config-recess-order`: 按照特定顺序排列样式属性。
- `stylelint-config-smacss`: SMACSS 设计原则支持。
- `postcss-less`: 支持 `.less` 文件解析。
#### 2. 配置 Stylelint
在项目根目录下创建或更新 `.stylelintrc.js` 文件，添加以下内容：
```javascript
module.exports = {
extends: [
'stylelint-config-standard',
'stylelint-config-sass-guidelines',
'stylelint-config-recess-order',
'stylelint-config-smacss'
],
plugins: ['stylelint-order'],
rules: {
// 属性顺序规则
'order/order': ['dollar-variables', 'declarations', 'rules'],
'order/properties-order': [
'display',
'position',
'top',
'right',
'bottom',
'left',
'z-index',
'box-sizing',
'width',
'height',
'max-width',
'max-height',
'margin',
'padding',
'border',
'background',
'color',
'font-family',
'font-size',
'line-height',
'text-align',
'vertical-align',
'overflow',
'white-space',
'transition',
'animation'
],
// 禁止无效的声明
'declaration-no-important': true,
// 强制缩进为 2 个空格
'indentation': 2,
// 禁止未知的 at 规则
'at-rule-no-unknown': true,
// 强制分号结尾
'block-closing-brace-empty-line-before': 'never',
'declaration-colon-space-after': 'always-single-line',
'declaration-block-trailing-semicolon': 'always',
'rule-empty-line-before': 'always-multi-line'
}
};
```
上述配置使用了多个扩展规则集，并通过 `plugins` 引入 `stylelint-order` 插件[^1]。
#### 3. 配置 VSCode 自动格式化
为了确保保存文件时自动格式化代码，需要在项目根目录下的 `.vscode/settings.json` 文件中添加以下配置：
```json
{
"typescript.tsdk": "node_modules/typescript/lib",
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit",
"source.fixAll.stylelint": "explicit"
},
"stylelint.validate": ["css", "scss", "less", "vue"],
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
```
此配置确保 `.css`、`.less` 和 `.vue` 文件在保存时会触发 Stylelint 的自动修复功能[^3]。
#### 4. 配置 Vite 支持 Less
如果项目使用 Vite 构建工具，需要在 `vite.config.js` 中添加对 Less 的支持：
```javascript
import vue from '@vitejs/plugin-vue';
import styleImport from 'vite-plugin-style-import';
export default {
plugins: [
vue(),
styleImport({
libs: [
{
libraryName: 'vant',
esModule: true,
resolveStyle: (name) => `vant/es/${name}/style`,
},
],
}),
],
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
},
},
},
};
```
此配置启用了 Less 的预处理器选项，并允许 JavaScript 在 Less 文件中运行[^1]。
#### 5. 测试配置
完成上述配置后，可以通过以下命令测试 Stylelint 是否正常工作：
```bash
npx stylelint "**/*.{css,less,vue}" --fix
```
此命令会对指定文件类型执行检查并尝试自动修复问题。
---
扫一扫
2311
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
