Formatting of *.ts files?

• I have searched through existing issues

Feature Request

Hi, sorry for perhaps a silly mistake on my end, but unless I’m understanding something wrong, formatting of plain .ts files is not supported at the moment (model / service .ts files)? The only way I’ve managed to make it work was to install the prettier vscode plugin, but that would then mess up the html formatting in .vue files. TS code inside .vue files which is inside <script lang="ts"> tag does get formatted without any issues.

Here’s my .vscode/settings.json

{
  "editor.insertSpaces": true,
  "editor.formatOnSave": true,
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.ts": "prettier",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned",
      "wrap_line_length": 120,
      "indent_handlebars": true
    },
    "cSpell.words": [
      "validatable"
    ],
    "editor.tabSize": 2
  },
  "search.exclude": {
    "package-lock.json": true
  }
}

.prettierrc

{
  "trailingComma": "all",
  "jsxBracketSameLine": true,
  "printWidth": 120,
  "arrowParens": "avoid"
}

.prettierignore

.vscode/*
settings.json
tsconfig.*
tslint.json
.eslintrc.json

.editorconfig

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true

[*.ts]
quote_type = double

[*.md]
max_line_length = off
trim_trailing_whitespace = false

tslint.json

{
  "defaultSeverity": "warning",
  "extends": [
    "tslint:recommended"
  ],
  "linterOptions": {
    "exclude": [
      "node_modules/**",
      ".vscode/**"
    ]
  },
  "rules": {
    "no-empty": false,
    "quotemark": [
      true,
      "double"
    ],
    "indent": [
      true,
      "spaces",
      2
    ],
    "interface-name": false,
    "ordered-imports": false,
    "object-literal-sort-keys": false,
    "no-consecutive-blank-lines": true,
    "eofline": false,
    "member-access": [
      true,
      "no-public"
    ],
    "max-classes-per-file": false,
    "arrow-parens": [
      true,
      "ban-single-arg-parens"
    ]
  }
}

Thank you!

[octref]

I don’t know how to turn it off for html inside .vue files.

F1, run this command to open settings.json:

{
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "vetur.format.defaultFormatter.html": "<YOUR_CHOICE>",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.js": "prettier"
}

Open settings UI, then

[tihomir-kit]

That’s it! Perfect, thanks a lot!

This bit did it, I didn’t think of solving it that way:

"[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },