一只特立独行的猫猫

webpack4配置之——25：webpack引入eslint

如果你喜欢这系列的文章，欢迎star我的项目，源码地址，点击这里

webpack 引入 eslint
首先安装webpack支持eslint三件套:

yarn add eslint eslint-loader eslint-friendly-formatter -D

yarn add eslint eslint-loader eslint-friendly-formatter -D

然后修改webpack.dev.conf.js文件，添加如下rule：

{
test: /\.js$/,
use:[
{loader:'eslint-loader'}
],
enforce: "pre", // 编译前检查
exclude: /node_modules/, // 不检测的文件
include: [path.resolve(__dirname, 'src')], // 指定检查的目录
options: { // 这里的配置项参数将会被传递到 eslint 的 CLIEngine
formatter: require('eslint-friendly-formatter') // 指定错误报告的格式规范
}
},

{
    test: /\.js$/,
    use:[
        {loader:'eslint-loader'}
    ],
    enforce: "pre", // 编译前检查
    exclude: /node_modules/, // 不检测的文件
    include: [path.resolve(__dirname, 'src')], // 指定检查的目录
    options: { // 这里的配置项参数将会被传递到 eslint 的 CLIEngine 
        formatter: require('eslint-friendly-formatter') // 指定错误报告的格式规范
    }
},

然后新建.eslintrc.js文件，先添加如下代码：

module.exports = {
root: true, // 作用的目录是根目录
parserOptions: {
sourceType: 'module' // 按照模块的方式解析
},
env: {
browser: true, // 开发环境配置表示可以使用浏览器的方法
node: true //
},
rules: {
// 自定义的规则
"linebreak-style": [0 ,"error", "windows"],
"indent": ['error', 4]
}
}
eslint 配置项
root 限定配置文件的使用范围
parser 指定eslint的解析器
parserOptions 设置解析器选项
extends 指定eslint规范
plugins 引用第三方的插件
env 指定代码运行的宿主环境
rules 启用额外的规则或覆盖默认的规则
globals 声明在代码中的自定义全局变量
rule 中规则的开启关闭：

“off” 或 0 - 关闭规则
“warn” 或 1 - 开启规则
“error” 或 2 - 开启规则
配置我们自己的eslint 规则，我们还需要以下这些插件：

yarn add babel-eslint eslint-plugin-html eslint-plugin-import eslint-plugin-promise eslint-plugin-node eslint-config-standard eslint-plugin-standard -D

yarn add babel-eslint eslint-plugin-html eslint-plugin-import eslint-plugin-promise eslint-plugin-node eslint-config-standard eslint-plugin-standard -D

插件下载完成后，修改.eslinrc.js文件：

module.exports = {
root: true, // 作用的目录是根目录
extends: 'standard', // 继承标准规则
plugins: [
'html' // 使用eslint-plugin-html
],
parser: "babel-eslint",
parserOptions: {
sourceType: 'module' // 按照模块的方式解析
},
env: {
browser: true, // 开发环境配置表示可以使用浏览器的方法
node: true, //
es6: true
},
rules: { // 重新覆盖 extends: 'standard'的规则
// 自定义的规则
"linebreak-style": [0 ,"error", "windows"],
"indent": ['error', 4], // error类型，缩进4个空格
'space-before-function-paren': 0, // 在函数左括号的前面是否有空格
'eol-last': 0, // 不检测新文件末尾是否有空行
'semi': ['error', 'always'], // 必须在语句后面加分号
"quotes": ["error", "double"],// 字符串没有使用单引号
"no-console": ["error",{allow:["log","warn"]}],// 允许使用console.log()
"arrow-parens": 0,
"no-new":0//允许使用 new 关键字
},
}

module.exports = {
    root: true, // 作用的目录是根目录
    extends: 'standard', // 继承标准规则
    plugins: [
        'html' // 使用eslint-plugin-html
    ],
    parser: "babel-eslint",
    parserOptions: {
        sourceType: 'module' // 按照模块的方式解析
    },
    env: {
      browser: true, // 开发环境配置表示可以使用浏览器的方法
      node: true, //
      es6: true
    },
    rules: { // 重新覆盖 extends: 'standard'的规则
      // 自定义的规则
      "linebreak-style": [0 ,"error", "windows"],
      "indent": ['error', 4], // error类型，缩进4个空格
      'space-before-function-paren': 0, // 在函数左括号的前面是否有空格
      'eol-last': 0, // 不检测新文件末尾是否有空行
      'semi': ['error', 'always'], // 必须在语句后面加分号
      "quotes": ["error", "double"],// 字符串没有使用单引号
      "no-console": ["error",{allow:["log","warn"]}],// 允许使用console.log()
      "arrow-parens": 0,
      "no-new":0//允许使用 new 关键字
    },
}

