Webpack: Eslint ignore external js file component

[luglio7]

Hello all
eslint ignore external .js scripts if those are not contained inside the .vue component file (example : <script src="./example.js"></script>). I prefer to code on a pure .js file but i would also benefit from eslint controls. I don't know what i should modify on webpack in order to do that.

[LinusBorg]

eslint-loader is configured for .js and .vue files, so I don't see what should not be working. Can you elaborate?

[sowhatdoido]

I'm getting the same problem. Here is the context:
I'm creating a Component folder Hello/ with 2 files in it: index.vue, and script.js.
Inside the index.vue, I have my template definition as well as <script src="./script.js"></script>.
Within the script file, I intentionally added a tab to violate the lint definition and saw that:

• If the logic is in the external script.js file, no error is thrown and the page renders fine.
• If the logic is in the external script.js file, I can do npm run build successfully
• If the logic is in the external script.js file, an error is thrown when running npm run lint
  All three points fail if the logic is moved into the vue file instead. It seems that for whatever reason, the importing of script.js causes it to ignore the lint rules.

To replicate this:

1. Download this template.
2. In components, create a folder "Hello/"
3. Move "Hello.vue" to "Hello/index.vue"
4. Create "Hello/script.js", moving logic from the script tag in "index.vue" to this new file
5. include the new script file with <script src="./script.js"></script>.
6. change the component import from just "/Hello" to "/Hello/index" (you could make a change in the webpack to allow index.vue as your default but not necessary).
7. Intentionally violate lint inside of script.js
8. Run either npm run dev or npm run build, observe the successful results.
9. Run npm run lint, observe failed results.

[antoster]

Getting the same problem.

Code that is external to .vue file, i.e. which lives in <script src="./index.js"></script> is not linted when using npm run build or npm run dev scripts.

In this case linting is done be eslint-loader with "some help" from html-webpack-plugin which parses only inline script of a .vue file and skips code that is referenced like that: <script src="./index.js"></script>.

A possible solution would be to use some webpack loader (probable write a new special one), that inlines such scripts before passing code to eslint-loader.

[tsarapke]

Specifying lang="eslint" helped me.

<script lang="eslint" src="./script.js"></script>

Also if you have using something like object spread, it can throw an error. So, in that case you can pass an babel-loader as addition param of webpack request.

<script lang="babel!eslint" src="./script.js"></script>

Hope it will help for someone. But I don't think that it's a good approach. I would prefer to configure it in webpack config.

[tsarapke]

Here is webpack 2 config example, which is working for me:

{
  module: {
    rules: [{
      test: /\.vue$/,
      loader: 'vue-loader',
      options: {
        loaders: {
          js: 'babel-loader'
        },
        preLoaders: {
          js: `eslint-loader?configFile=${path.resolve(dir.src.eslint)}`
        },
        postcss: [
          autoprefixer({
            browsers: ['last 2 version', 'ie >= 11']
          })
        ]
      }
    }, {
      test: /\.js$/,
      enforce: 'pre',
      use: [{
        loader: 'eslint-loader',
        options: {
          configFile: path.resolve(dir.src.eslint)
        }
      }]
    }]
  }
};

.eslintrc:

{
   "extends": "airbnb",
   "plugins": ["vue"],
   "parser": "babel-eslint"
}

Main packages:

• "babel": "^6.23.0"
• "babel-eslint": "^7.2.2"
• "eslint": "^3.19.0"
• "eslint-config-airbnb": "^14.1.0"
• "eslint-loader": "^1.7.1"
• "eslint-plugin-vue": "^3.8.0"
• "vue-loader": "^11.3.4"
• "vue": "2.3.0"
• "webpack": "^2.6.1"

[sowhatdoido]

Alright I figured this out: If you have a fresh copy of the vuejs webpack teplate, open up vue-loader.conf.js and add preLoaders: { js: 'eslint-loader' }, to your config file.

Doing that picks up ESLint when I spit up my script from the main .vue file.

Hope this helps others! Not sure if this should be fixed in the template itself or was intentionally left out.