js格式化怎么操作?这几个方法值得收藏!

吉云

咱来聊聊怎么把一团乱麻似的JavaScript代码给拾掇利索,也就是给它做个“美容”,专业点说叫“格式化”。我这代码写得那叫一个随心所欲,东一句西一句的,后来代码一多,自己都看不下去,那感觉,就像走进一个杂乱无章的房间,找东西都费劲。

于是我就琢磨着,得给代码来个大扫除。我开始在网上找各种各样的办法。看到有人说可以用代码编辑器自带的格式化功能,我就试试,说实话挺方便的,一键下去,代码立马整整齐齐,跟阅兵式似的,但是,有时候这个格式化结果跟我想要的不太一样,有点死板,不够灵活。我就感觉缺点灵魂。

js格式化怎么操作?这几个方法值得收藏!

后来我又发现一些专门用来格式化代码的工具,比如有个叫Prettier的,还有个叫ESLint的,都挺火的。我先试试Prettier,这玩意儿用起来是真简单,基本上不用怎么配置,往那一放,代码就漂漂亮亮的,这不就是傻瓜相机嘛但是这也有点问题,它格式化的风格是固定的,就那一种选择,有时候不太符合我的口味。然后我又去看ESLint,这个家伙可以自己调各种设置,能定制出自己喜欢的代码风格,感觉是高级的单反相机,自由度很高。不过学习这东西还真得花点时间,好在网上资料多,慢慢看总能搞懂的,就是要费点功夫。

然后还发现一个很简单的办法。在Chrome浏览器里,按F12打开开发工具,找到“Sources”这一栏,找到要格式化的JS文件,然后点一下那个像花括号一样的按钮,代码就自动排版好,简直不要太方便,临时搞一下特别好使!

除这些自动化的工具,我还尝试手动格式化,就是一行一行代码自己敲,按照一定的规则去排版。这种方式虽然累点,但是可以完全按照自己的想法来,控制力最强,也最锻炼自己的代码审美和组织能力。而且对代码的理解还加深,这不就是逼自己精益求精嘛

我还发现一个比较特别的,就是用Notepad++这个软件。这个软件我平时用来编辑各种文本文件,没想到它格式化JS代码也是一把好手。通过插件,可以实现各种格式化需求,甚至可以直接把代码里不必要的空格、换行都给清理掉,看起来特别清爽。但是,这个软件界面有点老,对于习惯新界面的人来说,可能得适应一下。

我这一路试下来,发现每种方法都有自己的优缺点,关键是要找到适合自己的。我现在是这样,对于一些小改动,就直接在Chrome浏览器里点一下花括号,或者在代码编辑器里来个一键格式化,省时省力;对于一些大型项目或者需要统一代码风格的时候,就用Prettier或者ESLint,自动化处理,保证团队协作的效率和代码的一致性;而对于一些特别讲究或者想要深入理解的代码,我就自己动手,慢慢雕琢。这样一来,我的代码不仅看起来舒服,也更容易维护和调试,写代码的心情都变好!

  • 使用感受:
    • 刚开始用Prettier感觉不错,简单上手快,但是,有些地方格式化后不喜欢,还不能改。
    • 后来用上ESLint,得自己动手改一些设置,学习这个要花时间,不过自定义改完后很喜欢。
    • Chrome浏览器里格式化,很方便,临时用很
    • 发现Notepad++也能格式化代码,虽然这个软件老点,但是实用,清理空格啥的很方便。

总结

这一通折腾下来,现在写代码有条理多,也更愿意花时间去优化代码结构。毕竟好的代码不仅要能跑起来,还得让人看着舒服,这样才算是真正的“内外兼修”嘛

免责声明:由于无法甄别是否为投稿用户创作以及文章的准确性,本站尊重并保护知识产权,根据《信息网络传播权保护条例》,如我们转载的作品侵犯了您的权利,请您通知我们,请将本侵权页面网址发送邮件到qingge@88.com,深感抱歉,我们会做删除处理。

目录[+]