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

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

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