Typescript lint auto-fix breaks itself when .vue file is saved

[jonek]

• [x] I have searched through existing issues
• [x] I have read through docs
• [x] I have read FAQ

Info

• Platform: Linux
• Vetur version: 0.12.6
• VS Code version: 1.27.2

Problem

In a .vue file I get warning (green squiggly line) from eslint/prettier that I can quick-fix (using Ctrl+.). When I try to save the file afterwards, the quick-fix (parentheses were added) gets removed and the warning appears again.

Code:

<script lang="ts">
let foo = 1;
let bar = 2;
let baz = foo / bar * 3;
</script>

Warning: [eslint] Replace `foo·/·bar` with `(foo·/·bar)` (prettier/prettier) Screenshot:

I observed that the same code, put into a .ts file (not including the script tags) does not result in a warning. My .ts files also get formatted on safe but in a different way (e.g. ; is not added at end of line like it is done in .vue files). How can I get the same linting behavior regarding warnings, quick-fixing, and auto formatting on save in both .vue and .ts files?

PS: When running vue-cli-service lint or npm run lint on the command line, the missing parentheses are added automatically in the .vue as well as in the .ts file. The rules for auto-formatting seem to be the same for both file types in that case.

[octref]

I need to be able to reproduce it first. Can you tell me which version of vue-cli are you using and what's your config for creating your projects?

[muratkemaldar]

Hi, Also trying to setup Vue + TS + Vetur, and having a similar issue, Vetur crashes for me when I import a specific .vue file. This is what the Output panel prints:

TypeError: Cannot read property 'parameters' of undefined at inferFromAnnotatedParameters (c:\Users\murat.vscode\extensions\octref.vetur-0.12.6\server\node_modules\typescript\lib\typescript.js:42304:33) at checkFunctionExpressionOrObjectLiteralMethod (c:\Users\murat.vscode\extensions\octref.vetur-0.12.6\server\node_modules\typescript\lib\typescript.js:42645:33) at checkObjectLiteralMethod (c:\Users\murat.vscode\extensions\octref.vetur-0.12.6\server\node_modules\typescript\lib\typescript.js:43520:38) at checkObjectLiteral (c:\Users\murat.vscode\extensions\octref.vetur-0.12.6\server\node_modules\typescript\lib\typescript.js:39374:32) at checkExpressionWorker (c:\Users\murat.vscode\extensions\octref.vetur-0.12.6\server\node_modules\typescript\lib\typescript.js:43638:28) at checkExpression (c:\Users\murat.vscode\extensions\octref.vetur-0.12.6\server\node_modules\typescript\lib\typescript.js:43586:42) at checkExpressionForMutableLocation (c:\Users\murat.vscode\extensions\octref.vetur-0.12.6\server\node_modules\typescript\lib\typescript.js:43498:24) at checkPropertyAssignment (c:\Users\murat.vscode\extensions\octref.vetur-0.12.6\server\node_modules\typescript\lib\typescript.js:43509:20) at checkObjectLiteral (c:\Users\murat.vscode\extensions\octref.vetur-0.12.6\server\node_modules\typescript\lib\typescript.js:39371:32) at checkExpressionWorker (c:\Users\murat.vscode\extensions\octref.vetur-0.12.6\server\node_modules\typescript\lib\typescript.js:43638:28) [Info - 11:39:23 AM] Connection to server got closed. Server will restart.

The imported .vue file looks like this, and when I remove the "watch" part, the import works.

// this file is imported from another .vue file with <script lang="ts">

<script>
import Bildungshistorie from "../../views/Bildungshistorie";
import loadUserConfig from "../../mixins/loadUserConfig";

export default {
  mixins: [loadUserConfig],
  components: {
    Bildungshistorie
  },
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      localShowBildungshistorieModal: this.value
    };
  },
  watch: {
    value(value) {
      this.localShowBildungshistorieModal = value;
    },
    localShowBildungshistorieModal(value) {
      this.$emit("input", value);
    },
    missingBildungshistorie(value) {
      if (value === false) {
        this.$emit("onConfirmBildungshistorie");
      }
    }
  }
};
</script>

I can reproduce this crash by removing / adding the ".vue" during import.

UPDATE: When adding "lang='ts'" to the imported files script tag, the import seems the work, and the crash doesn't happen. Currently only the "importing" file had the "lang='ts'" attribute, hope this helps you in some way.

[jonek]

@octref my vue-cli is version 3.0.1 I created a demo project here: https://github.com/jonek/vue-typescript-prettier While playing with the .vscode/settings.json I found out that my problem is related to the settings: eslint.autoFixOnSave, editor.formatOnSave, and eslint.validate.

I created some commits in that repository to demonstrate the problem. Version 4800917 lets you replicate the problem I described initially. Version 37d906e seems to have fixed the described problems using this .vscode/settings.json:

{
  "eslint.validate": [
    "javascript",
    {
      "language": "typescript",
      "autoFix": true
    },
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "eslint.autoFixOnSave": true,
  "editor.formatOnSave": false
}