Vue（或其他文件）在vscode中的格式问题

Vue总有一项令我不爽的一点，那就是，不管他的默认格式化工具是现在的Volar也好，还是以前的Vuter也罢，总会和我的Eslint配置文件冲突。

索性我就将默认的vue格式化工具交给Eslint，如下:

// settings.json
...
"[vue]": {
        "editor.defaultFormatter": "dbaeumer.vscode-eslint",
        "editor.formatOnSave": true,
        "editor.formatOnType": false
    },
...

但是很快我就发现了问题，ESlint能管辖 ts/js， 但是没法管到 less/css 和 html 部分，所以我不得不研究几个方案来解决这个膈应人的问题

方案1: 把 ts/js 代码拆成单独的文件，形如:

// App.vue
<script setup lang="ts" src="/path/to/script.ts"></script>
...

好家伙，人家Vue费劲心思让你模块化你直接给人家拆了，我觉得不行。

方案2: 既然ESlint不能管到这些文件，我直接让他管辖到这部分不就行了？

我的结论是：想法很好，太麻烦了，不弄

方案3: 让Format工具按照顺序执行，先用Volar格式化vue文件，再用ESlint格式化 ts/js 代码块。

我的结论：可接受的方案

使用VScode插件Multiple Formatters，接着去settings.json设置Formatter的顺序, 如下：

// settings.json
...
 "[vue]": {
        // 此行表示将vue的formatter交给 multi-formatter 插件处理
        "editor.defaultFormatter": "Jota0222.multi-formatter",
        // 此处定义处理顺序
        "multiFormatter.formatterList": [
            "Vue.volar",
            "dbaeumer.vscode-eslint"
        ],
        "editor.formatOnSave": true,
        "editor.formatOnType": false
    },
...