在前端项目开发中，代码的可读性和规范性非常重要。为了方便代码的自动化格式化，我们可以使用 npm 包 Prettier。然而，Prettier 的默认配置可能并不满足我们的需求，这就需要我们自定义 Prettier 配置。这里介绍一个较为全面、易于使用的 Prettier 自定义配置 npm 包 —— prettier-std。
1. 安装 prettier-std
在命令行中输入以下命令进行全局安装：
npm install -g prettier-std
或者在项目中局部安装：
npm install prettier-std --save-dev
2. 使用 prettier-std
2.1 命令行格式化文件
在命令行中输入以下命令对文件进行格式化：
prettier-std {filename}其中，{filename} 表示待格式化的文件名，可以是单个文件，也可以是多个文件的通配符。
示例：
prettier-std index.js prettier-std src/**/*.js
2.2 npm scripts 中配置格式化命令
在 package.json 中的 scripts 中添加一条格式化命令：
{
"scripts": {
"format": "prettier-std \"src/**/*.{js,jsx}\""
}
}其中，"src/**/*.{js,jsx}" 表示对 src 目录中所有 .js 和 .jsx 文件进行格式化。
运行格式化命令：
npm run format
2.3 编辑器配置 prettier-std
在编辑器中安装 prettier-std 插件后，可以通过以下配置实现快捷键或自动保存时格式化文件：
Visual Studio Code 配置
- 在 VS Code 中安装 prettier-std 插件；
- 在 VS Code 的设置中搜索
Prettier； - 在
Prettier:Eslint Integration一项中选择true； - 在
Editor: Format On Save一项中选择true，即可在保存文件时自动格式化。
Sublime Text 配置
- 安装 Sublime Text 插件
JsPrettier； - 在
Preferences > Package Settings > JsPrettier > Settings中添加以下配置：
{
"auto_format_on_save": true,
"prettier_cli_path": "prettier-std"
}prettier-std要设置为可执行路径。
Atom 配置
- 安装 Atom 插件
prettier-std-atom； - 在 Atom 的设置中搜索
prettier-std； - 在
prettier-std Path一项中填写prettier-std。
3. 配置 prettier-std
prettier-std 的配置文件名为 .prettierrc.js 。在项目的根目录下创建该文件后，可以进行以下配置：
-- -------------------- ---- ------- -------------- - - --------- -- -- --- -- -------- ------ -- -- --- ------ ----- ----- -- ------ ------------ ----- -- ----- --------------- ----- -- --- ------ --------------- ----- -- ------------- -------------- ------ -- ------------------ ------------ ------- -- -------------- -
更多配置项请参考 prettier-std 官方文档。
4. 总结
使用 prettier-std 可以非常方便地实现自定义代码格式化，提高前端项目的代码质量和可读性。同时，通过编辑器的配置，可以使自动化代码格式化更便利、高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ced81e8991b448da89f