vue-cli的eslint相关用法_网络技术_宿州市腾雀网络科技有限公司

vue-cli的eslint相关用法

发布时间 - 2026-01-11 03:29:04 点击率：次

ESLint简介

关于ESLint的介绍网上很多，这里就简单说些有用的。

ESLint的作用是检查代码错误和统一代码风格的。由于每个人写代码的习惯都会有所不同，所以统一代码风格在团队协作中尤为重要。

vue-cli的eslint相关

vue-cli在init初始化时会询问是否需要添加ESLint，确认之后在创建的项目中就会出现.eslintignore和.eslintrc.js两个文件。

.eslintignore类似Git的.gitignore用来忽略一些文件不使用ESLint检查。
.eslintrc.js是ESLint配置文件，用来设置插件、自定义规则、解析器等配置。

.eslintrc.js

// http://eslint.org/docs/user-guide/configuring

module.exports = {
 root: true,
 parser: 'babel-eslint',
 parserOptions: {
  sourceType: 'module'
 },
 env: {
  browser: true,
 },
 // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
 extends: 'standard',
 // required to lint *.vue files
 plugins: [
  'html'
 ],
 // add your custom rules here
 'rules': {
  // allow paren-less arrow functions
  'arrow-parens': 0,
  // allow async-await
  'generator-star-spacing': 0,
  // allow debugger during development
  'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
 }
}

解析器(parser)：使用了babel-eslint，这个可以在package.json中找到，说明我们已经安装过该解析器了。

环境配置(env)：在浏览器中使用eslint。

继承(extends)：该配置文件继承了standard规则，具体规则自己看文档，看不懂有中文版的。

规则(rules)：对于三个自定义规则，我特地查了官方文档。

arrow-parems 允许箭头函数参数使用括号,具体操作请看文档
generator-star-spacing 允许方法之间加星号，如function * generator() {}。文档在此。特地查了下，发现这是ES6提供的生成器函数，回头学习下。
no-debugger' 允许在开发环境下使用debugger。这个比较简单，不过还是贴下文档便于查看。

注意：在rules中每个配置项后面第一个值是eslint规则的错误等级。

* “off” 或 0 - 关闭这条规则
* “warn” 或 1 - 违反规则会警告（不会影响项目运行）
* “error” 或 2 - 违反规则会报错（屏幕上一堆错误代码~）

遇到过的问题

由于一开始我不了解ESLint就写项目，不知道要看Standard的文档，所以遇到了很多ESLint的错误和警告，分享下希望能对朋友们有帮助。

1. Do not use ‘new' for side effects

该错误是由于我删除了/* eslint-disable no-new*/这段注释引发的，/* eslint-disable */这段注释的作用就是不让eslint检查注释下面的代码。

new Vue({
 el: '#app',
 router,
 template: '<App/>',
 components: { App }
})

错误原因：不可以直接new一个新对象，需要将新对象赋值给一个变量。

var vm = new Vue()

2. Strings must use singlequote

错误原因：字符串必须用单引号

return {
   msg: "Welcome to Your Vue.js App", //双引号，报错！
  }

3. Expected space(s) after “return”

错误原因：括号两侧必须要有空格隔开

return{// 没有空格报错
 msg: 'Welcome to Your Vue.js App', 
}

startClock (){} //){中间没有空格，报错！

4. Expected indentation of 8 spaces but found 6

错误原因：使用两个空格进行缩进。

   if (this.IntervalID === '') {
   this.IntervalID = setInterval(this.countDown, 1000)
   }

其实ESLint的报错并不难懂，只要理解错误原因还是很好解决的。如果提前看看文档，更不会出现太多报错问题了。这个故事告诉我们看文档是很重要滴~%>_<%

Tips

发现ESLint的报错都会在报错语句前面显示一个URL，点击进去可以看到详细的错误信息哦。这是我刚在写博客的时候发现的。

 http://eslint.org/docs/rules/no-new Do not use 'new' for side effects 
 E:\Github\EfficiencyTools\EfficiencyTool-VueMobile\src\main.js:15:1
 new Vue({

这里的 http://eslint.org/docs/rules/no-new 就是ESLint规则报错的原因，还是很人性化的。

总结

其实vue-cli的ESLint不需要我们配置太多，基本的都配置好了，如果你愿意完全可以照着vue-cli提供的规则去写代码。当我们需要修改一些规则的时候添加到rules中替换原有规则就可以了。一开始用ESLint写代码很烦，经常由于一些格式问题调试报错，让回去改格式。不过慢慢的就会发现使用ESLint之后代码的确可读性、美观性上都好了很多。
推荐使用ESLint来规范代码编辑~

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# vue-cli # eslint # vue # cli # 配置 # vue-cli3项目配置eslint代码规范的完整步骤 # vue-cli4项目开启eslint保存时自动格式问题 # vue-cli3 取消eslint校验代码的解决办法 # vue-cli脚手架搭建的项目去除eslint验证的方法 # 详解vue-cli下ESlint 配置说明 # Vue-cli Eslint在vscode里代码自动格式化的方法 # 详解vue-cli中的ESlint配置文件eslintrc.js # vue-cli项目中遇到的eslint的坑及解决 # 报错 # 文档 # 这是 # 就会 # 好了 # 太多 # 这段 # 自定义 # 配置文件 # 如果你 # 很好 # 我不 # 第一个 # 在此 # 不需要 # 每个人 # 要有 # 不可以 # 推荐使用 # 会在

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：Ubuntu中Nginx怎么安装与配置

下一篇：微信小程序之选项卡的实现方法

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：Ubuntu中Nginx怎么安装与配置

下一篇：微信小程序之选项卡的实现方法