stylus style formatting in vue files with VSCode - vue.js

Question

I have a vue file composed as followed (not really important) :
<template>
//some pseudo-html
</template>
<script>
//some javascript
</script>
<style lang='stylus'>
#import '~variables'
.card
cursor pointer
//some more stylus
</style>
I have formatOnSave activated in VSCode, I also have vetur and esLint installed.
When I use CSS code inside a classic <style> tag, I have no problem, but when I use lang='stylus', ESLint is still looking for CSS ( I get syntax errors like [css] { expected (css-lcurlyexpected) ).
Also, the auto-format on save just mess eveything up when I use stylus, it puts everything on the same line. Result after save :
<style lang='stylus'>
#import '~variables'
.card cursor pointer position relative padding //some more stylus
</style>
I tried to change the followinf settings in vscode :
vetur.format.defaultFormatter.css
vetur.format.defaultFormatter.stylus
but to no avail.
My current settings:
{
"workbench.colorTheme": "FlatUI Immersed",
"workbench.iconTheme": "material-icon-theme",
"files.trimTrailingWhitespace": true,
"editor.insertSpaces": true,
"editor.formatOnSave": true,
"editor.detectIndentation": false,
"editor.formatOnPaste": false,
"editor.formatOnType": true,
"editor.renderControlCharacters": true,
"editor.renderWhitespace": "all",
"editor.minimap.enabled": false,
"editor.mouseWheelScrollSensitivity": 2,
"editor.tabSize": 4,
"editor.fontSize": 15,
"window.zoomLevel": -1,
"workbench.startupEditor": "newUntitledFile",
"markdown.extension.preview.autoShowPreviewToSide": true,
"markdown.preview.breaks": true,
}
And workspace specific settings :
"settings": {
"files.associations": {
"*.vue": "html"
},
"editor.tabSize": 2,
"editor.formatOnSave": true,
// Defines space handling before function argument parentheses. Requires TypeScript >= 2.1.5.
"typescript.format.insertSpaceBeforeFunctionParenthesis": true,
// Defines space handling before function argument parentheses. Requires TypeScript >= 2.1.5.
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// Eslint options
"eslint.enable": true,
"eslint.options": {
"extensions": [
".html",
".js",
".vue",
".jsx"
]
},
// An array of language ids which should be validated by ESLint
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
}
],
// Run the linter on save (onSave) or on type (onType)
"eslint.run": "onSave",
// Turns auto fix on save on or off.
"eslint.autoFixOnSave": true,
}
It would be absolutely awesome if someone knows how to have the formatter and the linter correctly take that into account, but after 2 hours digging, i would honestly settle for a way to disable the formatter and the linter just for the <style> tag.

Answer 1

So, after digging some more, i found a solution :
delete this part of the settings :
"files.associations": {
"*.vue": "html"
},
And replace html by vue in this part :
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
And also add :
"vetur.format.defaultFormatter.js": "none"