How to import linting rules from eslint-plugin-vue

I am currently using eslint-plugin-vue for linting of Vue application. But there is no set of JSON rules configuration file which I can import in WebStorm. 

Due to this, WebStorm is giving different warnings from what been defined in eslint-plugin-vue:strongely-recommended. So, is there any way I can update settings present in WebStorm for linting to get all rules from this specific plugin?

29 comments
Comment actions Permalink

 

My .eslintrc contains those rules. But WebStorm is not understanding these rules and showing no error as specified by rules. Any way I can add these rules too?

    "vue/jsx-uses-vars": "error",
    "vue/attribute-hyphenation": "error",
    "vue/html-end-tags": "error",
    "vue/html-indent": "error",
    "vue/html-self-closing": "error",
    "vue/max-attributes-per-line": "error",
    "vue/mustache-interpolation-spacing": "error",
    "vue/name-property-casing": "error",
    "vue/no-async-in-computed-properties": "error",
    "vue/no-dupe-keys": "error"
1
Comment actions Permalink

I have created the config from --print-config command of eslint. You can see various rules specific to vue having 'vue-' initials

https://gist.github.com/akanshgulati/9333206e81f9f63de3121829eeb6a2f4

1
Comment actions Permalink

I have the same issue with vue linting. I used different IDE for the same project based on vue-cli and in that IDE I see an eslint-plugin-vue error which I didn't see in IntelliJ or WebStorm. So, how I can configure linting for vue in WebStorm if it's possible?

Example:

But in different IDE:

 

1
Comment actions Permalink

Same problem for me.

1
Comment actions Permalink

Sorry for the long answer. So, I create a repo on GitHub with the project.

I've tried some different configurations from this and this, but linter just doesn't work as I expect.

What exactly I expect? – This. As you can see, there is an error. on <li v-for="link in links">.

So, the question is, am I doing something wrong with configuring .eslint or WebStorm now can't linting with this plugin?

 

WebStorm info:

WebStorm 2017.3.1
Build #WS-173.3942.31, built on December 12, 2017
Licensed to Arthur Kuz
Subscription is active until May 17, 2018
JRE: 1.8.0_152-release-1024-b8 x86_64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
Mac OS X 10.12.6

1
Comment actions Permalink

linting doesn't seem to work for your configuration when running `npm lint` as well... i had to change your .eslintrc.js as follows to make it work:

module.exports = {
root: true,
parser: 'vue-eslint-parser',
parserOptions: {
parser: 'babel-eslint',
ecmaVersion: 2017,
sourceType: 'module',
},
env: {
browser: true,
},
extends: [
'airbnb-base',
'plugin:vue/essential',
],
// required to lint *.vue files
plugins: [
'vue',
],
...

still, integration doesn't work using this config. Logged as https://youtrack.jetbrains.com/issue/WEB-30394, please follow it for updates

1
Comment actions Permalink

Unfortunately, it doesn't.

https://monosnap.com/file/JTOe2q8xAOd25Xv3NP7mNcsReFa3Ci

This is my `.eslintrc.js` https://pastebin.com/tBMsbz0k

These are settings for PhpStorm: https://monosnap.com/file/uKHQeY4fkVpgPmRMyVzaprehUDq5QM

`package.json`: (some info is stripped out) https://pastebin.com/8UYvwcEg

Eslint itself works fine: https://monosnap.com/file/97gF56XyKNzm51s3PBXNd9lmgvc2TV

I run it as `node_modules/.bin/eslint --fix --ext .js,.vue resources/assets/js`

1
Comment actions Permalink

Not sure I follow you... There are no WebStorm settings for this - it just reads your eslint configs (actually, it just runs eslint that does this). You can override the rules coming from extended configurations in your .eslintrc

0
Comment actions Permalink

Please provide your .eslintrc, package.json and screenshot of ESLint preferences page

0
Comment actions Permalink

what is "../../.eslintrc.js"? Is it a part of your project? Also, please provide  the other infor I asked for - your package.json and screenshot of ESLint preferences page

0
Comment actions Permalink

What IDEA version do you work with? Can you share your eslint configuration and package.json (or, better, a test project that shows up the issue)?

0
Comment actions Permalink

 If you believe that your issue is the same, please can you provide the requested info? Eslint configuration and package.json (or, better, a simple test project that shows up the issue)?

0
Comment actions Permalink

Same here. When could it be addressed?

0
Comment actions Permalink

what build do you use? i don't think you can access PhpStorm daily builds, can you? 'fixed in trunk' doesn't mean 'fixed in latest release'

0
Comment actions Permalink

Build #PS-173.4127.29, built on December 22, 2017

0
Comment actions Permalink

was this fixed in EAP?

0
Comment actions Permalink

Sorry for multiposting, could you please post a link to the release notes?

0
Comment actions Permalink

No, the fix is not included in any EAP

0
Comment actions Permalink

@Elena Pogorelova when we can expect this to be fixed as the issue is known and many users are facing it gradually?

0
Comment actions Permalink

Fix can be expected in 2018.1

0
Comment actions Permalink

Cool! Do you already know the release date with this fix?

0
Comment actions Permalink

2018.1 is planned for March

0
Comment actions Permalink

2018.1 has been released but vue-eslint-parser rules still don't work in phpstorm

0
Comment actions Permalink

works for me in 2018.1.1:

please share a sample project that can be used to recreate the issue

0
Comment actions Permalink

Could you provide a simple working example of package.json with eslint-plugin-vue?

0
Comment actions Permalink

@Will   Default project generated with Vue cli? Can be created via New > Project.. > Vue.js

0
Comment actions Permalink

I investigated this problem a bit . I have a big project with many package.json files. And one of sub-projects is a Vue.js project.
This subdir contains .eslintrc.js with root:true and eslint-plugin-vue installed, but WebStorm still trying to find this eslint-plugin-vue in the very root of my project.
Not in the directory with .eslintrc.js with root:true.

Error: Failed to load plugin 'vue' declared in 'automerge/new-frontend/.eslintrc.js': Cannot find module 'eslint-plugin-vue'
Require stack:
- /home/alexey/projects/work/automation/__placeholder__.js
Referenced from: /home/alexey/projects/work/automation/automerge/new-frontend/.eslintrc.js

But running eslint from /home/alexey/projects/work/automation/automerge/new-frontend works correctly.

According to such path 'automerge/new-frontend/.eslintrc.js' i suppose that WebStorm incorrectly sets CWD for eslint.

0
Comment actions Permalink

Related topic:

https://github.com/vuejs/eslint-plugin-vue/issues/976

For VS Code the issue is solved by

eslint.workingDirectories config.
0

Please sign in to leave a comment.