JavaScript 如何配置 Prettier

平时写代码时，是不是总遇到这种情况：自己写的代码换行、缩进忽宽忽窄，和同事合作时，对方点开文件就像看“乱码拼图”？其实只要用对一个工具，就能把代码变得整整齐齐，这个工具就是 Prettier。它就像代码界的“自动排版机”，能帮你统一格式，不用再花时间手动调整。今天就聊聊，怎么给 JavaScript 项目配置 Prettier，新手也能跟着一步一步来。

第一步：给项目装上 Prettier 工具

要用上 Prettier，得先把它安装到你的项目里，就像用奶茶得先买杯子一样。现在大部分前端项目都会用 npm 来管理工具，打开电脑的命令行，进入你的项目文件夹，输入一句简单的命令就行：

npm install --save-dev prettier

这里的 --save-dev 是告诉电脑，这个工具只在开发时用，上线的代码里不需要它，不会影响最终的网站性能。如果是个人小项目，也可以用 yarn add prettier --dev，原理是一样的。安装完后，项目文件夹里会多一个 node_modules 文件夹，里面就存着 Prettier 的代码，不用特意去管它。

第二步：写个简单的配置文件

Prettier 默认的格式其实已经挺好用了，但每个人对代码的要求不一样：有人喜欢用 2 个空格缩进，有人习惯 4 个；有人希望代码太长自动换行，有人想让一行多写点内容。这时候就需要一个“小纸条”告诉 Prettier 你的要求，这个“小纸条”就是配置文件。

在项目的根目录（就是和 node_modules 同一个文件夹的地方），新建一个叫 .prettierrc 的文件，注意开头的点不能丢，这是隐藏文件的标记。打开这个文件，你可以用最易懂的 JSON 格式写要求，比如：

`json

{

"tabWidth": 2,

"semi": true,

"singleQuote": true,

"printWidth": 100

}

`

解释一下这几个常用的选项：tabWidth 是缩进的空格数，这里设成 2，按 Tab 键时就会空 2 格；semi 是要不要在代码结尾加分号，选 true 就自动加；singleQuote 是用单引号还是双引号，前端里单引号更常用，设成 true 就行；printWidth 是一行最多多少个字符，超过就自动换行，设成 100 刚好符合大多数屏幕的显示。如果嫌一个个写麻烦，也可以直接复制网上的“标准配置”，适合新手快速上手。

第三步：给编辑器加个“自动排版”的习惯

光有配置文件还不够，总不能写完代码再手动跑一遍 Prettier 吧？最好的办法是让你常用的代码编辑器（比如 VS Code）自动帮你排版。打开 VS Code，在扩展商店里搜“Prettier”，找到官方的那个插件安装，它会和你刚才装的 Prettier 工具联动。

安装完后，还要设置一下自动触发：打开 VS Code 的设置（按 Ctrl+, 或者 Cmd+,），搜“Format On Save”，把这个选项勾上。以后每次你按 Ctrl+S 保存代码时，VS Code 就会自动用 Prettier 按照你写的配置来排版，就像你写完作业，妈妈帮你把本子上的乱线理整齐一样，完全不用你额外操作。

第四步：检查有没有漏网的代码

项目里可能有些文件不想让 Prettier 改，比如第三方下载的工具代码，或者一些临时的测试文件。这时候可以再新建一个 .prettierignore 文件，告诉 Prettier 哪些文件不用管。比如写：

`

node_modules/

dist/

test.js

`

node_modules 是刚才安装工具的文件夹，里面的代码不用碰；dist 是打包后要上线的文件夹；test.js 是临时的测试文件，这些都能放进忽略列表。

现在试试写一段 JavaScript 代码，比如：const name="小明";function sayHi(){console.log("你好");}，保存后再看，它会自动变成：

`javascript

const name = "小明";

function sayHi() {

console.log("你好");

}

`

整整齐齐的，再也不用纠结格式了。Prettier 还支持 React、Vue 这些常用的前端框架，配置方法和 JavaScript 几乎一样，学会这个，不管是自己写代码还是和团队合作，都能省好多时间。