Vetur: Prettier not picking up eslintintegration settings working on vue files

[SteveALee]

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

Info

• Platform: Windows 10
• Vetur version: 0.11.5
• VS Code version: 1,19.1

Problem

I have a Nuxt project - basically this one without backpack but created with nuxt. Plus my workspace settings are

{
  "prettier.eslintIntegration": true,
  "editor.formatOnSave": true
}

While .js files are correctly formatted on save, without ;. The .vue files are not. ; are added and the indenting of the template section is not adjusted.

Reproducible Case

package.json
```{
"scripts": {
"dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
"build": "nuxt build",
"start": "cross-env NODE_ENV=production node server/index.js",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"precommit": "npm run lint",
"ds": "npm run build && npm run deploy && now alias staging-alwaysinmind",
"dp": "npm run build && npm run deploy && now alias alwaysinmind"
},
"dependencies": {
"nuxt": "^1.0.0-rc11",
"express": "^4.16.2",
"@nuxtjs/axios": "^4.5.0"
},
"devDependencies": {
"autoprefixer": "^7.2.3",
"cross-env": "^5.1.3",
"babel-eslint": "^8.0.3",
"eslint": "^4.13.1",
"eslint-config-standard": "^10.2.1",
"eslint-plugin-html": "^4.0.1",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-node": "^5.2.1",
"eslint-plugin-promise": "^3.6.0",
"eslint-plugin-standard": "^3.0.1",
"now": "^9.0.1",
"tailwindcss": "^0.4.0",
"nodemon": "^1.14.2"
}
}

.eslintrc.js

module.exports = {
root: true,
parser: 'babel-eslint',
env: {
browser: true,
node: true
},
extends: 'standard',
// required to lint *.vue files
plugins: [
'html'
],
// add your custom rules here
rules: {
'space-before-function-paren': [
2,
{
anonymous: 'always',
named: 'never'
}
],
},
globals: {}
}

.editorconfig

editorconfig.org

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false
```

I also have the prettier and ES extensions installed and enabled

[SteveALee]

PS vuetor is basically working as the vue files have correct colour highlighting

[octref]

https://github.com/vuejs/vetur/issues/592#issuecomment-352569685

Basically, eslint-plugin-html has been misused until today. I hope I can direct more people to using eslint-plugin-vue, which is what Vue team is working on and the future.

The webpack templates need to be updated though...I'll ping them.

[SteveALee]

So can I do anything right now to get standard working in the vue files? The indenting is annoying but not such a problem

thanks

[SteveALee]

I mean I swapped over to the using eslint-plugin-vue plugin but it made no difference

[SteveALee]

!!Please Reopen!!

The issues is it's not picking up the eslint settings as specified in the workspace settings. This works fine for js files as described above.

if I add a .prettierrc with no semis then the vue format changes to match on save. Thus the plugin is working fine, it's just not find the eslint standard settings

thanks

[octref]

Vetur only picks up setting from eslintrc, not your workspace settings

[SteveALee]

It would be great if the existing prettier extension behaviour was preserved in Vetur -
eg

prettier.eslintIntegration (default: false) - JavaScript and TypeScript only

Use prettier-eslint instead of prettier. Other settings will only be fallbacks in case they could not be inferred from ESLint rules.

I think it also looks in editorconfig

[octref]

It's impossible to deduce what setup you have without a repro case. So do a fork of https://github.com/octref/veturpack, make modifications, push it and we can take a look.

Use prettier-eslint instead of prettier

We won't do that.

I think it also looks in editorconfig

We won't do that.

[SteveALee]

OK, thanks. If you won't provide those options then I guess I should use .prettierrc and hope it works consistently with prettier, vetur; both VS extensions and commandline. I can live with duoplicating my config as only a few option affect format.

thanks

[octref]

Thanks for understanding. I hope there can be a single truth of the format (as compared to settings scattered between multiple files like .prettierrc and .editorconfig).

[SteveALee]

NP :) It's your project after all :)

I just reworked my config based on your example and the prettier docs for eslint integration :)

[Justineo]

@octref

I've played around with veturpack by making these modifications (see my fork):

1. Removed .prettierrc so that all rules should come from .eslintrc.
2. Installed eslint-config-standard, eslint-plugin-standard, eslint-plugin-node & eslint-plugin-prettier.
3. Reconfigured .eslintrc to extend from standard.

When I tried to format files after these steps, it turns out that the problem described in this issue still exists. ESLint configs are working as expected for .js files but not .vue files.

[octref]

@Justineo Thanks for providing the fork, I'll take a look tomorrow.

[octref]

@Justineo This is caused by Vetur using the bundled version of ESLint (instead of using the one in workspace), and could not find the eslint-* plugins...

I'll add support to allow using locally installed prettier / eslint. You can subscribe to #523 for updates.

[Justineo]

Oh it's great 👍

[initial-wu]

@octref 所以 vetur 没有在 vue script 中支持 prettier.eslintIntegration 的计划吗？文档里把 prettier.eslintIntegration 写在这里容易让人误以为 vetur 支持 eslintrc 配置。

同时维护两份格式化的配置 prettierrc 和 eslintrc 确实是一个不好的实践。
我想 prettier 支持 .editorconfig 和 .eslintrc 的出发点应该就是避免维护多份格式化配置。
和 @SteveALee 一样，我们的项目也选择以 eslintrc 作为主要的格式化配置。对 js 文件来说，prettier 自然的使用 eslintrc 作为格式化依据，对于 vue 文件中的 script，也希望能有同样的效果。

[Justineo]

@octref Sorry to bother, I'm also wondering whether there is any recent plan to work on #523. I'm looking forward to this fix because it's quite bothering that we cannot format .vue files the same way as .js files under current setup.

[octref]

@Justineo I took a look at your fork. You cannot remove plugin:vue/recommended from the extends setup (you can use a lesser version such as vue/base). Otherwise ESLint cannot process the scripts correctly since the scripts live in a vue file.
You can refer to this setup: https://github.com/chrisvfritz/vue-enterprise-boilerplate/blob/master/.eslintrc.js

Specifically, eslint-plugin-vue's base config includes this

  parser: require.resolve('vue-eslint-parser'),

which is needed for linting and formatting js in vue files.

Do not use https://github.com/BenoitZugmeyer/eslint-plugin-html also. eslint-plugin-vue will be the officially maintained project.

Meanwhile I'm working on #523 and it'll be published on the next version.