关闭

你不知道的Vuejs - 使用ESLint检查代码质量

时间: 2018-03-14阅读: 3579标签: eslint

by yugasun from yugasun.com/post/you-do… 本文可全文转载,但需要保留原作者和出处。


前言

JavaScript 是一门弱类型语言,所以语法检查变得尤为重要。虽然有很多前端IDE开发工具,可以很好地帮助我们提示在编写时的错误,但是大多数开发者还是使用的像 Sublime Text、Visual Studio Code 之类的轻量级编辑器,这导致在开发中很容易出现各种错误,比如单词拼写错误,漏掉了括号等。而且每个人的代码编写习惯也不一样,因此有的项目的代码格式千差万别,比如 缩进空格数,有的习惯4个,有的习惯2个,这也导致项目维护起来越来越麻烦,遇到错误也很难定位。因此对 JavaScript 进行语法检查的工具应运而生,目前 ESLint 使用最为广泛。这篇将讲解如何将 ESLint 集成到我们的项目中。


配置方式

ESLint 具有高可配置行,这就意味着你可以根据项目需求定制代码检查规则。ESLint 的配置方式可以有以下两种方式:

  • 文件注释:在 Javascript 文件中使用注释包裹配置内容。
  • 配置文件(推荐):在项目根目录下创建包含检查规则的 .eslintrc.* 文件。

扩展配置文件

ESLint 配置文件中的 extends 字段可以扩展集成现有的规则,比如著名的 Airbnb JavaScript Style,可以通过安装 eslint-config-airbnb-base 集成使用。


开始使用

因为本人比较偏向于 Airbnb JavaScript Style,所以今后的代码规范将均使用此规范。并且我们这里是 vuejs 项目,所以需要同时对 .vue 文件中的 js 代码进行检测,就需要利用 eslint-plugin-vue 插件来搭配使用。

首先,安装依赖:

npm install eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue --save-dev

其次,在项目根目录下新建 .eslintrc.js 文件,配置如下:

module.exports = {
  extends: [ 'plugin:vue/essential', 'airbnb-base' ],
};

最后,在 package.json 中添加 lint 脚本:

// ...
"scripts": {
  // ...
  "lint": "eslint --ext .js,.vue src"
},
// ...

当然你也可以全局安装以上依赖,这样你可以直接运行 eslint --ext .js,.vue src 命令。

Ok, 配置好了~

命令行运行 npm run lint,输出如下:

$ npm run lint

> vue-webpack-demo@0.0.1 lint /Users/Yuga/Desktop/VueLearning/You-Dont-Know-Vuejs/chapter2/4
> eslint --ext .js,.vue src

/Users/Yuga/Desktop/VueLearning/You-Dont-Know-Vuejs/chapter2/4/src/hello1.vue
  17:16  error    Missing trailing comma        comma-dangle
  26:9   warning  Unexpected console statement  no-console
  38:9   warning  Unexpected console statement  no-console

/Users/Yuga/Desktop/VueLearning/You-Dont-Know-Vuejs/chapter2/4/src/utils.js
  15:3  warning  Unexpected console statement  no-console

✖ 4 problems (1 error, 3 warnings)
  1 error, 0 warnings potentially fixable with the `--fix` option.

你会发现检查出一堆错误,不要方,输出的错误说明的非常明显,只需要根据错误提示行号去检查,然后根据规则更改就行了。

上面的命令中 --ext 参数就是用来指定需要检查的扩展名的文件,src 就是指定检查的目录。


添加自定义规则

虽然 Airbnb 的代码风格已经很成熟了,但是并不是满足任何人需求的。有些时候,如果想修改一些规则怎么办?这时我们可以通过在 .eslintrc.js 文件中添加 rules 字段来自定义。规则 no-console 就是用来规定禁止使用 console 来调试程序,Airbnb 代码风格在检查是会输出如下警告:

/Users/Yuga/Desktop/VueLearning/You-Dont-Know-Vuejs/chapter2/4/src/hello1.vue
  26:9  warning  Unexpected console statement  no-console

但是我们有些时候项目经常使用到 console,所以我会关闭该条规则,修改 .eslintrc.js 文件如下:

module.exports = {
  extends: [ 'plugin:vue/essential', 'airbnb-base' ],
  rules: {
    'no-console': 'off',
  }
};

这样在运行 npm run lint 时,命令行就不会输出 no-console 警告了。

有关 ESLint 的基础教程请阅读 ESLint,关于 Airbnb 代码规范,请阅读 Airbnb JavaScript Style


总结

读完你会发现,之前自己一直不敢使用的 ESLint 是如此的简单,无论是安装还是配置,非常的人性化。

作为一名优秀的程序员,规范化的代码风格尤为重要,这不仅能降低代码出错率,而且非常有益于别人阅读你的代码。说到代码阅读,代码注释也是必不可少的。俗话说 己所不欲,勿施于人,如果你不想阅读 shit 一样的代码,那么就先从自身做起,赶紧在你的项目中实践起来吧~

源码在此


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/506

关闭

什么是ESLint?

官网上告诉我们,ESLint 是一个用来识别 ECMAScript/JavaScript 并且按照规则给出报告的代码检测工具,哦,所以我们可以知道,ESLint 就是一个工具,而且是一个用来检查代码的工具。代码检查是一种静态的分析,常用于寻找有问题的模式或者代码

vue-cli3 取消eslint 校验代码

vue create hello-world创建项目的时候选择了Linter / Formatter,所以写代码的时候会有代码规范检查,怎么才能关闭这个校验呢?

ESLint_JS代码检查工具

ESLint是一个JavaScript代码静态检查工具,可以检查JavaScript的语法错误,提示潜在的bug,可以有效提高代码质量,维持前端团队高度一致的编码风格。ESLint不但提供一些默认的规则,也提供用户自定义规则来约束所写的JavaScript代码。本文将详细介绍ESLint

ESLint规则配置说明

有的时候多人开发,代码的风格,用的代码编辑器都各不相同,所以为了大家能保持一种统一的风格,ESLint就可以帮我们检查代码的格式,和风格。

认识 ESLint 和 Prettier

先说是什么:ESLint 是一个检查代码质量与风格的工具,配置一套规则,他就能检查出你代码中不符合规则的地方,部分问题支持自动修复。

vue中关于eslint,以及如何在vue项目中关闭或使用ESLint

ESLint是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具,使用它可以避免低级错误和统一代码的风格。 由于每个人写代码的习惯都会有所不同,所以统一代码风格在团队协作中尤为重要。 这篇文章主要讲解如何在vue项目中关闭或使用ESLint

项目常用eslint配置(Vue/React/TypeScript)

Vue项目常用eslint配置需要安装依赖(Vue这里使用standard扩展和vue插件,所以需要安装);React项目常用eslint配置同样安装依赖,React这里使用的airbnb扩展。安装eslint-import-resolver-webpack用来解决webpack中设置的别名eslint无法识别报错的问题。

vue开发之代码规范eslint

ESLint不管是多人合作还是个人项目,代码规范都是很重要的。这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。

Eslint规则_ESLint常见命令

详解 ESLint 规则,规范你的代码,ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具,它的目标是保证代码的一致性和避免错误。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!