eslint如何设置vue 中的HTML 缩进为tab 2个tab缩进
时间: 2023-11-22 14:52:35 浏览: 40
可以在`.eslintrc.js`文件中的`rules`对象中添加以下规则:
```js
rules: {
// ...
'vue/html-indent': ['error', 'tab', {
'indentSwitchCase': true,
'ignores': []
}]
}
```
其中,`'vue/html-indent'`表示要设置的规则为 Vue 文件中的 HTML 缩进规则,`'error'`表示如果不符合规则就报错,`'tab'`表示使用 Tab 缩进,`2`表示缩进两个 Tab,`'indentSwitchCase': true`表示在 switch 语句中缩进 case 语句,`'ignores': []`表示不忽略任何节点。
如果你使用的是 VS Code,还需要在 VS Code 的设置中添加以下配置,才能生效:
```json
"editor.insertSpaces": false,
"editor.tabSize": 2
```
其中,`"editor.insertSpaces": false`表示使用 Tab 缩进,`"editor.tabSize": 2`表示缩进两个 Tab。
相关问题
vue.config.js 报错 Unexpected tab character
出现 "vue.config.js 报错 Unexpected tab character" 的错误是因为在你的 `vue.config.js` 文件中存在不正确的缩进,可能是使用了制表符(tab)而不是空格进行缩进。
在VSCode中,可以通过以下步骤来解决这个问题:
1. 打开 `vue.config.js` 文件。
2. 点击编辑器右下角的空白区域,选择 "空白符号" 选项。
3. 确保 "显示空白符号" 处于开启状态。这将显示行尾的换行符和缩进的空格或制表符。
4. 检查文件中的每一行,确保使用空格进行缩进,而不是制表符。如果存在制表符,请将其替换为相应数量的空格。
5. 保存文件并重新运行你的程序。
这样应该可以解决 "Unexpected tab character" 错误。在编写代码时,建议使用空格进行缩进,以避免类似的问题。
vue/html-indent
vue/html-indent 是一个 ESLint 规则,用于检查 Vue 和 HTML 文件中的缩进。它会检查代码中是否使用了正确的缩进方式,并给出警告或错误提示。这个规则有以下几个选项:
- "error":如果缩进不正确,将会报错
- "warn":如果缩进不正确,将会给出警告
- "tab":强制使用 tab 缩进
- "space":强制使用空格缩进
例如,如果你想使用 2 个空格缩进,并且在缩进的时候需要报错,那么可以这样配置:
```
"vue/html-indent": ["error", 2]
```
这样,如果你在 Vue 或 HTML 文件中使用了错误的缩进方式,就会得到一个 ESLint 错误。