Recently I wanted to configure ESLint for one of my projects to ensure consistent formatting and coding standards. Since Laravel Mix doesn't include ESLint configured out of the box I've decided to write a short post about its setup.

Setup ESLint

At first you have to add ESLint to your project. I always try to install tools per project. Otherwise I feel like cluttering my system and after a while I'm struggling with version conflicts.

$ npm install eslint --save-dev

Next you have to setup a configuration file. I selected the standard coding style and the JavaScript configuration format, but feel free to select according to your personal preferences.

$ ./node_modules/.bin/eslint --init

After that you'll find a file called .eslint.js in your project root with the following contents.

module.exports = {
  "extends": [
    "standard"
  ]
}

Setup eslint-plugin-vue

Since ESLint can't lint .vue files natively you have to install the eslint-plugin-vue as well.

$ npm install eslint-plugin-vue --save-dev

To enable it, add a line to the extends array of the .eslint.js file. Pick a rule set depending on how strict the linter should be.

module.exports = {
  "extends": [
    "standard",
    "plugin:vue/recommended"
  ]
}

Run the linter

Run the linter on all .js files in every subdirectory.

$ ./node_modules/.bin/eslint ./path/to/files/**/*.js

Run the linter on all .vue files in every subdirectory.

$ ./node_modules/.bin/eslint ./path/to/files/**/*.vue

To make use of the automatic fixes for common coding style issues, just append --fix to the command and most of the problems are solved automatically.

Integration with Laravel Mix

If you're using Laravel Mix you can add eslint-loader to the webpack configuration. It runs every time you save a file while npm run watch is running.

$ npm install eslint-loader --save-dev

Next add the following to webpack.mix.js and customize the settings as needed.

mix.webpackConfig({
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        exclude: /node_modules/
      }
    ]
  }
})

Integration with Sublime Text

Of course there is a plugin for Sublime Text. Install SublimeLinter-eslint via package control and add the following lines to the SublimeLinter settings (Sublime Text → Preferences → Package Settings → SublimeLinter → Settings) to enable linting of .js as well as .vue files.

{
  "linters": {
    "eslint": {
      "selector": "text.html.vue, source.js - meta.attribute-with-value"
    }
  }
}

As soon as you open a .js or .vue file you see the coding style issues being highlighted.

Additional configuration

Enable ES2017 features

If you're using next generation JavaScript features like async/await, ESLint will show an error by default until you enable them.

module.exports = {
  // ...
  "parserOptions": {
    "ecmaVersion": 2017
  }
}

Ignore globals

The linter will warn you if you're using variables which are not defined in the same file. Declare those variables of global scope in globals. true allows the value to be overwritten, false disallows overwriting later in your code.

module.exports = {
  // ...
  "globals": {
    "Foo": false
  }
}

Customize rules

Maybe you don't like some rules or you want to add another one. Just have a look at the available rules or add some of the uncategorized rules of the eslint-plugin-vue to the rules array.

module.exports = {
  // ...
  "rules": {
    "object-curly-spacing": ["error", "always"],
    "comma-dangle": ["error", "always-multiline"],
    "vue/html-closing-bracket-newline": "error",
    "vue/html-closing-bracket-spacing": "error",
    "vue/prop-name-casing": "error",
    "vue/max-attributes-per-line": "off"
  }
}

Conclusion

I hope this post helps you setting up ESLint for your projects. Make use of automatic style and quality control to prevent coding errors in your apps.