vue/html-indent
时间: 2023-07-15 20:15:24 浏览: 120
vue/html-indent 是 Vue.js 的一个 ESLint 插件,用于规范 HTML 模板文件的缩进。它可以帮助开发者在编写 Vue.js 项目时自动格式化 HTML 模板文件的缩进,提高代码的可读性,减少代码的维护成本。
该插件提供了以下几个配置选项:
- "indent": 缩进的空格数,默认为 2。
- "attribute": 属性的缩进方式,可选值为 "tab" 或 "space",默认为 "space"。
- "closeBracket": 关闭标签符号的缩进位置,可选值为 "line-aligned" 或 "none",默认为 "line-aligned"。
- "alignAttributes": 是否对齐属性,默认为 "false"。
使用方法:
1. 安装 vue/html-indent 插件。
```
npm install eslint-plugin-vue-html-indent --save-dev
```
2. 在 .eslintrc.js 配置文件中添加插件。
```javascript
module.exports = {
// ...
plugins: ['vue-html-indent'],
// ...
}
```
3. 在 rules 中添加需要的规则。
```javascript
module.exports = {
// ...
rules: {
'vue-html-indent/script-indent': ['error', 2, {'baseIndent': 1}],
'vue-html-indent/html-indent': ['error', 2, {
'attribute': 'space',
'closeBracket': 'line-aligned',
'alignAttributes': true
}],
},
// ...
}
```
以上是一个简单的 vue/html-indent 插件的使用方法。