详解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 禁止复制网页
Jun 11 Javascript
IE中createElement需要注意的一个问题
Jul 13 Javascript
javascript中直接引用Microsoft的COM生成Word
Jan 20 Javascript
无限树Jquery插件zTree的常用功能特性总结
Sep 11 Javascript
Vue.js使用v-show和v-if的注意事项
Dec 13 Javascript
作为老司机使用 React 总结的 11 个经验教训
Apr 08 Javascript
浅谈react受控组件与非受控组件(小结)
Feb 09 Javascript
element-ui upload组件多文件上传的示例代码
Oct 17 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
Sep 17 Javascript
vue点击当前路由高亮小案例
Sep 26 Javascript
详解JavaScript匿名函数和闭包
Jul 10 Javascript
vue动画—通过钩子函数实现半场动画操作
Aug 09 Javascript
手淘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/01/04 PHP
在PHP中操作Excel实例代码
2010/04/29 PHP
phpmyadmin 3.4 空密码登录的实现方法
2010/05/29 PHP
php模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
php结合ajax实现手机发红包的案例
2016/10/13 PHP
PHP压缩图片功能的介绍
2019/03/21 PHP
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
2007/02/05 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
2012/11/01 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
2013/08/02 Javascript
JS格式化数字保留两位小数点示例代码
2013/10/15 Javascript
JS操作Cookie写入和读取实例代码
2013/10/20 Javascript
jQuery获得内容和属性示例代码
2014/01/16 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
2014/02/21 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
AngularJS转换响应内容
2016/01/27 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
2016/08/02 Javascript
ES6中let 和 const 的新特性
2018/09/03 Javascript
Vue slot用法(小结)
2018/10/22 Javascript
Vue组件Draggable实现拖拽功能
2018/12/01 Javascript
JS算法教程之字符串去重与字符串反转
2020/12/15 Javascript
Python实现字符串格式化输出的方法详解
2017/09/20 Python
Tensorflow中的placeholder和feed_dict的使用
2018/07/09 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
python深copy和浅copy区别对比解析
2019/12/26 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
python实现发送邮件
2021/03/02 Python
美国网上鞋子零售商:Dr. Scholl’s Shoes
2017/11/17 全球购物
护士的自我鉴定
2014/02/07 职场文书
《小石潭记》教学反思
2014/02/13 职场文书
国家税务局干部作风整顿整改措施
2014/09/18 职场文书
家庭经济困难证明
2015/06/23 职场文书
python文件目录操作之os模块
2021/05/08 Python
Django中session进行权限管理的使用
2021/07/09 Python
浅谈Redis跟MySQL的双写问题解决方案
2022/02/24 Redis