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
It’d ask you certain questions. My answers below.
√ 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.