Running a code linter while developing

Linting your code drastically reduces small bugs and inefficiencies that accumulate during development, it guarantees that the coding style is consistent across a team or organization, and it makes your code more readable. Instead of running the linter once in a while, it's useful to have it constantly running. This recipe teaches you how to do it with Webpack.

Getting ready

In this recipe, we will play with Webpack once again. You will build a tight loop with webpack-dev-server, which is covered in the Developing with continuous feedback with hot reloading recipe.

How to do it...

In a new folder, create a new npm project (you can use npm init -y or yarn init -y).

Inside the folder, create a new directory named src and put a file inside it, called MyComp.vue. Let the file contain the following code:

<template>
  <div>
    Hello {{name}}!
  </div>
</template>
<script>
export default {
  data () {
    return {
      name: 'John...