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 文件,避免了不必要的格式化。

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

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

相关推荐
带刺的坐椅18 小时前
Solon v3.4.6, v3.5.4, v3.6.0-M1 发布。正式开始 LTS 计划
java·spring·ai·web·solon·mcp
守城小轩18 小时前
从零开始学习n8n-一文读懂n8n
ai·n8n
Learn Beyond Limits18 小时前
Choosing the Number of Clusters|选择聚类的个数
人工智能·深度学习·神经网络·机器学习·ai·聚类·吴恩达
科技峰行者21 小时前
阿里云无影发布首个Agentic Computer形态的个人计算产品
人工智能·阿里云·ai·agent
Elastic 中国社区官方博客21 小时前
使用 Elasticsearch 构建 AI Agentic 工作流
大数据·数据库·人工智能·elasticsearch·搜索引擎·ai·全文检索
Nukepayload21 天前
基于洞察的智能编程法——从直觉到代码的原型炼成术
ai·提示词工程
万俟淋曦1 天前
【ROS2】通讯机制 Topic 常用命令行
人工智能·ai·机器人·ros·topic·ros2·具身智能
CoderJia程序员甲1 天前
GitHub 热榜项目 - 日榜(2025-09-24)
ai·开源·大模型·github·ai教程
AiTop1002 天前
阿里云推出全球首个全模态AI模型Qwen3-Omni,实现文本、图像、音视频端到端处理
人工智能·阿里云·ai·aigc·音视频
CoderJia程序员甲2 天前
GitHub 热榜项目 - 日榜(2025-09-18)
ai·开源·大模型·github·ai教程