vue+webpack中配置ESLint

 更新时间:2018年11月07日 11:00:51   作者:暑假作业  
这篇文章主要介绍了vue+webpack中配置ESLint,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

一、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二者有冲突。

参考链接

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 详解windows下vue-cli及webpack 构建网站(三)使用组件

    详解windows下vue-cli及webpack 构建网站(三)使用组件

    本篇文章主要介绍了详解windows下vue-cli及webpack 构建网站(三)使用组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • Vue仿微信app页面跳转动画效果

    Vue仿微信app页面跳转动画效果

    这篇文章主要介绍了Vue仿微信app页面跳转动画效果,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • Vue中如何获取json文件中的数据

    Vue中如何获取json文件中的数据

    访问百度音乐API需要传递音乐类型参数,而这些参数是存在musictype.json中,现在在组件listcate.vue需要获取json数据,如何实现呢,下面小编给大家带来了Vue中如何获取json文件中的数据,感兴趣的朋友一起看看吧
    2022-09-09
  • 详解vue中computed 和 watch的异同

    详解vue中computed 和 watch的异同

    本篇文章主要介绍了vue中computed 和 watch的异同,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • 浅谈vue中改elementUI默认样式引发的static与assets的区别

    浅谈vue中改elementUI默认样式引发的static与assets的区别

    下面小编就为大家分享一篇浅谈vue中改elementUI默认样式引发的static 与assets的区别,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • el-select二次封装实现可分页加载数据的示例代码

    el-select二次封装实现可分页加载数据的示例代码

    使用el-select时一次性渲染几百条数据时会造成页面克顿, 可以通过分页来实现,所以本文给大家介绍了el-select二次封装实现可分页加载数据,文中有详细的代码讲解,具有一定的参考价值,需要的朋友可以参考下
    2023-12-12
  • vue cli3 调用百度翻译API翻译页面的实现示例

    vue cli3 调用百度翻译API翻译页面的实现示例

    这篇文章主要介绍了vue cli3 调用百度翻译API翻译页面的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • vue使用dagre-d3画流程图的完整代码

    vue使用dagre-d3画流程图的完整代码

    这篇文章主要给大家介绍了关于vue使用dagre-d3画流程图的完整代码,dagre-d3.js是一个用于在Vue.js框架中实现DAG(有向无环图)可视化的库,它结合了vue.js、dagre和d3.js这三个库的功能,需要的朋友可以参考下
    2024-02-02
  • Vue如何实现从response读取流下载

    Vue如何实现从response读取流下载

    这篇文章主要介绍了Vue如何实现从response读取流下载问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-04-04
  • vue 单元测试初探

    vue 单元测试初探

    这篇文章主要介绍了vue 单元测试的相关资料,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-04-04

最新评论