webpack配置eslint检查

webpack.config.js

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/build.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            /**
             * 语法检查: eslint-loader eslint
             * 注意: 只检查写的代码,第三方的代码库是不检查的
             * 设置检查规则:
             *  package.json中eslintConfig中设置
             *  "eslintConfig": {
             *      "extends": "airbnb-base"
             *   }
             *  airbnb --> eslint-config-airbnb-base eslint-plugin-import eslint
             */
            {
                test: /\.js$/,
                loader: 'eslint-loader',
                options: {
                    // 自动修复eslint的错误
                    fix: true
                },
                exclude: /node_modules/
            }
        ]
    },
    // 插件
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        }),
    ],
    // 模式 development 开发, production 生产
    mode: 'development',
}

package.json

"eslintConfig": {
	"extends": "airbnb-base"
}

index.js

function add(x, y) {
  return x + y;
}

// 下一行eslint所有规则都失效,下一行不进行eslint检查
// eslint-disable-next-line
console.log(add(3, 5));

注意:nodejs版本最好 10 以上。低版本的nodejs会报错。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,你需要安装 `eslint-config-standard` 和 `eslint-plugin-standard`。 ``` npm install eslint-config-standard eslint-plugin-standard --save-dev ``` 然后,在你的webpack配置文件中添加eslint配置。 ```javascript module.exports = { // ... other configurations module: { rules: [ { test: /\.js$/, loader: 'eslint-loader', enforce: 'pre', include: [path.resolve(__dirname, 'src')], // 指定检查的目录 options: { formatter: require('eslint-friendly-formatter'), // 指定错误报告的格式规范 eslintPath: require.resolve('eslint'), configFile: '.eslintrc.json', // 指定eslint配置文件路径 plugins: ['standard'], // 配置eslint插件 globals: [], // 声明全局变量 rules: { 'no-console': 'error', // 禁止使用console 'no-debugger': 'error', // 禁止使用debugger 'no-alert': 'error', // 禁止使用alert 'no-unused-vars': 'error', // 禁止未使用的变量 'standard/no-callback-literal': 'error' // 禁止在回调函数中直接使用字面量 } } }, // ... other loaders ] } } ``` 最后,你需要在项目根目录下创建 `.eslintrc.json` 文件,并进行以下配置: ```json { "extends": [ "standard" ], "env": { "browser": true, "node": true, "es6": true }, "parserOptions": { "ecmaVersion": 2020, "sourceType": "module" }, "rules": { "semi": ["error", "always"], "quotes": ["error", "single"] } } ``` 上述配置表示,我们使用 `standard` 规则集进行代码检查,支持浏览器和 node.js 环境,使用 ECMAScript 2020 版本,强制使用分号和单引号。 这样,你就可以在开发过程中使用 `eslint-loader` 进行代码检查了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值