Not working with .vue files

[Kocal]

Hi,

I'm actually working on an implementation of precise-commits for my project vue-web-extension and I find out that is not working on .vue files.

Here is the most important parts of my package.json:

{
  "scripts": {
    "precommit": "precise-commits --whitelist='src/**/*.{js,vue}'",
    "prettier": "prettier 'src/**/*.{js,vue}'",
    "prettier:write": "npm run prettier -- --write"
  },
  "devDependencies": {
    "husky": "^0.14.3",
    "precise-commits": "^1.0.2",
    "prettier": "^1.13.5",
    "vue-loader": "^15.2.0",
    "vue-template-compiler": "^2.5.13",
  }
}

and my .prettierrc:

{
    "singleQuote": true,
    "printWidth": 180,
    "trailingComma": "es5"
}

The bug

So I have a badly-formatted file:

<!-- src/popup/App.vue -->

<template>
  <div>
    <router-view/>
  </div>
</template>

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

I update one line, commit, and this is what precise-commits outputs:

husky > npm run -s precommit (node v9.11.1)

✔  precise-commits: 1 modified file(s) found
✔  [1/1] Processing file: src/popup/App.vue

✖  precise-commits: An Error occurred

TypeError: options.locStart is not a function
    at findNodeAtOffset (/home/kocal/Dev/foobarqsd/node_modules/prettier/index.js:10016:23)
    at Object.calculateRange (/home/kocal/Dev/foobarqsd/node_modules/prettier/index.js:10107:29)
    at formatRange (/home/kocal/Dev/foobarqsd/node_modules/prettier/index.js:10306:25)
    at format (/home/kocal/Dev/foobarqsd/node_modules/prettier/index.js:10355:12)
    at formatWithCursor (/home/kocal/Dev/foobarqsd/node_modules/prettier/index.js:10380:12)
    at /home/kocal/Dev/foobarqsd/node_modules/prettier/index.js:31209:15
    at Object.format (/home/kocal/Dev/foobarqsd/node_modules/prettier/index.js:31228:12)
    at /home/kocal/Dev/foobarqsd/node_modules/precise-commits/lib/precise-formatters/prettier.js:42:64
    at Array.forEach (<anonymous>)
    at Object.formatRanges (/home/kocal/Dev/foobarqsd/node_modules/precise-commits/lib/precise-formatters/prettier.js:41:25)


husky > pre-commit hook failed (add --no-verify to bypass)
➜  foobarqsd git:(master) ✗ 

So I dumped options with a console.log(options) on line 10014 of node_modules/prettier/index.js, and this is what I got:

Click to expand

{ filepath: '/home/kocal/Dev/foobarqsd/src/popup/App.vue',
  rangeStart: 18,
  rangeEnd: 37,
  plugins: 
   [ { languages: [Array], options: [Object], printers: [Object] },
     { parsers: [Object] },
     { languages: [Array], options: [Object], printers: [Object] },
     { parsers: [Object] },
     { languages: [Array], printers: [Object] },
     { parsers: [Object] },
     { languages: [Array], options: [Object], printers: [Object] },
     { parsers: [Object] },
     { languages: [Array], options: [Object], printers: [Object] },
     { parsers: [Object] },
     { languages: [Array], printers: [Object] },
     { parsers: [Object] },
     { languages: [Array], printers: [Object] },
     { parsers: [Object] } ],
  parser: 'vue',
  astFormat: 'vue',
  locEnd: null,
  locStart: null,
  printer: 
   { print: [Function: genericPrint$7],
     embed: [Function: embed$6],
     massageAstNode: [Function: clean] },
  arrowParens: 'avoid',
  bracketSpacing: true,
  cursorOffset: -1,
  insertPragma: false,
  jsxBracketSameLine: false,
  pluginSearchDirs: [],
  printWidth: 80,
  proseWrap: 'preserve',
  requirePragma: false,
  semi: true,
  singleQuote: false,
  tabWidth: 2,
  trailingComma: 'none',
  useFlowParser: false,
  useTabs: false }

---

I tried to modifiy a classical .js file and it's working as expected.

It didn't come from Prettier itself, because yarn run prettier:write correctly reformat my Vue file.

Also in the options dump, I see that singleQuote, printWidth and trailingComma do not follow my .prettierc... Is it something related?

---

Please tell me if you need more information, I would be glad to help you.

Thanks in advance

[JamesHenry]

Vue files were previously not supported for range formatting by Prettier.

Now they are! :) prettier/prettier#4868

https://prettier.io/blog/2018/07/29/1.14.0.html#vue

[Kocal]

Oh, awesome! 😄