Prettier 和 "vue/script-indent" 之間的沖突可以通過在 Prettier 配置文件中設(shè)置 "vueIndentScriptAndStyle": true 來解決。
在項目根目錄下創(chuàng)建或修改 .prettierrc 文件根资，添加以下配置：
{
"vueIndentScriptAndStyle": true
}
這樣架专，Prettier 就會遵循 "vue/script-indent" 的規(guī)則進行格式化，避免沖突玄帕。
vue文件script內(nèi)縮進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>標(biāo)簽中的代碼
"ecmaVersion": 2021,
"sourceType": "module",
"ecmaFeatures": {
"modules": true,
"jsx": true
}
},
"ignorePatterns": ["dist", "build", "node_modules", ".husky", ".vscode","**/*.min.js", "**/*.md", "**/*.css"],
"rules": {
// eslint-plugin-import 導(dǎo)入順序
"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標(biāo)簽內(nèi)的JavaScript縮進2個tab
},
"overrides":[
{
"files": [
"*.vue"
],
"rules": {
"indent": "off"
}
}
]
}
設(shè)置前樣式
image.png
.prettierrc文件配置
image.png
設(shè)置后樣式：
image.png
