项目中的配置文件都是干嘛的?

大家好,我是东东吖。又到周末了,最近工作有点忙,但是我还是会保持每周给大家更新文章的,本文主要讲述项目中的配置文件的作用以及使用方法。

1、.gitignore

ignore:忽略的意思。顾名思义,这个配置文件是用来管理git的,当你把文件名写入这个文件,这个文件就会被忽略,不会被提交,当你把文件夹名写入这个文件,那么整个文件夹都会被忽略,不会被提交。为啥要这个配置文件呢?你想一想,我们下载的依赖包多大?这样的大文件肯定不能提交到git上去,而是提交上去了在线上部署下依赖包。还有类似小程序啊,由于包限制,我们会选择把一些静态文件资源放在线上访问,不会把前端本地的资源文件提交上去、放在本地只是方便我们调试和备份。

image.png

2、.eslintrc.js

这个配置文件是用来管理eslint规则的,在多人开发中,如果你没有设置eslint,而别人开启eslingt了,那对于别人是灾难性的,就拿我们公司的项目来说,这个项目是一个公众号,主要是用来支付的,由于没有太多业务逻辑,所有有整整一年没有更新了,里面一堆eslingt错误,也没有人管。而我最近要在这个项目上做一些人脸识别,活体检测,反洗钱等安全措施,每次修改一行代码,项目要跑10多秒,一点都没夸张,看着一大堆eslint错误,我脑壳真的头疼。

解决方法: 你可以用脚本自动检测和修改语法错误,亲测有效。但是只能修改一本部分。在package.json的script中加入这两句脚本运行即可。 image.png

再来看这个配置文件,里面的rules就是用来规定相关规则的。

  • "off"  或 0 - 关闭这个规则检查
  • "warn"  或 1 - 开启这个规则检查并提示(不影响退出状态)
  • "error"  或 2 - 开启规则检查并报错

image.png

举个例子,我们运行项目: image.png 这里报了eslint错误,报的意思是期待使用'===',而实际用的'==',这个规则的关键字在roles/后面,也就是eqeqed。我们在配置文件中配置 'eqeqeq':0,再次运行,就看不见这个错误了。

image.png

还有一个问题,如何不把它的规则关闭,就要修改正确,怎么快速找到eslint错误在项目中的位置,并修改呢?

image.png

和我们项目名同目录有一个NPM脚本,点开找到对应的脚本允许,控制台就会打印对应的eslint错误这个时候我们就可以按住crtr键,点击对应的eslint错误,vscode就会自动帮我们跳到eslint对应的文件夹错误位置,按照要求修改正确即可。

image.png

3、.eslintignore

顾名思义,这个配置文件是用来管理eslint需要忽略的文件的,写入这个配置里面的文件或者文件夹不会被eslint检测到,和.gitignore作用类似。

image.png

4、package.json

这个配置文件是用来管理包和脚本的。比如我们刚刚在这个配置文件加入了两行脚本,之后运行 npm run checklint 就可以检测错误,运行npm run reviselint就可以自动修改部分selint错误。

image.png

5.package-lock.json

lock:锁的意思,在街舞中有一种舞种就叫lockking,顾名思义这个文件是用来锁住包的,他会下载指定包的版本。

6.README.md

这是一个自诉文件,可以用来描述怎么跑这个项目,用到哪些技术等等。

image.png

7.favicon.icon

image.png 这个就是我们地址栏的icon图标,如果你需要替换,比如我们掘金的是一个锁,把锁的图片命名成这个favicon.icon,替换项目中的图片即可。这里有时候会有缓存,记得刷新即可。

image.png

8、 index.html

image.png 这里主要是用来配置项目地址栏的title的,比如我修改title为东东吖,项目运行后就会显示东东吖。也可以在这个配置文件预加载一些资源文件。

image.png

当然,这些只是最基础的配置文件,后续我还会继续分享其他配置文件并补充在这篇文章中。记得关注点赞收藏吖,后续补充之后我会提醒你们的。今天的分享就到这里吧!

笔者往期好文:

手把手教你利用XSS攻击体验一次黑客

组件通信的8种方式,你搞清楚了吗?

从0到1学习Node.js系列教程(第一篇):API接口初体验

Guess you like

Origin juejin.im/post/7032863902216290317