Vetur: Emmet and ESLint not activated for Vue files, while working for .js

[dschreij]

• Platform: Win
• Vetur version: 0.7.0
• VSCode version: 1.13.1

I am experiencing a problem where no VSCode plugins appear to be activated for .vue files. I have installed eslint globally:

~
PS H:> npm ls -g --depth=0
C:\Users...\AppData\Roaming\npm
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]
~

I have added the necessary entries to my User's settings.json to activate Emmet or ESLint, as described in the Vetur instructions:

To use Eslint:
~
"eslint.validate": [
"javascript",
"javascriptreact",
"vue"
],
~
And to use emmet:
~
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
~

The weird thing is that neither Emmet or ESLint (or any other plugin for that matter) is activated for Vue files, even though syntax highlighting works, and ESLint does work for .js files. There are no other Vue plugins installed on my system.

I have another project for which these plugins do work, but there I have installed eslint etc. locally. Could this be an explanation? Shouldn't vetur be able to work with globally installed npm packages as well, or am I doing something else wrong?

[octref]

For emmet, are you using emmet.useNewEmmet: true?

For ESLint, you need to have the correct eslint plugins installed locally.
I think the common practice is to install ESLint and ESLint plugins as local devDependencies.

For example, try vue-cli with webpack or egoist/vuepack and see how they setup ESLint.

[dschreij]

I indeed had the emmet.useNewEmmet: true setting on, and switching this back to false made Emmet work in the Vue templates again! What a pity this breaks the vue plugin as the new Emmet has quite some nice features.

I am trying to install eslint + plugins locally at this moment and will report back about how this ends up.

[dschreij]

No luck. Even when installed locally, I don't see the Eslint symbol appear in the bottom status bar, or see any other sign of that it scans my code.

[dschreij]

I have made some progress, and see that ESLint is working in the Vue file, but it seems not to be using the correct configuration. For a bound attribute in a vue element such as
~

~
it shows a linting error for the colon of :someVar that says: [eslint]: Parsing error: Unexpected token :.
Maybe it is using the react parser, or something else is configured incorrectly. I'll keep looking.

[HerringtonDarkholme]

What's your local eslint configuration file?

[dschreij]

I think I have just fixed it. I first tried using [email protected] but to no avail. I then upgraded to eslint-plugin-vue@beta (which currently is at version 3.1.3) and it suddenly started working again after adding:

~
"extends": [
"eslint:recommended",
"plugin:vue/recommended"
],
~

to my .eslintrc.json file. This causes eslint to parse vue files again. In contrast to .js files though, I don't see the ESLint symbol appear at the bottom right of the VSCode status bar, but ESLint seems to function normally. This is a bit misleading and may have caused some of my confusion.

For completeness sake:

• Here is my .eslintrc.json:

~
{
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:vue/recommended"
],
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true
},
"sourceType": "module"
},
"rules": {
"no-const-assign": "warn",
"no-this-before-super": "warn",
"no-undef": "warn",
"no-unreachable": "warn",
"no-unused-vars": "warn",
"constructor-super": "warn",
"valid-typeof": "warn",
"indent": [
"error",
"tab"
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"warn",
"single"
],
"semi": [
"error",
"always"
]
},
"globals": {
"require": true,
"alertify": true,
"axios": true,
"$": true,
"Vue": true,
"moment": true,
"Turbolinks": true
}
}
~

Here is my npm ls
~
PS H:\Code\project> npm ls --depth=0
project@ H:\Code\project
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- chart.[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]
~

[dschreij]

For emmet, are you using emmet.useNewEmmet: true?

Just to be sure, am I supposed to have this setting to true or false for Emmet to work correctly in Vue files? I have set it to false again, and now emmet works, but I could also read your reply as suggesting this setting has to be set to true.

[HerringtonDarkholme]

Since eslint is working, I think OP has solved the problem.

For emmet, please see https://github.com/octref/vetur/issues/232 for more detail.

Wait for VSCode's new release :)

[dschreij]

Thanks for the update! I'm always glad to know I am not the only one facing a certain problem ;)
Looking forward to the next release. The new Emmet features are awesome.