Eslint-plugin-import: why eslint-plugin-import plugin dosen't support webpack extensions like .vue and alias?

[zp1112]

Tell us about your environment

• ESLint Version:3.13.1
• Node Version:v6.9.0
• npm Version:3.10.8
• webpack Version:1.14.0
• vue Version:2.1.9

What parser (default, Babel-ESLint, etc.) are you using?

Please show your full configuration:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: [path.resolve(__dirname, '../app/index.js')],
  output: {
    path: path.resolve(__dirname, '../output/static'),
    publicPath: 'static/',
    filename: '[name].[hash].js',
    chunkFilename: '[id].[chunkhash].js'
  },
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.vue'],
    alias: {
      vue: 'vue/dist/vue.js',
      components: path.resolve(__dirname, '../app/components')
    }
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: '../index.html',
      template: path.resolve(__dirname, '../app/index.html'),
      inject: true
    })
  ]
};

What did you do? Please include the actual source code causing the issue.

// using extensions['.vue'] error png1
import Vue from 'vue';
import App from './components/app';

// using alias error png2
import Vue from 'vue';

//this import succeed ,but throw an eslint error
import App from 'components/app.vue';

png1

png2

What did you expect to happen?

no eslint error

What actually happened? Please include the actual, raw output from ESLint.

[zp1112]

I fixed it.It's atom's problem ，the plugin named js-hiperclick，default extensions are setted to jump to .js .node .coffee ,add .vue and it works.

[zp1112]

It fied atom's jump problem,and also needs to setting .eslintrc.json config like this

"settings": {
    "import/resolver": {
      "webpack": {
        "config": "build/webpack.config.js"
      }
    }
  },
"rules": {
    "import/extensions": ["error", "always", {
      "js": "never",
      "vue": "never"
    }],
...
}

[zp1112]

but the alias setting desn't work still

[kevoneil]

Looks like it's linter-eslint that's causing this.

See here

Adding an empty .eslintignore file in the project root folder and restarting Atom seems to work for some people. Didn't work for me.

In my case, running eslint via gulp works, Atom does not like it though.

[zp1112]

@tokyoincode Didn't work for me either.In my case, running eslint via webpack, Atom seems does not like it though either.How ?I hope some one can fix it one day.

[juhaelee]

@zp1112 is it not working for you when you run eslint on the command line? or is it just in Atom?

[zp1112]

@juhaelee I do not know how to distinguish between these two aspects,i think eslint run in atom automatically when i edit,is that right?and i didn't run in other editors.so i think it's eslint problem,because other people have the same problem without using atom.

[joshlangner]

Anyone solve this?

[silvenon]

I couldn't reproduce the issue, it works for me. Maybe it got fixed in the meantime? Could you provide a minimal demo if this is still an issue for you? Preferably a repo, where we can see the entire environment.

[ForsakenHarmony]

I'm still getting this

it seems to work when I add .vue but that's not really a solution

[ozguruysal]

Try installing eslint-import-resolver-webpack if you haven't already.