详解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 相关文章推荐
用js实现上传图片前的预览(TX的面试题)
Aug 14 Javascript
JS的递增/递减运算符和带操作的赋值运算符的等价式
Dec 08 Javascript
JS 控件事件小结
Oct 31 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
基于jquery实现的省市区级联无ajax
Sep 24 Javascript
使用JS画图之点、线、面
Jan 12 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
Apr 17 Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
Dec 02 Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 Javascript
JS数组方法join()用法实例分析
Jan 18 Javascript
vue实现倒计时功能
Mar 24 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 异常处理实现代码
2009/03/10 PHP
php使用异或实现的加密解密实例
2013/09/04 PHP
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
ThinkPHP中使用Ueditor富文本编辑器
2015/09/02 PHP
php通过pecl方式安装扩展的实例讲解
2018/02/02 PHP
JavaScript脚本语言在网页中的简单应用
2007/05/13 Javascript
getElementById在任意一款浏览器中都可以用吗的疑问回复
2007/05/13 Javascript
jQuery随机切换图片的小例子
2013/04/18 Javascript
Javascript无阻塞加载具体方式
2013/06/28 Javascript
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
AngularJS Ajax详解及示例代码
2016/08/17 Javascript
php输出全部gb2312编码内的汉字方法
2017/03/04 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
2017/04/11 jQuery
原生JS实现N级菜单的代码
2017/05/21 Javascript
详解webpack 多页面/入口支持&公共组件单独打包
2017/06/29 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
React学习笔记之高阶组件应用
2018/06/02 Javascript
JS使用iView的Dropdown实现一个右键菜单
2019/05/06 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
详解Vue的watch中的immediate与watch是什么意思
2019/12/30 Javascript
Python在Windows和在Linux下调用动态链接库的教程
2015/08/18 Python
python基础教程之匿名函数lambda
2017/01/17 Python
利用Tkinter和matplotlib两种方式画饼状图的实例
2017/11/06 Python
python实现词法分析器
2019/01/31 Python
用python解压分析jar包实例
2020/01/16 Python
Python项目跨域问题解决方案
2020/06/22 Python
基于Python采集爬取微信公众号历史数据
2020/11/27 Python
高级方案规划工程师岗位职责
2013/11/29 职场文书
倡导文明标语
2014/06/16 职场文书
公司离职证明范本(5篇)
2014/09/17 职场文书
2014年信息技术工作总结
2014/12/16 职场文书
部门经理助理岗位职责
2015/04/13 职场文书
2015年小学教导处工作总结
2015/05/26 职场文书
pytorch中的model=model.to(device)使用说明
2021/05/24 Python
Node与Python 双向通信的实现代码
2021/07/16 Javascript
MySQL 表锁定 LOCK和UNLOCK TABLES的 SQL语法
2022/04/18 MySQL