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?

25 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

 

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

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

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

 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

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

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

0

No, the fix is not included in any EAP

0

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

0

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

0

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

Please sign in to leave a comment.