## What is ESLint?

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs. In this setup guide i’ll walk through steps required to configure ESLint in Laravel mix. Although the guide assumes Vue projects, similar steps will work for any other framework too.

## Setup

Install eslint

npm install eslint --save-dev


You should then set up a configuration file

npm init @eslint/config


√ How would you like to use ESLint? · style
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ How would you like to define a style for your project? · guide
√ Which style guide do you want to follow? · standard
√ What format do you want your config file to be in? · JavaScript


Now you’ll have a .eslintrc.{js,yml,json} file in your project directory.

Create new file .eslintignore in the project root directory. You can use this file to ignore files / folders when running eslint directly on command line. This is helpful in case of IDE execution of eslint on save operation (like in PhpStorm / WebStorm etc).

Add below contents to ignore standard laravel files.

public/
webpack.mix.js
.eslintrc.js


Install eslint plugin for webpack

npm install eslint-webpack-plugin --save-dev


Add following lines to webpack.mix.js. You should note that i’ve passed the fix option as true, which means mix will automatically fix errors instead of prompting you. You can change it to false if you want to fix them manually.

mix.webpackConfig({
plugins: [new ESLintPlugin({
fix: true,
extensions: ['js', 'vue'],
})],
})


Run mix to validate the changes

npm run dev


By default only standard eslint plugins will be added. If you want to enforce stricter rules, you can add more rules to your .eslintrc.js file. Check eslint-plugin-vue guide for more details.