How to import linting rules from eslint-plugin-vue

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

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"

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

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

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

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:

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)?

Same problem for me.

 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)?

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

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

Same here. When could it be addressed?

seems to be fixed in trunk - see https://youtrack.jetbrains.com/issue/WEB-30394

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`

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'

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

was this fixed in EAP?

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

No, the fix is not included in any EAP

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

Fix can be expected in 2018.1

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

2018.1 is planned for March

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

works for me in 2018.1.1:

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

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

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

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.

Related topic:

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

For VS Code the issue is solved by

eslint.workingDirectories config.