Vue SFC only work with TypeScript parser (and babel-vue), and also abnormally

[patarapolw]

Versions

macOS Catalina 10.15.6

VSCode version

• 1.49.0
• e790b931385d72cf5669fcefc51cdf65990efa5d
• x64

amatiasq.sort-imports version v6.2.2

Current results

The sorting result looks like this.

<script lang="ts">

import Vue from 'vue'

import HelloWorld from './components/HelloWorld.vue'

export default Vue.extend({

Why the space below <script> tag?

• Seems to be Vetur's problem -- https://github.com/vuejs/vetur/issues/730

Other attempts

Currently package.json needs this.

{
  "devDependencies": {
    "import-sort-parser-typescript": "^6.0.0"
  },
  "importSort": {
    ".js, .jsx, .ts, .tsx, .vue": {
      "parser": "typescript",
      "style": "module"
    }
  }
}

import-sort-parser-babel-vue and parser: "babel-vue" also works.

No parser

{
  "importSort": {
    ".js, .jsx, .ts, .tsx, .vue": {
      "style": "module"
    }
  }
}

• Cannot read property 'parseImports' of undefined

"parser": "babylon"

• Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>
• Installing import-sort-parser-babylon does not change nor solve the problem.

Suggestions, if possible

• Global settings, without package.json, in settings.json, for "parser": "babel-vue"

Perhaps it should be something like this (in settings.json).

• Not sure why .jsx, .tsx, .mjs, .es, .es6 not included by default
• default-parser is not a valid option
• "sort-imports.default-sort-style": "module" in settings.json is useless. It doesn't change sorting style from eslint to module at all.

{
    "sort-imports.languages": [
        "javascriptreact",
        "typescriptreact",
        "vue",
        "javascript",
        "typescript"
    ],
    "sort-imports.default-sort-style": "module",
    "sort-imports.default-parser": "babel-vue",
}