详解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 相关文章推荐
网页设计常用的一些技巧
Dec 22 Javascript
javascript setTimeout和setInterval计时的区别详解
Jun 21 Javascript
node.js中的fs.writeFileSync方法使用说明
Dec 14 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
Dec 18 Javascript
jQuery中animate动画第二次点击事件没反应
May 07 Javascript
下一代Bootstrap的5个特点 超酷炫!
Jun 17 Javascript
JS简单添加元素新节点的方法示例
Feb 10 Javascript
JavaScript 正则命名分组【推荐】
Jun 07 Javascript
vue webpack开发访问后台接口全局配置的方法
Sep 18 Javascript
layui实现显示数据表格、搜索和修改功能示例
Jun 03 Javascript
vue 解决addRoutes多次添加路由重复的操作
Aug 04 Javascript
js实现飞机大战小游戏
Aug 26 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版
2006/10/09 PHP
php 数学运算验证码实现代码
2009/10/11 PHP
php 批量替换程序的具体实现代码
2013/10/04 PHP
Laravel中任务调度console使用方法小结
2017/05/07 PHP
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
Laravel框架之解决前端显示图片问题
2019/10/24 PHP
网站页面自动跳转实现方法PHP、JSP(上)
2010/08/01 Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
2010/12/28 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
2011/05/24 Javascript
MooBox 基于Mootools的对话框插件
2012/01/20 Javascript
全面兼容的javascript时间格式化函数(比较实用)
2014/05/14 Javascript
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
js密码强度校验
2015/11/10 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
JS中多步骤多分步的StepJump组件实例详解
2016/04/01 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
2017/03/29 Javascript
Nodejs读取文件时相对路径的正确写法(使用fs模块)
2017/04/27 NodeJs
详解express与koa中间件模式对比
2017/08/07 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
2019/05/12 jQuery
深入了解JS之作用域和闭包
2020/06/16 Javascript
Python构建XML树结构的方法示例
2017/06/30 Python
python添加模块搜索路径和包的导入方法
2019/01/19 Python
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
使用Python实现正态分布、正态分布采样
2019/11/20 Python
关于keras.layers.Conv1D的kernel_size参数使用介绍
2020/05/22 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
python 贪心算法的实现
2020/09/18 Python
德国帽子专家:Hutshopping
2019/11/03 全球购物
投标人廉洁自律承诺书
2014/05/26 职场文书
教室标语大全
2014/06/21 职场文书
2016春季幼儿园大班开学寄语
2015/12/03 职场文书
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android