setting up VS Code linting for for TSLint (NestJs) and ESLint (VueJs)

I'm using NestJs with Typescript / TSLint and VueJs with Javascript / ESLint. My VSCode extensions are ESLint, TSLint, Prettier and Vetur. When developing the backend everything is fine, the code gets formatted well. When developing with Vue, I use the airbnb linter config and I'm having problems with it.

Let's say I have this vue instance

<script>
export default {
  components: {},
  data() {
    return {
      foo: '',
    };
  },
};
</script>

and I save the file, the formatter updates the code to

<script>
export default {
  components: {},
  data() {
    return {
      foo: ""
    };
  }
};
</script>

I can't run the code because the linter throws errors based on the airbnb linter config. Although it shouldn't fix the code because I've already used the airbnb style guide.

I use settings sync so I could share my whole VSCode settings for reproduction. These are my settings

{
    "vetur.validation.template": true,
    "eslint.autoFixOnSave": true,
    // ...
    "javascript.updateImportsOnFileMove.enabled": "always",
    // ...
    "typescript.updateImportsOnFileMove.enabled": "always",
    "prettier.singleQuote": true,
    "prettier.trailingComma": "es5",
    "prettier.useTabs": true,
    "editor.formatOnSave": true,
    // ...
    "vetur.format.defaultFormatter.html": "prettier"
}

You can see the whole gist here

https://gist.github.com/matthiashermsen/9620a315960fa7b9e31bf6cda8583e84

So is Prettier struggling with TSLint and ESLint? I would like to have a standard setup for Typescript and Javascript projects.

I also tried to create a new Vue project using prettier as a linter and there everything worked fine. So it seems it's just struggling with the airbnb linter config.

Any ideas? Thanks for help!