Add first-class support for Vue single component files

[renke]

It's probably a good idea to add a dedicated parser for Vue files or least some kind of Vue mode for the existing Babel and TypeScript parsers.

Any example source code and suggestions on how to implement this are highly appreciated, because I have never worked with Vue at all.

[schnetzi]

As mentioned here (https://github.com/renke/import-sort/pull/61#issuecomment-376412627) currently my imports from the style-part are getting moved to the script-part. Which doesn't work of course :/ Can I prevent that somehow?

[juliovedovatto]

@renke I noticed strange behavior using 'vue/script-indent': ['error', 2, { baseIndent: 1 }] eslint rule

Current config:

{
  ".js, .jsx, .es6, .es": {
    "parser": "babylon",
    "style": "eslint",
    "options": {}
  },
  ".ts, .tsx, .vue": {
    "parser": "typescript",
    "style": "eslint",
    "options": {}
  }
}

Plugin works well with .js(x) and .ts(x), but not for .vue files.

Original:

<template>
[...]
</template>

<script lang="ts">
  import { func } from 'a'
  import * as x from 'b'
  import c from c

[...]
</script>

<style>
[...]
</style>

Expected

<template>
[...]
</template>

<script lang="ts">
  import * as x from 'b'

  import c from c
  import { func } from 'a'

[...]
</script>

<style>
[...]
</style>

What is returned:

<template>
[...]
</template>

<script lang="ts">

import * as x from 'b'

import c from c
import { func } from 'a'

[...]
</script>

<style>
[...]
</style>

Problems:

• Sort imports ignores the base indent rule
• Adds a extra line before first import (as mentioned in #52)

I tried to debug code and run written tests to check the root cause, but 3 days in a row and no luck to reverse engineer and understand what was made.

I was wondering if it would be possible to use CLIEngine eslint lib to check and apply any pending eslint rules before replacing the output.

[Calvin-LL]

I made a parser that runs vue-parser on vue code before parsing imports. Should hopfully solve everyone's problem. https://www.npmjs.com/package/import-sort-parser-babel-vue