Laravel Mix 中添加 ESLint

JavaScript Laravel ESLint

1、在项目目录下执行如下命令,添加所需插件

yarn add eslint eslint-config-airbnb eslint-friendly-formatter eslint-loader eslint-plugin-html eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react --dev

2、在项目目录下新建 .eslintrc 配置文件,添加如下内容

{
  "extends": "airbnb",
  "env": {
    "es6": true,
    "node": true
  },
  "plugins": [
    "html"
  ]
}

3、在 Laravel Mix 的配置文件 webpack.mix.js 的开头添加如下内容

const { mix } = require('laravel-mix')

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

然后再执行 yarn run watch 就可以获得代码规范的检查提醒:
file

此处使用的是 airbnb 的 JavaScript 代码规范

评论数量: 0

4
点赞
1259
浏览
0
评论

贡献 75
qiezi
教练,我想写代码。