本文共 2519 字，大约阅读时间需要 8 分钟。
为了确保项目代码的质量，eslint是一个强大的代码检测工具。本文将介绍如何在项目中集成eslint进行自动检测和修复。
1.下载依赖
通过cnpm安装eslint及相关依赖：cnpm i eslint --save-dev cnpm i eslint-loading --save-dev
2.配置eslint
在项目根目录中创建一个新文件.eslintrc.js： module.exports={ env: { browser: true, commonjs: true, es6: true, node: true, }, extends: 'eslint:recommended', parserOptions: { sourceType: 'module', }, rules: { 'comma-dangle': ['error', 'always-multiline'], indent: ['error',2], 'linebreak-style': ['error','unix'], quotes: ['error', 'single'], semi: ['error','always'], 'no-unused-vars': ['warn'], 'no-console': 0, },}; 3.在pakage.json中配置脚本
添加以下脚本："scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack-dev-server --env development", "build": "webpack --env production", "lintjs": "eslint app/ webpack.*.js --cache" }, 4.运行eslint
执行以下命令进行检测：npm run lintjs若需要自动修复错误可执行：
npm run lintjs -- --fix
5.在webpack.config.js中集成eslint
在module中添加eslint-loader规则：const path=require('path');//webpack生成htmlconst HtmlWebpackPlugin=require('html-webpack-plugin');const PATHS={ app: path.join(__dirname, 'app'), build: path.join(__dirname, 'build'),};module.exports={ devServer:{ host: process.env.HOST, //Defaults to 'localhost port: 80, //Defalut to 8080 }, entry:{ app:PATHS.app, }, output: { path: PATHS.build, filename: '[name].js', }, module:{ //运行监测 rules:[ { test: /\.js$/, enforce: 'pre', loader:'eslint-loader', options:{ emitWarning: true, }, }, ], }, plugins:[ //生成html new HtmlWebpackPlugin({ title: 'Webpack demo', }), ],}; 6.运行项目
启动开发服务器：npm run start
7.错误浮层显示
在devServer中配置显示错误浮层：const path=require('path');const HtmlWebpackPlugin=require('html-webpack-plugin');const PATHS={ app: path.join(__dirname, 'app'), build: path.join(__dirname, 'build'),};module.exports={ devServer:{ host: process.env.HOST, //Defaults to 'localhost port: 80, //Defalut to 8080 // 浮层错误抛出 overlay: { errors: true, warnings: true, }, }, entry:{ app:PATHS.app, }, output: { path: PATHS.build, filename: '[name].js', }, module:{ rules:[ { test: /\.js$/, enforce: 'pre', loader:'eslint-loader', options:{ emitWarning: true, }, }, ], }, plugins:[ new HtmlWebpackPlugin({ title: 'Webpack demo', }), ],}; 转载地址：http://xrmnz.baihongyu.com/