持续创作,加速成长!这是我参与「掘金日新计划 · 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代码
vs中ESLint扩展工具
生成ESlint配置文件
eslint可以创建独立的配置文件 .eslintrc.js, 也可以直接在package.json中配置
-
执行 node_modules/.bin 文件夹里的eslint脚本来创建配置文件
-
包含完整脚本路径的命令: ./node_modules/.bin/eslint --init
-
也可以用npx来执行(推荐): npx eslint --init
(npx是随node一起安装的, 能去.bin目录里找 目标叫本文件, 简化执行脚本的语法)
-
-
创建配置文件过程中需要选择配置:(选择你喜欢的就可以第六个我比较喜欢Airbnb的)
后记
- 希望对对前端有兴趣的朋友们有帮助
- 这篇文章主要是关于eslint的, 希望大家喜欢
- 不报错几乎是不可能的如果报错一定要记得利用好搜索引擎respect