webpack(10)_使用EsLint检查代码格式

版权声明：本博客主要记录学习笔记和遇到的一些问题解决方案，转载请注明出处！ https://blog.csdn.net/u010982507/article/details/82084945

本章主要讲解使用EsLint来检查代码的格式，主要内容有：

• 使用eslint-loader
• 使用eslint-plugin-html
• 使用eslint-friendly-formatter

使用EsLint

安装eslint的时候报个错误，查了一下，执行npm cache clean --force，清除下缓存就可以安装了。

npm ERR! Unexpected end of JSON input while parsing near '...^0.1.1","should":"^5.'

• 安装eslint
  npm install eslint --save-dev
• 安装eslint-loader
  npm install eslint-loader --save-dev
• 安装eslint-plugin-html
  npm install eslint-plugin-html --save-dev
• 安装eslint-friendly-formatter
  npm install eslint-friendly-formatter --save-dev
• 配置js

{
    test: /\.js$/,
    use: [
        {
            loader: 'babel-loader',
            options: {
                presets: ['env']
            }
        },
        {
            loader: 'eslint-loader', // 配置eslint-loader，要在babel-loader之前配置
            options: {
                formatter: require('eslint-friendly-formatter') // 配置formatter格式
            }
        }
    ]
}

• 在项目根目录下新建.eslintrc.js文件，并添加配置

module.exports = {
    root: true, // 表示根目录
    extends: 'standard', // 继承标准规则
    plugins: [
        'html' // 使用eslint-plugin-html
    ],
    env: {
        browser: true, // 浏览器环境
        node: true // node环境
    },
    globals: { // 允许全局变量,将$设置为true，表示允许使用全局变量$
        $: true
    },
    rules: {  // 重新覆盖 extends: 'standard'的规则
        indent: ['error', 4], // error类型，缩进4个空格
        'space-before-function-paren': 0, // 在函数左括号的前面是否有空格
        'eol-last': 0, // 不检测新文件末尾是否有空行
        'semi': ['error', 'always'] // 必须在语句后面加分号
    }
}

• 安装eslint-config-standard
  npm install eslint-config-standard --save-dev
• 安装eslint-plugin-promise
  npm install eslint-plugin-promise --save-dev
• 安装eslint-plugin-node
  npm install eslint-plugin-node --save-dev
• 安装eslint-plugin-import
  npm install eslint-plugin-import --save-dev
• 安装eslint-plugin-standard
  npm install eslint-plugin-standard --save-dev
• 在devServer中将overlay打开，会在页面上显示eslint提示的错误

 overlay:true, // 可以在项目中看到