eslint-plugin-prettier: Bad formatting closing script-tag in vue-files

What version of eslint are you using? "eslint": "4.15.0",

What version of prettier are you using? "prettier": "1.10.2",

What version of eslint-plugin-prettier are you using? "eslint-plugin-prettier": "2.5.0",

Please paste any applicable config files that you’re using (e.g. .prettierrc or .eslintrc files)

const resolve = require('path').resolve;

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
    node: true,
    jest: true
  },
  extends: [
    'standard',
    'prettier',
    'plugin:vue/base',
    'plugin:vue/essential',
    'plugin:vue/strongly-recommended',
    'plugin:vue/recommended'
  ],
  plugins: ['html', 'variables', 'prettier'],
  rules: {
    'prettier/prettier': 'error',
    'import/no-unresolved': 'error',
    'variables/only-ascii-variables': 'error'
  },
  settings: {
    'import/resolver': {
      webpack: {
        config: {
          resolve: {
            alias: {
              '~': __dirname
            }
          }
        }
      }
    }
  }
};

"prettier": {
    "printWidth": 120,
    "tabWidth": 2,
    "useTabs": false,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "none",
    "bracketSpacing": true
  },

What source code are you linting? https://pastebin.com/Hzik4pNs

What did you expect to happen? Formatting correct

What actually happened? After updating eslint-plugin-prettier from 2.4.0 to 2.5.0 and run eslint --fix --ext .js,.vue --ignore-path .gitignore .

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 11
Comments: 21 (6 by maintainers)

Most upvoted comments

If you’re using eslint-plugin-html and NOT eslint-plugin-vue then you can force the prettier within eslint to use the babylon parser (as you’re acting on a blob of javascript not a whole vue file) by customising the your prettier options within eslint:

Within your .eslintrc, modify your prettier/prettier rule to add a config that overrides the prettier parser for vue files:

{
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "overrides": [{ "files": "*.vue", "options": { "parser": "babylon" } }]
      }
    ]
  }
}

BPScott on Sep 30, 2018

Hi folks.

There are potentially three issues here, based around how if you have eslint-plugin-vue enabled, eslint-plugin-html enabled, or both plugins enabled. Before I delve into the scenarios, lets talk about ESLint processors…

Processors allow ESLint read some file that has JS embedded into it (such as fenced code blocks in markdown or <script> tags in a html file) extract those blocks of JS and pass them into other ESLint rules. This is what eslint-plugin-html does for .vue files - it extracts the <script> block and passes just that into ESLint. eslint-plugin-vue, however passes the whole vue file as-is into ESLint as it provides rules around formatting your <template> block too.

This leaves eslint-plugin-prettier in a bit of a quandry - it needs to pick a parser to use to read the vue file. If you’re using eslint-plugin-vue we should use the vue parser as we’re acting upon a whole vue file. However if you’re using eslint-plugin-html then we should use the babylon parser as we’re acting upon just the JS code extracted from the script tag. If you’re using both then all bets are off and I’m not sure what you’ll be acting upon and you’ll end up in @Gomah’s state where you’re inadvertently not running any linting for your vue <template> and <style> elements.

If you are using just eslint-plugin-vue: You should be good. eslint-plugin-prettier will receive a full vue file and will format it with the vue parser.

If you are using just eslint-plugin-html: Currently this will break as eslint-plugin-prettier will just the <script> part and try to format it with the vue parser. We could change this to force the use of the babylon parser, but then we’d break everybody using just eslint-plugin-vue.

If you are using both plugins: This will break for the same reason as above.

I think the correct solution to this is for eslint-plugin-html to drop their support of .vue files, and to instead tell people to use eslint-plugin-vue if they want to lint their vue files. That will also allow them to lint their template and style sections, rather than just the JS section.

BPScott on Sep 27, 2018