最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
问答文章1 问答文章501 问答文章1001 问答文章1501 问答文章2001 问答文章2501 问答文章3001 问答文章3501 问答文章4001 问答文章4501 问答文章5001 问答文章5501 问答文章6001 问答文章6501 问答文章7001 问答文章7501 问答文章8001 问答文章8501 问答文章9001 问答文章9501
当前位置: 首页 - 科技 - 知识百科 - 正文

vue+webpack中配置ESLint

来源:懂视网 责编:小采 时间:2020-11-27 22:04:20
文档

vue+webpack中配置ESLint

vue+webpack中配置ESLint:一、ESLint 协同开发过程中,经常感受到来自代码检视的恶意。代码习惯不一致,看半天;居然提交低级错误,我的天(╯‵□′)╯︵┻━┻。..研究了一番,决定使用ESLint来做代码规范检查。 二、配置方式 JavaScript注释:通过JavaScript注释把配
推荐度:
导读vue+webpack中配置ESLint:一、ESLint 协同开发过程中,经常感受到来自代码检视的恶意。代码习惯不一致,看半天;居然提交低级错误,我的天(╯‵□′)╯︵┻━┻。..研究了一番,决定使用ESLint来做代码规范检查。 二、配置方式 JavaScript注释:通过JavaScript注释把配

一、ESLint

协同开发过程中,经常感受到来自代码检视的恶意。代码习惯不一致,看半天;居然提交低级错误,我的天(╯‵□′)╯︵┻━┻!...研究了一番,决定使用ESLint来做代码规范检查。

二、配置方式

  • JavaScript注释:通过JavaScript注释把配置信息嵌入代码中。
  • package.json:在package.json文件中的eslintConfig字段中指定配置。
  • 配置文件:通过.eslintrc.(js/json/yaml/yml)的独立文件来为整个目录或者子目录指定配置信息,ESlint会查找并且自动读取配置文件。
  • 三、配置过程(配置文件)

    安装相关npm包

    yarn add eslint babel-eslint eslint-plugin-vue eslint-friendly-formatter --dev

    增加文件

  • .eslintignore 用来配置不需要检查的文件(类似git的.gitignore)。
  • .eslintrc.js 用来配置ESlint验证规则的配置文件。
  • 修改webpack配置文件

    module.exports = {
     module: {
     rules: [
     test: /\.(js|vue)$/,
     loader: "eslint-loader",
     enforce: "pre",
     //指定检查的目录
     include: [resolve(__dirname, 'src')],
     //eslint检查报告的格式规范
     options: {
     formatter: require("eslint-friendly-formatter")
     }
     ]
     }
    }
    

    四、配置文件详解

    以.eslintrc.js为例

    module.exports = {
     //一旦配置了root,ESlint停止在父级目录中查找配置文件
     root: true,
     //解析器
     parser: "babel-eslint",
     //想要支持的JS语言选项
     parserOptions: {
     //启用ES6语法支持(如果支持es6的全局变量{env: {es6: true}},则默认启用ES6语法支持)
     //此处也可以使用年份命名的版本号:2015
     ecmaVersion: 6,
     //默认为script
     sourceType: "module",
     //支持其他的语言特性
     ecmaFeatures: {
     //...
     }
     },
     //代码运行的环境,每个环境都会有一套预定义的全局对象,不同环境可以组合使用
     env: {
     es6: true,
     browser: true,
     jquery: true
     },
     //访问当前源文件中未定义的变量时,no-undef会报警告。
     //如果这些全局变量是合规的,可以在globals中配置,避免这些全局变量发出警告
     globals: {
     //配置给全局变量的布尔值,是用来控制该全局变量是否允许被重写
     test_param: true
     },
     //支持第三方插件的规则,插件以eslint-plugin-作为前缀,配置时该前缀可省略
     //检查vue文件需要eslint-plugin-vue插件
     plugins: ["vue"],
     //集成推荐的规则
     extends: ["eslint:recommended", "plugin:vue/essential"],
     //启用额外的规则或者覆盖默认的规则
     //规则级别分别:为"off"(0)关闭、"warn"(1)警告、"error"(2)错误--error触发时,程序退出
     rules: {
     //关闭“禁用console”规则
     "no-console": "off",
     //缩进不规范警告,要求缩进为2个空格,默认值为4个空格
     "indent": ["warn", 2, {
     //设置为1时强制switch语句中case的缩进为2个空格
     "SwitchCase": 1,
     //分别配置var、let和const的缩进
     "VariableDeclarator": { "var": 2, "let": 2, "const": 3 }
     }],
     //定义字符串不规范错误,要求字符串使用双引号
     quotes: ["error", "double"],
     //....
     //更多规则可查看http://eslint.cn/docs/rules/
     }
    }
    

    使用JavaScript注释启用或禁止指定规则

    /* eslint-disable */
    alert('message');
    /* eslint-enable no-alert, no-console*/
    ...
    

    层叠配置

    ESlint支持层叠配置,检测文件的规则是其目录层级结构中所有.eslintrc文件的组合,当规则冲突的时候,离检测文件最近的规则优先。

    默认情况下,ESlint会沿着父级目录网上寻找配置文件,直到根目录。如果配置文件中有root: true,则ESlint会停止在父级目录中查找。

    五、配置过程中出现的问题

    出现错误:Use the latest vue-eslint-parser。

    解决方法: 把parser: "babel-eslint"移动到parserOptions中。

    {
     //parser: "babel-eslint",
     parserOptions: {
     parser: "babel-eslint",
     //...
     }
    }
    

    问题原因: eslint-plugin-vue中的很多规则都需要vue-eslint-parser检查<template>, vue-eslint-parser和babel-parser二者有冲突。

    参考链接

    声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

    文档

    vue+webpack中配置ESLint

    vue+webpack中配置ESLint:一、ESLint 协同开发过程中,经常感受到来自代码检视的恶意。代码习惯不一致,看半天;居然提交低级错误,我的天(╯‵□′)╯︵┻━┻。..研究了一番,决定使用ESLint来做代码规范检查。 二、配置方式 JavaScript注释:通过JavaScript注释把配
    推荐度:
    标签: VUE 配置 webpack
    • 热门焦点

    最新推荐

    猜你喜欢

    热门推荐

    专题
    Top