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?

2
29 comments

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
Avatar
Permanently deleted user

 

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

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

0
Avatar
Permanently deleted user

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

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
Avatar
Permanently deleted user

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

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
Avatar
Permanently deleted user

Same problem for me.

1

 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
Avatar
Permanently deleted user

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

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

Same here. When could it be addressed?

0

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

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

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

0

was this fixed in EAP?

0

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

0

No, the fix is not included in any EAP

0
Avatar
Permanently deleted user

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

0

Fix can be expected in 2018.1

0

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

0

2018.1 is planned for March

0
Avatar
Permanently deleted user

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

0

works for me in 2018.1.1:

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

0

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

0

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

0

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

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.