修改完后，我们要确保webpack.dev.conf.js文件的本地服务的配置项overly为true，当我们运行yarn start 时，终端就会显示所有语法错误了。

然后运行yarn start，这时报了这样一个错误：

Error:options/query cannot be used with loaders

Error:options/query cannot be used with loaders

检查我们的webpack.dev.conf.js 文件，发现我们配置eslint-loader的options和其他loader不一样~，其他loader的options都是和loader同级，而这个却和它的父级是同级，显然是不对的，我们修改配置项，顺带也把babel-loader的配置项修改一下，具体代码如下：

{
test: /\.js$/,
use:[{loader:'eslint-loader',
options: { // 这里的配置项参数将会被传递到 eslint 的 CLIEngine
formatter: require('eslint-friendly-formatter') // 指定错误报告的格式规范
}
}],
enforce: "pre", // 编译前检查
exclude: /node_modules/, // 不检测的文件
include: [path.resolve(__dirname, 'src')], // 指定检查的目录
},
{
test: /\.(js|jsx)$/,
use: [{
loader:'babel-loader',
options:{//options、query不能和loader数组一起使用
cacheDirectory:true//利用缓存，提高性能，babel is slow
},
}],
include: path.resolve(__dirname, 'src'),

},

此时，我们再次运行yarn start你会发现终端报了数都数不完的语法检测错误，这说明了一点，我们的`eslint`配置已经成功了

接下来就是看这些错误都是出在哪里，哪些是可以通过eslin-loader的exclude和.eslinrc.js的rule排除掉不去修改的，剩下的就是我们慢慢去一个一个修改了~

比如本项目的报错中，可以发现很多的报错来自src/assets/js/jquery.SuperSlide.2.1.1.js文件，我们不需要eslint去检测该文件，那么我们需要在eslint-loader的配置中排除该文件：

{
test: /\.js$/,
use:[{loader:'eslint-loader',
options: { // 这里的配置项参数将会被传递到 eslint 的 CLIEngine
formatter: require('eslint-friendly-formatter') // 指定错误报告的格式规范
}
}],
enforce: "pre", // 编译前检查
exclude: [/node_modules/,path.resolve(__dirname, 'src/assets/js/jquery.SuperSlide.2.1.1.js')], // 不检测的文件
include: [path.resolve(__dirname, 'src')], // 指定检查的目录
},

然后再次运行yarn start，可以看到终端中，已经不再有该js文件引起的语法报错了~；

再仔细看看报错中都有哪些错误，本项目集中有以下错误：

这里的错误，先说no-undef，想修改，可以在rules中关闭该检测功能，也可以在globals中配置可以用于全局的变量白名单，

先说在rules中如何关闭：

rules: { // 重新覆盖 extends: 'standard'的规则
    ...
    "no-undef":0,// 关闭全局变量检测
},

前面已经说过，1或2是开启规则，一个是警告模式，一个是错误模式，0是关闭规则，只需将该规则的数值改为0即可;

当然我们也可以在globals中配置白名单来让全局变量合法化：

globals:{// 允许全局变量,将$设置为true，表示允许使用全局变量$
    "document": true,
    "localStorage": true,
    "window": true,
    "jQuery":true,
    $:true
}

再次运行yarn start 可以发现有关no-undef的报错已经消失了，找到方法了，那么剩下就简单了~

再说一下quotes的报错，实际项目中，并不一定只用一种引号方式，很多会单引号、双引号混合使用，所以这条规则我们可以关闭它，不对字符串使用引号做检测

rules: { // 重新覆盖 extends: 'standard'的规则
    ...
    "quotes":0,// 关闭全局变量检测
},

剩下的import%2Ffirst ,space-infix-ops,space-before-blocks,spaced-comment，根据我上面的注释可以知道都是哪些地方报的错，终端报错也会提示是在哪个文件哪一行哪个位置。其实知道这些规则是什么意思后，就非常好修改了~

全部修改完后再次运行yarn start 这次终端终于干净了，不再有eslint的报错信息了~

接下来丰富一下我们的eslint插件及配置：

yarn add eslint-plugin-flowtype eslint-plugin-react eslint-plugin-vue -D
1
这里新增三个插件：

eslint-plugin-flowtype:js的静态类型检测插件，传参类型，顺序，弱类型等。
eslint-plugin-react: react框架开发时必不可少的eslint检测插件。
eslint-plugin-vue: vue框架开发时必不可少的eslint检测插件。
它们的具体rule配置，可以在github上查看，这里要说一下的是：

eslint-plugin-vue中的很多规则都需要vue-eslint-parser检查

webpack4配置之——25：webpack引入eslint

你可能感兴趣的:(webpack)