详解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 相关文章推荐
node.js中的events.emitter.listeners方法使用说明
Dec 10 Javascript
微信JSSDK上传图片
Aug 23 Javascript
JS实现alert中显示换行的方法
Dec 17 Javascript
Bootstrap实现水平排列的表单
Jul 04 Javascript
Javascript将JSON日期格式化
Aug 23 Javascript
HTML Table 空白单元格补全的简单实现
Oct 13 Javascript
AngularJS用户选择器指令实例分析
Nov 04 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
May 02 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
p5.js实现斐波那契螺旋的示例代码
Mar 22 Javascript
Vue页面刷新记住页面状态的实现
Dec 27 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
Sep 11 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
使用NetBeans + Xdebug调试PHP程序的方法
2011/04/12 PHP
php设置允许大文件上传示例代码
2014/03/10 PHP
PHP输出英文时间日期的安全方法(RFC 1123格式)
2014/06/13 PHP
用PHP代码在网页上生成图片
2015/07/01 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
jQuery提示效果代码分享
2014/11/20 Javascript
Javascript 实现图片无缝滚动
2014/12/19 Javascript
jQuery 回调函数(callback)的使用和基础
2015/02/26 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
2015/09/11 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
Bootstrap select下拉联动(jQuery cxselect)
2017/01/04 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/25 Javascript
基于hover的用法实例(推荐)
2017/07/04 Javascript
JS时间控制实现动态效果的实例讲解
2017/07/31 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
iview table render集成switch开关的实例
2018/03/14 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
2020/04/17 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
pycharm 使用心得(四)显示行号
2014/06/05 Python
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
《Python之禅》中对于Python编程过程中的一些建议
2015/04/03 Python
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
python3中datetime库,time库以及pandas中的时间函数区别与详解
2020/04/16 Python
VSCode 自定义html5模板的实现
2019/12/05 HTML / CSS
工业设计专业推荐信
2013/10/29 职场文书
三分钟演讲稿范文
2014/04/24 职场文书
预防煤气中毒方案
2014/06/16 职场文书
2014年政协工作总结
2014/12/09 职场文书
晶体管单管来复再生式收音机
2021/04/22 无线电
使用golang编写一个并发工作队列
2021/05/08 Golang
vue实现登陆页面开发实践
2022/05/30 Vue.js