Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Organize + Automate + Deploy = Webpack Chapter 16

use: 'vue-loader'

}

]

}

}

This just tells Webpack to start compiling from the index.js file and, whenever it finds a

.vue file, to turn it into JavaScript with the vue-loader. Beyond this, we want to scan all

our files with a linter to ensure that we didn't make silly mistakes in our code.

Add the following loader to the rules array:

{

test: /.(vue|js)$/,

use: 'eslint-loader',

enforce: 'pre'

}

The enforce: 'pre' property will run this loader before the others, so it will apply to the

code you wrote and not a transformation of it.

The last thing we need is to configure ESLint. Create a new file in the root directory named

.eslintrc.js, and add the following inside it:

module.exports = {

"extends": "eslint:recommended",

"parser": "babel-eslint",

plugins: [

'html'

]

}

We are saying a couple of things here. First is the set of rules we want to apply to our code;

in other words, our set of rules (which is empty now) is extending the recommended set of
rules. Second, we are using the babel-eslint parser instead of the default one. Finally,

we are using the HTML ESLint plugin, which will help us to deal with the .vue files and

will extract the JavaScript code in them.
We are now ready to launch our development machinery, but first, we need to install the

dependencies using the following command:

npm install --save vue

npm install --save-dev babel-eslint eslint eslint-loader eslint-plugin-html

vue-loader vue-template-compiler webpack webpack-dev-server