使用eslint检查JS代码

发表于 | 分类于

前言

  • 代码规范一直是开发过程中比较重要的一环，包括命名规范、统一缩进等等，规范整洁的代码可读性高，也便于后期代码维护以及其他开发人员快速熟悉；本篇就讲一下eslint的具体用法。

介绍

  • eslint早在2013年就有了，而我个人第一次接触还是在使用vue-cli搭建项目的时候，默认配置的eslint会根据规则直接报错，刚开始用的时候满屏报错、特别酸爽~~ 但只要习惯就好，使用eslint检查代码会使你的js文件更加健壮好看。

安装配置

  • 首先安装eslint，直接 npm install eslint即可，注意如果你是全局安装的eslint，后面一些eslint相关依赖包也要全局安装。

  • 然后输入 eslint init 开始初始化一个配置文件，过程中会给你很多选项，比如是否使用es6、是否使用jsx语法、配置文件的文件格式等等。我选择的生成js配置文件，所有选项都选好后，生成一个.eslintrc.js配置文件内容大概长这样：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
        "env": {
            "browser": true,
            "es6": true
        },
        "extends": "eslint:recommended",
        "parserOptions": {
            "sourceType": "module"
        },
        "rules": {
            "indent": [
                "error",
                "tab"
            ],
            "linebreak-style": [
                "error",
                "windows"
            ],
            "quotes": [
                "error",
                "double"
            ],
            "semi": [
                "error",
                "never"
            ],
            "no-console": 0 
        }
    };

  • 其中最重要的就是rules里面配置的规则，eslint会根据这里是配置的rule规则对代码进行检验，键值分别对应规则名和状态，比如”no-console“是规则名，后面对应的0表示不执行这条规则。extends表示继承自哪个共享的配置文件，env表示检查代码时所属的环境。

  • 具体状态码规则是这样： 0或者“off”表示关闭规则； 1或者warn表示开启规则，使用警告级别的错误； 2或者error表示开启规则，使用错误级别的错误：error (当被触发的时候，程序会报错)
  • 配置完成后，在当前目录新建一个index.js文件，随便输入几行代码，然后在命令行输入eslint index.js。就会对js文件进行代码检查，如果代码报错，命令行会提示你多少行触发了哪条规则的错误，你就可以对代码进行改正，或者修改配置文件中的rule规则。
  • 配置eslint的方法还有其他的，比如写在package.json中：新增一个eslintConfig，将上述配置文件的内容放在下面。但我个人还是喜欢用单独的配置文件，来控制eslint。

集成到webpack

  • 接下来介绍一下如何把eslint集成到webpack中。首先确保webpack已经安装好，然后依次安装eslint-loader、eslint-config-standard、eslint-plugin-html、eslint-plugin-promise、eslint-plugin-standard、eslint-friendly-formatter。注意如果eslint是全局安装的，这些依赖包也需要全局安装，否则报错找不到对应的包。

  • 然后新建一个webpack的配置文件webpack.config.js，我这里只是做尽量最少的配置，具体如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    module.exports = {
        entry: {
            index: "./src/index.js",
        },
        output: {
            path: __dirname + "/dist/",
            filename: "[name].js"
        },
        resolve: {
            extensions: ['.js', '.vue', '.json']
        },
        module: {
             rules: [
                    {
                        test: /\.js$/,
                        exclude: /node_modules/,
                        loaders: [
                            'eslint-loader'
                        ]
                    },
                    {
                        test: /\.vue|\.js$/,
                        enforce: 'pre',  // 在babel-loader对源码进行编译前进行lint的检查
                        include: /src/,  // src文件夹下的文件需要被lint
                        use: [{
                            loader: 'eslint-loader',
                            options: {
                                formatter: require('eslint-friendly-formatter')   // 编译后错误报告格式
                            }
                        }]
                    }
                ]
        }
    }

  • 这时候文件目录结构如下图
    文件结构

  • 这时在src文件夹下新建index.js文件，命令行输入webpack进行代码打包的过程会使用eslint进行检查，如果无误就在dist/js文件夹下生产打包后的代码，如果检查报错则在命令行中打印出错误位置和触犯的规则。