Prettier代码格式化工具测评:支持JS/TS/Vue多语言,兼容ESLint实现团队代码格式统一

之前跟你们聊过能快速提取文档信息的 ChatDOC,今天换个偏开发效率的方向 ------ 给你们安利一个 Github 上的「Prettier」,仓库地址是https://github.com/prettier/prettier,它是个代码格式化工具,不管你写的代码缩进乱、括号不对齐,还是换行不统一,它都能一键整理成规范格式,不用再手动调缩进、对齐括号,小索奇上次跟同事协作写 React 组件,他写的代码缩进全是 2 个空格,我习惯用 4 个空格,用 Prettier 一键格式化后,格式立马统一,再也不用因为 "缩进用 2 个还是 4 个空格" 争论了!

你有没有过看别人写的代码看到头大的经历?比如打开一个 JS 文件,有的函数括号跟函数名在同一行,有的括号单独换行;有的语句结尾加了分号,有的没加;缩进一会儿 2 个空格,一会儿 4 个空格,看得眼睛都花了,想改代码都得先花时间整理格式。但用 Prettier 就不一样,不管原代码格式多乱,只要运行 Prettier,它会按照预设规则(比如缩进 4 个空格、语句结尾加分号、括号单独换行)自动调整,比如原代码是这样的:

function add (a,b){return a+b}

const result=add (1,2)

console.log (result)

格式化后会变成:

function add (a, b) {

return a + b;

}

const result = add (1, 2);

console.log (result);

变量之间加空格、括号单独换行、语句结尾加分号,整整齐齐,不管是谁写的代码,格式化后风格都统一,看代码的效率都变高了。小索奇现在写代码前,都会先开 Prettier 自动格式化,再也不用花时间纠结格式细节。

而且它支持的语言特别多,除了 JavaScript、TypeScript,还有 CSS、HTML、Vue、React 的 JSX 文件,甚至连 Markdown 文档都能格式化。比如写 Vue 组件时,模板里的标签缩进乱了,运行 Prettier 后,标签会自动对齐;写 Markdown 时,列表缩进不对,格式化后会统一列表层级,不用再手动调。小索奇上次写 Markdown 文档,用它一键整理了所有列表和标题格式,比手动调整快了 5 分钟。

说到这儿可能有人会问:"怎么把它装到项目里啊?会不会配置很复杂?" 其实超简单,前端项目只要用 npm 装个 prettier 包,再在项目根目录建个.prettierrc 配置文件,写几行规则就行,比如:

{

"semi": true, // 语句结尾加分号

"singleQuote": true, // 用单引号代替双引号

"tabWidth": 4, // 缩进 4 个空格

"trailingComma": "es5" // 对象最后一个属性后加逗号

}

甚至不用自己写配置,直接用默认规则也行,装完后在 VS Code 里装个 Prettier 插件,开启 "保存时自动格式化",每次保存文件,代码就会自动整理好,根本不用手动运行。小索奇第一次装 Prettier,跟着网上的教程,10 分钟就搞定了配置,特别简单。

它还有个超实用的功能 ------ 能和 ESLint 配合使用。很多人会把 ESLint 和 Prettier 搞混,其实 ESLint 主要检查代码语法错误(比如变量未定义),Prettier 只负责格式化,两者一起用,既能保证代码语法正确,又能保证格式统一。小索奇团队的项目就是这样配置的,提交代码前会自动用 ESLint 查错,用 Prettier 格式化,代码质量和格式都有保障。

另外,它还支持忽略文件,比如项目里的 node_modules 文件夹,或者一些自动生成的代码文件,不想让 Prettier 格式化,只要在.prettierignore 文件里写上这些文件路径就行,特别灵活。小索奇上次在项目里加了.prettierignore,忽略了 dist 文件夹和自动生成的 API 文件,避免了不必要的格式化。

你们平时写代码的时候,有没有遇到过 "代码格式不统一""看别人的代码格式乱" 的情况?或者有没有用过其他代码格式化工具?可以在评论区跟小索奇聊聊,其实统一的代码格式不仅能让代码更好看,还能减少团队协作时的摩擦,对吧?

搜索关注【即兴小索奇】,获取更多好用工具和资源

相关推荐
即兴小索奇16 小时前
Obsidian本地笔记工具:构建知识网络关联笔记,支持Markdown与插件生态及知识图谱生成
商业·ai商业洞察·即兴小索奇
武子康16 小时前
AI-调查研究-67-具身智能 核心技术构成全解析:感知、决策、学习与交互的闭环系统
人工智能·科技·学习·程序人生·ai·职场和发展·职场发展
即兴小索奇16 小时前
FFmpeg命令行音视频工具:高效实现格式转换与批量处理,支持音频提取与精准视频剪辑
ai·商业·ai商业洞察·即兴小索奇
武子康1 天前
AI-调查研究-65-机器人 机械臂控制技术的前世今生:从PLC到MPC
人工智能·ai·职场和发展·机器人·职场发展·个人开发·gp
GeeLark1 天前
自动化Reddit 效率已ready
人工智能·ai·自动化
CoderJia程序员甲1 天前
GitHub 热榜项目 - 日榜(2025-08-30)
ai·开源·大模型·github·ai教程
袋鼠云数栈前端2 天前
实现一个 AI 编辑器 - 行内代码生成篇
大数据·ai·react
即兴小索奇2 天前
AI智能金融风控新实践:从信贷秒批到支付防护,筑牢金融安全新屏障
人工智能·ai·商业·ai商业洞察·即兴小索奇
带刺的坐椅2 天前
让 Java AI 再伟大些!Solon AI & MCP v3.5.1 发布
java·ai·solon·mcp·a2a