vue-cli的eslint相关用法

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来规范代码编辑~

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

(0)

相关推荐

  • 详解vue-cli中的ESlint配置文件eslintrc.js

    本文讲解vue-cli脚手架根目录文件.eslintrc.js,分享给大家,具体如下: 1.eslint简介 eslint是用来管理和检测js代码风格的工具,可以和编辑器搭配使用,如vscode的eslint插件.当有不符合配置文件内容的代码出现就会报错或者警告 2.安装exlint npm init -y npm install eslint --save-dev node_modules\.bin\eslint --init 初始化配置文件,此配置文件配置好之后,vscode编辑器自动识别

  • 给vue项目添加ESLint的详细步骤

    eslint配置方式有两种: 1.注释配置:使用js注释来直接嵌入ESLint配置信息到一个文件里 2.配置文件:使用一个js,JSON或者YAML文件来给整个目录和它的子目录指定配置信息.这些配置可以写在一个文件名为.eslintrc.*的文件或者在package.json文件里的eslintConfig项里,这两种方式ESLint都会自动寻找然后读取,或者你也可以在命令行里指定一个配置文件. 有几种东西是可以配置的: 环境:你的脚本会在哪种环境下运行.每个环境带来了一组特定的预定义的全局变量

  • vue-cli的eslint相关用法

    ESLint简介 关于ESLint的介绍网上很多,这里就简单说些有用的. ESLint的作用是检查代码错误和统一代码风格的.由于每个人写代码的习惯都会有所不同,所以统一代码风格在团队协作中尤为重要. vue-cli的eslint相关 vue-cli在init初始化时会询问是否需要添加ESLint,确认之后在创建的项目中就会出现.eslintignore和.eslintrc.js两个文件. .eslintignore类似Git的.gitignore用来忽略一些文件不使用ESLint检查. .esl

  • vue项目关闭eslint校验

    简介eslint eslint是一个JavaScript的校验插件,通常用来校验语法或代码的书写风格. 官方文档:https://eslint.org 这篇文章总结了eslint的规则:Eslint规则说明 关闭eslint校验 有了eslint的校验,可以来规范开发人员的代码,是挺好的.但是有些像缩进.空格.空白行之类的规范,在开发过程中一直报错,未免太过于苛刻了.所以,我还是会选择关闭eslint校验. 下面就介绍一下vue项目中如何关闭这个校验. 首先我们在创建一个vue项目的时候,会有一

  • 使用 Vue cli 3.0 构建自定义组件库的方法

    本文旨在给大家提供一种构建一个完整 UI 库脚手架的思路:包括如何快速并优雅地构建UI库的主页.如何托管主页.如何编写脚本提升自己的开发效率.如何生成 CHANGELOG 等 前言 主流的开源 UI 库代码结构主要分为三大部分: 组件库本身的代码:这部分代码会发布到 npm 上 预览示例和查看文档的网站代码:类似 Vant.ElementUI 这类网站. 配置文件和脚本文件:用于打包和发布等等 编写此博文的灵感 UI 框架库( vue-cards ),PS:此 UI框架库相对于Vant.Elem

  • Vue CLI 3搭建vue+vuex最全分析(推荐)

    一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue serve .vue ui 等命令) CLI 服务:@vue/cli-service是一个开发环境依赖.构建于 webpack和 webpack-dev-server之上(提供 如:serve.build 和 inspect 命令) CLI 插件:给Vue 项目提供可选功能的 npm 包 (如:

  • vscode下vue项目中eslint的使用方法

    前言 在vscode的vue项目中,关于代码检查和格式化,遇到各种各样的问题,比如: 不清楚安装的拓展的功能,导致安装了重复功能的拓展 右键格式化文档的时候,不是按eslint的规则来格式化,导致需要我再次手动调整 保存时不能自动修复代码 以下通过自己的实践,进行了相应配置,目前可以实现: 仅安装2个推荐的拓展 右键格式化文档按照eslint规则,不会产生错误 保存时自动修复代码 vscode 拓展安装 eslint 拓展 该拓展本身不带任何插件,当前项目要使用该拓展,需要安装相应的npm包(全

  • 浅谈Vue CLI 3结合Lerna进行UI框架设计

    当前大部分UI框架设计的Webpack配置都相对复杂,例如 Element. Ant Design Vue和Muse-UI等Vue组件库.例如Element,为了实现业务层面的两种引入形式( 完整引入 和 按需引入 ),以及抛出一些可供业务层面通用的 utils . i18n 等,Webpack配置变得非常复杂.为了简化UI框架的设计难度,这里介绍一种简单的UI框架设计,在此之前先简单介绍一下 Element 的构建流程,以便对比新的UI框架设计. 一般组件库的设计者将引入形式设计成 完整引入

  • 实例详解Vue项目使用eslint + prettier规范代码风格

    团队开发的项目,如果没有对代码风格作要求,有多少团队成员,就当然会出现多少种不同的代码风格.因此,我们需要一种能够统一团队代码风格的工具,作为强制性的规范,统一整个项目的代码风格. 幸好,我们有 eslint 和 prettier . eslint VS prettier 应该大多数项目都已经采用eslint来对代码进行质量检查,可能少部分还会采用其进行一定程度上的统一风格.那为什么还需要prettier呢?我们先来对它们作一个简单的了解. 各种linters 总体来说,linters有两种能力

  • 详解Vue Cli浏览器兼容性实践

    浏览器市场占有率 在处理浏览器兼容性问题之前,我们先来看一下现在的浏览器市场份额是怎样的,

  • Vue CLI中模式与环境变量的深入详解

    前言 在实际项目的开发中,我们一般会经历项目的开发阶段.测试阶段和最终上线阶段,每一个阶段对于项目代码的要求可能都不尽相同,那么我们如何能够游刃有余的在不同阶段下使我们的项目呈现不同的效果,使用不同的功能呢? 这里就需要引入环境的概念.官方文档中模式和环境变量说明 一般一个项目都会有以下 3 种环境: 开发环境(开发阶段,本地开发版本,一般会使用一些调试工具或额外的辅助功能): 测试环境(测试阶段,上线前版本,除了一些 bug 的修复,基本不会和上线版本有很大差别): 生产环境(上线阶段,正式对

  • Vue3之 Vue CLI多环境配置

    目录 一.前言 二.实现切换 1.增加开发和生产配置文件 2.修改编译和启动支持多环境 3.修改axios请求地址支持多环境 一.前言 这里相对于之前就没那么麻烦了,通俗点说就是使用配置文件来管理多环境,实现环境的切换. 二.实现切换 1.增加开发和生产配置文件 在web的根目录下,创建开发环境切换配置文件.env.dev,内容如下: NODE_ENV=development VUE_APP_SERVER=http://127.0.0.1:8880 在web的根目录下,创建线上环境切换配置文件.

随机推荐