Prettier 和 "vue/script-indent" 之间的冲突可以通过在 Prettier 配置文件中设置 "vueIndentScriptAndStyle": true 来解决。
在项目根目录下创建或修改 .prettierrc 文件，添加以下配置：
{
"vueIndentScriptAndStyle": true
}
这样，Prettier 就会遵循 "vue/script-indent" 的规则进行格式化，避免冲突。
vue文件script内缩进2tab的 .eslintrc文件配置：
{
"rules": {
"vue/script-indent": ["error", 2, {
"baseIndent": 1
}]
},
"overrides": [
{
"files":['*.vue'],
"rules":{
"indent": "off"
}
}
]
}
完整.eslintrc配置
{
"root": true,
"env": {
"browser": true,
"node": true,
"es6": true
},
"extends": [
"plugin:vue/vue3-recommended",
"plugin:prettier/recommended",
"plugin:@typescript-eslint/recommended"
],
"plugins": [
"import", "simple-import-sort"
],
"parser": "vue-eslint-parser", // 解析.vue文件
"parserOptions": {
"parser": "@typescript-eslint/parser", // 解析<script>标签中的代码
"ecmaVersion": 2021,
"sourceType": "module",
"ecmaFeatures": {
"modules": true,
"jsx": true
}
},
"ignorePatterns": ["dist", "build", "node_modules", ".husky", ".vscode","**/*.min.js", "**/*.md", "**/*.css"],
"rules": {
// eslint-plugin-import 导入顺序
"import/order": ["error", { "groups": ["builtin", "external", "internal"] }],
"@typescript-eslint/no-explicit-any": "off", // @ts-ignore
"vue/multi-word-component-names": "off", // .vue文件明明必须是多个单词命名
"vue/script-indent": ["error", 2, {
"baseIndent": 1
}] // 对script标签内的JavaScript缩进2个tab
},
"overrides":[
{
"files": [
"*.vue"
],
"rules": {
"indent": "off"
}
}
]
}
设置前样式
image.png
.prettierrc文件配置
image.png
设置后样式：
image.png
