详解ESLint在Vue中的使用小结


Posted in Javascript onOctober 15, 2018

ESLint是一个QA工具,用来避免低级错误和统一代码的风格

ESLint的用途

1.审查代码是否符合编码规范和统一的代码风格;

2.审查代码是否存在语法错误;

中文网地址 http://eslint.cn/

使用VSCode编译器在Vue项目中的使用

在初始化项目时选择是否使用

ESLint管理代码(选择Y则默认开启)

Use ESLint to lint your code? (Y/n)

详解ESLint在Vue中的使用小结

默认使用的是此标准https://github.com/standard/standard/blob/master/docs/RULES-zhcn.md

以下是对.editorconfig、.eslintignore、.eslintrc.js 文件进行详细解释

.editorconfig文件(主要用于配置IDE)

规范缩进风格,缩进大小,tab长度以及字符集等,解决不同IDE的编码范设置。EditorConfig 插件会去查找当前编辑文件的所在文件夹或其上级文件夹中是否有 .editorconfig 文件。如果有,则编辑器的行为会与 .editorconfig 文件中定义的一致,并且其优先级高于编辑器自身的设置。

root = true
# 对所有文件有效 //[*js]只对js文件有效
[*]
#设置编码格式
charset = utf-8
#缩进类型 可选space和tab
indent_style = space
#缩进数量可选整数值2 or 4,或者tab
indent_size = 2
#换行符的格式
end_of_line = lf
# 是否在文件的最后插入一个空行 可选true和false
insert_final_newline = true
# 是否删除行尾的空格 可选择true和false
trim_trailing_whitespace = true

.eslintignore文件(放置需要ESLint忽略的文件,只对.js文件有效)

