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

```js { 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! :) https://github.com/prettier/prettier/pull/4868

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

[Kocal]

Oh, awesome! 😄