之前在公司一直用的是ideal做前端开发,而其他人用的是VScode,他们有用ESlint,而我每次只好在ideal中设置‘unable’即不让进行格式化校验……有关代码格式,被无数次吐槽,也尝试过在ideal中配置ESlint进行代码的格式化校验,无奈,每次都是斗志满满的开始,垂头丧气的放弃,也曾想过换开发工具,和大家保持一样用VScode,怎想,ideal中毒太深,完全无法适应VScode。
现在,换公司了,大家用的是VScode,而且在面试时,还信誓旦旦的和面试官说了解ESlint,好吧!自己挖的坑自己跳,作为新人,还是要有一定的融入的,嗯!挑战VScode,从新工作开始!
字体、页面背景,经过一番百度,换成了自己想要的样子,关键的时刻来了,怎么格式化代码?
肯定要安装ESlint,依旧百度,通过npm命令安装了ESlint,然而,安装好了,怎么用呀?这是个值得思考的问题!百度,都死一大堆配置文件,无语了,我只是想知道怎么用而已,至于配置,那是学习的下一步,现在不着急!记忆中,同事每次保存代码,好像都会自动格式化,不过,应该也有快捷键的吧。找了一番,真没有!没办法,向之前的同事求助,说是右键中选择,可能是太着急了吧,我右键后竟然没看到“Format document”这么简单明了的操作选项,晕死!好了,第一个目标实现了,手动格式化代码完成,那么如何实现在保存时自动格式化呢?依旧是万能的度娘,在设置文件中设置‘"eslint.autoFixOnSave": true,’,可是配置文件在哪里?百度出来的都是中文的操作,我安装的是英文版本,猜测着,然而在setting的扩展程序(EXtensios)中并没有找到ESlint,好吧好吧……一番纠结和思考之后,我又通过VScode安装了ESlint,然后终于在EXtensios下活捉ESlint配置文件,成功的设置了保存时自动格式化代码,本以为大功告成,结果保存时,一大堆格式错误出现了,鼠标悬浮,选择 quite fix ,并不管用,再说,就算管用了,这一大片红的的X,难道要让我一个一个消除,这不科学呀!设计者应该不会设计出这么不符合人类思维的操作的,肯定有某种方法一次性解决的。百度,有点焦躁,其实根本看不进去,算了算了,问问老同事吧,同事说不是在ESLint默认的配置文件中进行操作的,项目下有单独的配置文件……晕死!
再一次百度,复制了网友的配置文件,完了完了,红X更多了,保存文件时,有的文件可以自动格式化,有的还是不行,而且这些文件之间并没有什么差异,都是‘.JS’文件……纠结了好久,内心一百万个挣扎,不停的骂自己没用,绝望到觉得自己要不要考虑转行,可能真的不适合做编程,或者自己根本不适合做前端开发,早知道就一直做后端了……反正就是一会儿的时间,我反思了好久人生!“XX,你们项目用ESlint吗?我这个怎么不管用呢?”,强忍着内心的暴躁,最终还是说服了自己,应该和新同事多交流交流,问了对面的同事,她说用呀,然后帮我看了一下,你有没有安装其他插件,没有呀?还要有其他插件,对呀,ESlint只是提供语法检查,并不能格式化……我去,一语惊醒梦中人,我怎么这么笨!于是安装她的推荐安装了常用的一些插件,but,还是不行,泪奔!她看了一下,说我之前也遇到过呀,怎么解决的,忘记了!于是帮我百度,然后完美解决了!
吐槽完毕,下面总结一下VScode中代码格式化操作(主要以ESlint为主展开):
ESlint是用来做什么的?
语法规则和代码风格检查工具,并不能格式化代码,即只是能检查出带哪里格式有问题,但是不能自动解决(格式化)
怎么实现代码自动格式化?
安装其他格式化的插件,比如Beautify、prettier code formatter、pretify JSON
怎么安装ESLint(VScode安装其他插件也一样)?
单击Extensions(打开项目后左边一列的最后一行)——出现一个搜索框——输入ESLint——出现一系列相关插件——点击‘install’ ;
---如何找到对运的配置文件?
file——preference——settings——Extensions——ESLint——edit in setting.json
---如何设置保存时自动格式化?
在setting.json中加入"eslint.autoFixOnSave": true,
---如何手动格式化代码?
右键——format document
强调一点:
格式化前端代码时,不能只安装ESlint(仅仅是校验是否合格的工具),还需要安装其他格式化的工具,前端React框架开发常用的插件工具如下:
ESLint (校验工具) 、Beautify、Prettier - Code formatter 、Prettify JSON、TSLint
总结一点:
作为一家公司的新员工,遇到问题应该积极主动的和老员工沟通而不是一味的以自己学习为借口拒绝和同事交流。新的公司,过去的一切都清零了,加油!
--------------------------------------------------------------------------------------------------------------------------------------------------------------
在设置保存后自动格式化时,遇到的bug及解决方式?
遇到问题:编辑代码后保存,格式化不生效;
产生问题的原因:
LF:Linux和Unix使用("\n"),CRLF:Windows 操作系统中使用的换行符(换行符)通常是回车符(CR),后面是换行符(LF)
解决方式:设置linebreak-style值如下
"linebreak-style": [0, "error", "windows"],
使用原理:
linebreak-style的属性值中off或0: 表示不验证规则