项目格式化插件 prettier

weixin_45044818

已于 2022-04-01 22:03:18 修改

阅读量771

点赞数

分类专栏： vue 通用文章标签： typescript 前端

于 2022-04-01 21:59:15 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45044818/article/details/123908728

版权

vue 同时被 2 个专栏收录

5 篇文章

订阅专栏

通用

2 篇文章

订阅专栏

本文介绍了如何使用Prettier，一个自动格式化插件，来统一项目中的缩进、引号和空格规范。详细步骤包括在VSCode中安装插件，配置.prettierrc文件，启用'format on save'，调整ESLint规则，以及如何通过husky实现强制格式化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说明

在写项目的时候，缩进，引号，空格等大家的规范都不太一致，为了统一这个规范，可以使用一个自动格式化的插件-------prettier。

使用步骤

1.在vscoe中安装prettier插件
在这里插入图片描述
2.在项目的根目录导入prettier的配置文件，文件为.prettierrc

{
  "semi": false, // 是否使用分号，默认为true
  "singleQuote": true, // 是否使用单引号，默认为false
  "trailingComma": "none" // 行尾逗号
}

更多的配置项可以查询一下官网等其他信息来源

3. 在vscode的设置里搜索save，可以看到format on save，勾选上
在这里插入图片描述
4.右键使用Format Document with…，后选择prettier选项

**5. 新增.eslintrc.js里的rules，防止与prettier冲突（如果配置了eslinttrc） **

rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "indent": 0,
    "space-before-function-paren": 0
  },