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

最新推荐文章于 2024-05-26 09:58:33 发布

一只特立独行的猫猫

最新推荐文章于 2024-05-26 09:58:33 发布

阅读量4.4k

点赞数 1

分类专栏： webpack 文章标签： webpack eslint

原文链接：https://blog.csdn.net/kai_vin/article/details/89026115

版权

webpack 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

如果你喜欢这系列的文章，欢迎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检查<template>, vue-eslint-parser和babel-parser二者有冲突。

所以这里会将.eslintrc.js中配置的parser移到parserOptions中：

parserOptions: {
    //此项是用来指定eslint解析器的，解析器必须符合规则，babel-eslint解析器是对babel解析器的包装使其与ESLint解析
    parser: "babel-eslint",
    sourceType: 'module' // 按照模块的方式解析
},

其他还有一些修改，不过rule暂时未做其他变动，这个可以后期在项目开发过程中，如果不想eslint检测什么，到时候再查找进行配置即可。现在.eslintrc.js文件内容如下：

module.exports = {
root: true, // 作用的目录是根目录
extends: [
'standard',
"plugin:flowtype/recommended",
"eslint:recommended",
"plugin:vue/essential"
], // 继承标准规则
plugins: [
'html', // 使用eslint-plugin-html
'vue',
'react',
'flowtype'
],
"settings": {
"flowtype": {
"onlyFilesWithFlowAnnotation": true,// 只检查声明 flow语法的文件
}
},
parserOptions: {
// 此项是用来指定eslint解析器的，解析器必须符合规则，babel-eslint解析器是对babel解析器的包装使其与ESLint解析
parser: "babel-eslint",
sourceType: 'module', // 按照模块的方式解析
// "ecmaVersion": 6,
"ecmaFeatures": {
"jsx": true
}
},
env: {
browser: true, // 开发环境配置表示可以使用浏览器的方法
node: true, //
commonjs: true,
es6: true,
amd: 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": 0,// ["error", "double"],// 字符串没有使用双引号
"no-console": ["error",{allow:["log","warn"]}],// 允许使用console.log()
"arrow-parens": 0,
//"no-undef":0,// 关闭全局变量检测
"no-new":0//允许使用 new 关键字
},
globals:{// 允许全局变量,将$设置为true，表示允许使用全局变量$
"document": true,
"localStorage": true,
"window": true,
"jQuery":true,
$:true
}
}

那么到此，整个单独webpack4的配置就全部结束了，接下来就可以去搭配项目做基于项目框架的各种搭配配置了！
---------------------
版权声明：本文为CSDN博主「IQkevin」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/kai_vin/article/details/89026115

一只特立独行的猫猫

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webpack4配置之——25：webpack引入eslint

如果你喜欢这系列的文章，欢迎star我的项目，源码地址，点击这里webpack 引入 eslint首先安装webpack支持eslint三件套:yarn add eslint eslint-loader eslint-friendly-formatter -Dyarn add eslint eslint-loader eslint-friendly-formatter -D...
复制链接

扫一扫