小白学习vuejs-26-eslint

117 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第31天,点击查看活动详情

前文

> -   本文是我自学vue的一些知识以及个人理解, 希望帮助到一些想要学习前端的小白朋友
> -   介绍本次学习的是eslint相关知识
> -   这是基于我学习的笔记而来的文章
> -   backend: 后端 frontend: 前端
  • 用vue脚手架创建项目时, 我们打不分时候都会选择安装ESLint
  • eslint是一个格式化检查代码的一个工具
  • eslint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目, 它的目标是提供一个插件化的javascript代码检测工具

Nicholas C. Zakas

  • 大家听到这个名字可能感到很陌生, 但是js高级程序设计这本书大家一定不会陌生, 没错他就是这本书的作者

关于eslint

  • 代码检查是一种静态的分析
  • 常用语寻找问题
  • eslint中自带了一些规则(rule)你也可已修改, 添加自己想要, 或不想要的规则
  • 每条规则各自独立, 可以开启或者关闭(没有不能关的)

需要注意的是: eslint有两个工具, 一个是模块包, 一个是VSCode扩展工具

这边主要将eslint模块包

为什么使用eslint ?

  • 因为javascript是一个动态的弱类新语言, 在开发过程中容易出错, 而要寻找js的错误一般需要在执行过程中不点调试, 非常麻烦, eslint可以让程序员在编码的过程中发现问题, 但是使用eslint, 也会让你爆炸, 尤其是刚开始的时候各种报错, 一些其实没什么大问题的错误, 真的会让你头疼得一批, 还好可以设置规则(rule)
  • 统一团队编码规范(命名, 众多格式)
  • 统一语法, 毕竟es版本已经不少了(var/let...)
  • 减少git不必要的提交
  • 避免低级错误

安装eslint

  • 命令行的方式

    为了在Nodejs上运行eslint, 你必须安装npm, 如果还没安装百度怎么安装bro

    有了npm然后运行下面的命令, 如果在项目中一定要注意cd对文件夹没, ps.我经常犯了这个错

    npm install eslint -D 全局安装

    npm install eslint --save-dev 项目安装

    从厂库中安装ESlint CLI (实在没懂可以看一下官方文档dogs)

    eslint [options] [file|dir|glob]

    当然也可以通过vue脚手架加创建项目时自动下载配置

注意

安装后, 在 node_moduels中下载了很多的包

  • .bin/eslint.cmd脚本文件, 内部通过nodejs执行 eslint运行的包的代码(nodejs也应该是一个很好玩的的东西以后有机会可以去玩一玩)
  • @eslint包用来规范eslint配置文件
  • eslint开头的包是eslint运行包, 包含elint代码

eslint2.png

vs中ESLint扩展工具

eslint插件.png

生成ESlint配置文件

eslint可以创建独立的配置文件 .eslintrc.js, 也可以直接在package.json中配置

  1. 执行 node_modules/.bin 文件夹里的eslint脚本来创建配置文件

    • 包含完整脚本路径的命令: ./node_modules/.bin/eslint --init

    • 也可以用npx来执行(推荐): npx eslint --init

      (npx是随node一起安装的, 能去.bin目录里找 目标叫本文件, 简化执行脚本的语法)

  2. 创建配置文件过程中需要选择配置:(选择你喜欢的就可以第六个我比较喜欢Airbnb的)

eslint3.png

后记

  • 希望对对前端有兴趣的朋友们有帮助
  • 这篇文章主要是关于eslint的, 希望大家喜欢
  • 不报错几乎是不可能的如果报错一定要记得利用好搜索引擎respect