你是不是经常对着自己写的JavaScript代码发愁？明明功能都能实现，但代码看起来像被猫挠过的毛线球——缩进忽大忽小，括号东倒西歪，同事review代码时总说”看着头晕”。更可怕的是三个月后自己再看，居然认不出这是自己写的代码…
代码格式化就像整理房间，刚开始嫌麻烦不想动，但收拾完会发现找东西快多了。今天就手把手教你用最省力的方法，把代码收拾得整整齐齐。
手动整理要人命
新手最容易犯的错就是手动敲空格对齐。按着空格键数”1、2、3…哎刚才数到哪了？”这样搞半小时，可能改个变量名又全乱套。更惨的是团队协作时，张三用2个空格缩进，李四用4个空格，王五居然用tab键，整个项目就像打满补丁的旧衣服。
自动化才是王道
这时候就该祭出代码格式化工具了。它们就像智能扫地机器人，你只管写代码，格式问题交给程序处理。Prettier这个工具现在用的人最多，装好之后只需要按个保存键，它就能自动帮你： – 统一缩进为2/4个空格 – 规范字符串用单引号还是双引号 – 调整对象和数组的换行方式 – 自动补全分号（或者帮你删掉多余的分号）
安装方法也简单到离谱。在项目里运行npm install –save-dev prettier，然后在VS Code里装个Prettier插件。现在试试保存你的JS文件，是不是瞬间变工整了？
常见问题排雷指南
刚开始用可能会遇到些小状况。比如你发现保存时没反应，八成是插件没启用。去设置里搜”Format On Save”打个勾就好。还有人抱怨”工具把我精心设计的换行改掉了”，这时候就要明白——格式化工具不是用来展现个性的，它存在的意义就是消灭个性化格式。
关于配置文件的秘密藏在.prettierrc文件里。想自定义规则的话，新建这个文件写上： json { “singleQuote”: true, “trailingComma”: “all” } 这样就能强制使用单引号，并且在多行结构末尾都加逗号。不过建议新手先用默认配置，等被代码折磨过再慢慢调整规则。
进阶玩家必备技巧
当你开始用Git做版本控制，会发现格式化引发的冲突变多了。这时候要在项目根目录放个.prettierignore文件，把不需要格式化的文件（比如压缩过的第三方库）列进去。团队协作时更要确保所有人的编辑器都装好插件，不然张三格式化完李四又改回去，来回拉锯战能让人崩溃。
有人问ESLint和Prettier有什么区别？简单说，ESLint管代码质量，Prettier管代码颜值。这两个配合使用效果最佳，不过要记得在ESLint配置里加上eslint-config-prettier，避免规则打架。
小编碎碎念
刚开始用自动格式化可能会不习惯，就像第一次用洗碗机总担心洗不干净。但坚持用两周后，我保证你再也不想回到手动调整格式的日子。现在每次看到别人没格式化的代码，都恨不得抢过键盘帮他按保存键——这就是代码洁癖的终极形态吧？
本站文章由SEO技术博客撰稿人原创，作者:阿君创作，如若转载请注明原文及出处：https://www.ainiseo.com/hosting/18932.html