/build/
/config/
/dist/
/src/utils/
/src/router/*.js

.eslintrc.js 文件(用来配置ESLint的检查规则)

module.exports = {
  //此项是用来告诉eslint找当前配置文件不能往父级查找
  root: true, 
  //此项是用来指定eslint解析器的,解析器必须符合规则,babel-eslint解析器是对babel解析器的包装使其与ESLint解析
  parser: 'babel-eslint',
  //此项是用来指定javaScript语言类型和风格,sourceType用来指定js导入的方式,默认是script,此处设置为module,指某块导入方式
  parserOptions: {
    sourceType: 'module'
  },
  //此项指定环境的全局变量,下面的配置指定为浏览器环境
  env: {
    browser: true,
  },
  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  // 此项是用来配置标准的js风格,就是说写代码的时候要规范的写,如果你使用vs-code我觉得应该可以避免出错
  extends: 'standard',
  // required to lint *.vue files
  // 此项是用来提供插件的,插件名称省略了eslint-plugin-,下面这个配置是用来规范html的
  plugins: [
    'html'
  ],
  // add your custom rules here
  // 下面这些rules是用来设置从插件来的规范代码的规则,使用必须去掉前缀eslint-plugin-
  // 主要有如下的设置规则,可以设置字符串也可以设置数字,两者效果一致
  // "off" -> 0 关闭规则
  // "warn" -> 1 开启警告规则
  //"error" -> 2 开启错误规则
  // 了解了上面这些,下面这些代码相信也看的明白了
 rules: {
  // allow async-await
  'generator-star-spacing': 'off',
  // allow debugger during development
  'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  // js语句结尾必须使用分号
  'semi': ['off', 'always'],
  // 三等号
  'eqeqeq': 0,
  // 强制在注释中 // 或 /* 使用一致的空格
  'spaced-comment': 0,
  // 关键字后面使用一致的空格
  'keyword-spacing': 0,
  // 强制在 function的左括号之前使用一致的空格
  'space-before-function-paren': 0,
  // 引号类型
  "quotes": [0, "single"],
  // 禁止出现未使用过的变量
  // 'no-unused-vars': 0,
  // 要求或禁止末尾逗号
  'comma-dangle': 0
 }
}
  • “off” 或 0 - 关闭规则
  • “warn” 或 1 - 开启规则
  • “error” 或 2 - 开启规则

如何在老项目中加入ESlint

1. 在目录中添加.editorconfig、.eslintrc.js、.eslintignore这三个文件

2. 在package.json的”devDependencies”中加入ESlint所需要的包

"babel-eslint": "^7.1.1",
  "eslint": "^3.19.0",
  "eslint-config-standard": "^10.2.1",
  "eslint-friendly-formatter": "^3.0.0",
  "eslint-loader": "^1.7.1",
  "eslint-plugin-html": "^3.0.0",
  "eslint-plugin-import": "^2.7.0",
  "eslint-plugin-node": "^5.2.0",
  "eslint-plugin-promise": "^3.4.0",
  "eslint-plugin-standard": "^3.0.1",

3. 在bulid/webpack.base.conf.js文件中加入ESlint规则并生效

// 在module的rules中加入
 module: {
  rules: [
   {
    test: /\.(js|vue)$/,
    loader: 'eslint-loader',
    enforce: 'pre',
    include: [resolve('src'), resolve('test')],
    options: {
     formatter: require('eslint-friendly-formatter'),
     // 不符合Eslint规则时只警告(默认运行出错)
     // emitWarning: !config.dev.showEslintErrorsInOverlay
    }
   },
  ]
 }

4. 重新bulid代码运行,完美生效!!!!!!

推荐三个VSCode插件

  • ESLint (只支持高亮显示js文件)
  • EditorConfig
  • Typings(代码错误提示)

常见的报错

文件末尾存在空行(eol-last)

详解ESLint在Vue中的使用小结

缺少分号(‘semi': [‘error','always'])

详解ESLint在Vue中的使用小结

关键字后面缺少空格

详解ESLint在Vue中的使用小结

字符串没有使用单引号('quotes': [1, 'single'])

详解ESLint在Vue中的使用小结

缩进错误

详解ESLint在Vue中的使用小结

没有使用全等(eqeqeq)

详解ESLint在Vue中的使用小结

导入组件却没有使用

详解ESLint在Vue中的使用小结

new了一个对象却没有赋值给某个常量(可以在该实例前添加此代码/eslint-disable no-new/忽略ESLint的检查)

详解ESLint在Vue中的使用小结

超过一行空白行(no-multiple-empty-lines)

详解ESLint在Vue中的使用小结

注释符 // 后面缩进错误(lines-around-comment)

详解ESLint在Vue中的使用小结VScode

用户配置

{
  "workbench.startupEditor": "newUntitledFile",
  // 以下是按照ESLint格式化代码
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "editor.quickSuggestions": {
   "strings": true
  },
  "editor.tabSize": 2,
  "eslint.validate": [
   "javascript",
   "javascriptreact",
   "html",
   "vue",
   {
    "language": "html",
    "autoFix": true
   }
  ],
  // "files.autoSave": "onFocusChange",
  // "vetur.validation.template": false,
  // // 防止格式化代码后单引号变双引号
  // "prettier.singleQuote": true,
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1500,
  // "git.confirmSync": false
  // 配置是否从更新通道接收自动更新。更改后需要重启。
  "update.channel": "none"
}

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

Javascript 相关文章推荐
javascript 操作select下拉列表框的一点小经验
Mar 20 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
Aug 02 Javascript
javascript生成随机数的方法
May 16 Javascript
AngularJS向后端ASP.NET API控制器上传文件
Feb 03 Javascript
jQuery遍历节点树方法分析
Sep 08 Javascript
新手学习前端之js模仿淘宝主页网站
Oct 31 Javascript
原生JS实现圣旨卷轴展开效果
Mar 06 Javascript
Vue打包后出现一些map文件的解决方法
Feb 13 Javascript
Vue列表渲染的示例代码
Nov 01 Javascript
vue键盘事件点击事件加native操作
Jul 27 Javascript
微信小程序实现日历签到
Sep 21 Javascript
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 Vue.js
手淘flexible.js框架使用和源代码讲解小结
Oct 15 #Javascript
javascript匿名函数中的'return function()'作用
Oct 15 #Javascript
Vue Cli3 创建项目的方法步骤
Oct 15 #Javascript
Vue-Router基础学习笔记(小结)
Oct 15 #Javascript
vue安装和使用scss及sass与scss的区别详解
Oct 15 #Javascript
ndm:NPM的桌面GUI应用程序
Oct 15 #Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
Oct 15 #Javascript
You might like
php 之 没有mysql支持时的替代方案
2006/10/09 PHP
thinkPHP框架实现图像裁剪、缩放、加水印的方法
2017/03/14 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
php基于Redis消息队列实现的消息推送的方法
2018/11/28 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
豆瓣网的jquery代码实例
2008/06/15 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
2010/06/11 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
2012/08/24 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
JS中判断null、undefined与NaN的方法
2014/03/24 Javascript
JavaScript数据类型学习笔记
2016/01/25 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
2016/12/08 Javascript
ES6新特性六:promise对象实例详解
2017/04/21 Javascript
详解ES6中的三种异步解决方案
2018/06/28 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
2018/09/28 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
小程序关于请求同步的总结
2019/05/05 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
2020/01/07 Javascript
Python的time模块中的常用方法整理
2015/06/18 Python
如何利用Fabric自动化你的任务
2016/10/20 Python
python编程之requests在网络请求中添加cookies参数方法详解
2017/10/25 Python
全面了解Nginx, WSGI, Flask之间的关系
2018/01/09 Python
python 遍历目录(包括子目录)下所有文件的实例
2018/07/11 Python
基于css3 animate制作绚丽的动画效果
2015/11/24 HTML / CSS
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
美国尼曼百货官网:Neiman Marcus
2019/09/05 全球购物
php优化查询foreach代码实例讲解
2021/03/24 PHP
信电学院毕业生自荐书
2014/05/24 职场文书
迎国庆演讲稿
2014/09/05 职场文书
交通事故赔偿协议书
2014/10/16 职场文书
喋血孤城观后感
2015/06/08 职场文书
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers