如何配置VSCode与Prettier实现文件创建时自动格式化？

方法1：开启VS Code自动格式化与自动保存 #

打开VS Code设置界面（快捷键Ctrl+,），搜索并开启以下选项：

• Editor: Format On Save：勾选后文件保存时自动执行格式化
• Files: Auto Save：选择onFocusChange或afterDelay，让新创建的文件自动触发保存，进而触发格式化

也可以直接修改settings.json（按Ctrl+Shift+P输入"Open Settings (JSON)"打开），添加或调整配置：

"editor.formatOnSave": true,
"files.autoSave": "onFocusChange",
"editor.defaultFormatter": "esbenp.prettier-vscode" // 指定默认格式化工具为Prettier

方法2：配置Angular CLI生成组件时自动修复格式 #

在项目根目录的angular.json中，找到对应项目的schematics配置块，给组件生成规则添加lintFix: true参数，CLI生成组件后会自动运行lint修复（需集成Prettier规则）：

"projects": {
  "your-project-name": {
    // 其他项目配置
    "schematics": {
      "@schematics/angular:component": {
        "lintFix": true,
        // 你的组件其他配置（如style类型、模板路径等）
      }
    }
  }
}

方法3：用Prettier监听文件自动格式化 #

如果项目使用Prettier，在package.json中添加监听脚本，实时检测新文件并格式化：

"scripts": {
  "format:watch": "prettier --write --watch \"src/**/*.{ts,html,css,scss}\""
}

启动脚本：npm run format:watch，之后新建的组件文件会被Prettier自动识别并格式化。

内容的提问来源于stack exchange，提问作者fayabobo