Bad formatting closing script-tag in vue-files

[Alex-Sokolov]

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 .

[azz]

This odd because the prettier output is fine.

[not-an-aardvark]

Does this still happen if you remove eslint-plugin-html?

[azz]

Oh I think I see what is happening, the contents of the <script> tag are being passed to prettier and prettier is told it is a vue file (from #76). Prettier will then treat the string that is JS as vue (HTML), and thus formatted as-is (minus chomping the trailing newline).

What should be happening is this plugin should pass the entire file contents to prettier.

[Alex-Sokolov]

@azz yes, but I have pre-commit hook and that stop me :)

@not-an-aardvark after exclude html from plugins start work (and vue rules start working with big amount of vue/* errors)

[Gomah]

Updating eslint-plugin-html to 4.0.2 fixes it for me 👍

[phouri]

Updating eslint-plugin-html to 4.0.2 did not solve for me unfortunately :/

Still getting this error, eslintrc is :

parserOptions: {
    parser: 'babel-eslint',
    ecmaVersion: 2017,
    sourceType: 'module'
  },
  env: {
    browser: true,
    es6: true,
  },
  // extends: ['prettier', ],
  extends: [
    'plugin:vue/essential',
    'prettier',
    'eslint:recommended',
  ],
  // required to lint *.vue files
  plugins: [
    'html',
    'prettier',
    'import'
  ],

Also //eslint-ignore-next-line doesn't work, seems like it does think the js file is indeed html, any idea how to fix?

[Gomah]

I actually removed eslint-plugin-html (see why) & opted for the following config with vue:

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
  },
  env: {
    browser: true,
    node: true,
  },
  extends: [
    'airbnb-base',
    'plugin:prettier/recommended',
    'plugin:vue/recommended',
  ],
  plugins: ['prettier', 'vue'],
  rules: {
    'prettier/prettier': ['error', { singleQuote: true, trailingComma: 'es5' }],
    'import/extensions': [
      'error',
      'always',
      {
        js: 'never',
        vue: 'never',
      },
    ],
    'vue/max-attributes-per-line': [
      2,
      {
        singleline: 3,
        multiline: {
          max: 1,
          allowFirstLine: false,
        },
      },
    ],
  },
  settings: {
    'import/core-modules': [
      'vuex',
      'vue',
      'vue-server-renderer',
      'vue-router',
      'vuex-router-sync',
      'webpack-node-externals',
    ],
    'import/resolver': {
      webpack: {
        config: {
          resolve: {
            extensions: ['.js', '.vue'],
            alias: {
              '~': __dirname,
              '@': __dirname,
            },
          },
        },
      },
    },
  },
};

[jay-hankins]

I'm seeing this as well, and I'm not using eslint-plugin-html.

.eslintrc.js:

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  env: {
    browser: true,
  },
  extends: [
    "airbnb-base",
    "plugin:vue/recommended",
    "plugin:prettier/recommended",
  ],
  // // required to lint *.vue files
  // plugins: [
  //   'html'
  // ],
  // check if imports actually resolve
  settings: {
    'import/resolver': {
      webpack: {
        config: 'build/webpack.base.conf.js'
      }
    }
  },
  // add your custom rules here
  rules: {
    // don't require .vue extension when importing
    'import/extensions': ['error', 'always', {
      js: 'never',
      vue: 'never'
    }],
    // disallow reassignment of function parameters
    // disallow parameter object manipulation except for specific exclusions
    'no-param-reassign': ['error', {
      props: true,
      ignorePropertyModificationsFor: [
        'state', // for vuex state
        'acc', // for reduce accumulators
        'e' // for e.returnvalue
      ]
    }],
    // allow optionalDependencies
    'import/no-extraneous-dependencies': ['error', {
      optionalDependencies: ['test/unit/index.js']
    }],
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    // ignore max length
    'max-len': 0,
  }
}

[Xotic750]

We are also having this problem. From the cli we are not seeing any error, but in our webpack build we get the following for every vue file in the project.

/Users/grahamfairweather/ProReNataJournal/Byxelkrok/Modules/Calendar/Components/ToggleLayersSelector.vue
  233:3  error  Delete `⏎`  prettier/prettier

"babel-eslint": "^8.2.3",
"eslint-plugin-html": "^4.0.3",
"eslint-plugin-prettier": "^2.6.0",
"eslint-plugin-vue": "^4.4.0",
"prettier": "^1.12.0",

If I can give more information to assist, please just ask (assuming that this is the plugin that is at fault?).

[h2jorm]

@Xotic750 I met the same problem with you and now have solved it by changing the vue-loader option in webpack.

// wrong config
{
  test: /\.vue$/,
  loader: [
    {
      loader: 'vue-loader',
      options: {
        loaders: {
          // ...
          js: ['babel-loader', 'eslint-loader'],
        },
      },
    },
  ],
},

// right config
{
  test: /\.vue$/,
  loader: [
    {
      loader: 'vue-loader',
      options: {
        loaders: {
          // ...
        },
      },
    },
    'eslint-loader',
  ],
},

Do not add eslint-loader in vue-loader options but outside. May this info helps you.

[Xotic750]

@leeching Thanks, that's very interesting. It's quite different information to what our team gleaned several months back. Initial tests look promising, but we continue to test. May I ask where you found this information?

[h2jorm]

@Xotic750 This is just my personal practice.

[ryo-utsunomiya]

I moved eslint-loader to 'pre' loader and fixed this problem.

// webpack.config.js
module.exports = {
  // ... other options
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        exclude: /node_modules/
      }
    ]
  }
}

see:
https://vue-loader-v14.vuejs.org/en/workflow/linting.html
https://webpack.js.org/configuration/module/#rule-enforce

[fzred]

+1,We are also having this problem.
.eslintrc.js

{
  "extends": [
    "plugin:prettier/recommended"
  ],
  "plugins": [
    "html"
  ],
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "no-multiple-empty-lines": 2,
    "prettier/prettier": [
      "error",
      {
        "singleQuote": true,
        "semi": false
      }
    ]
  }
}

[busheezy]

same issue as frzed