如何配置Prettier优化VSCode中Twig文件内嵌JavaScript的格式化效果

配置步骤 #

• 第一步：安装依赖
  优先使用项目级配置，在项目根目录执行命令安装对应插件：
  npm install --save-dev prettier prettier-plugin-twig-melody
  VSCode侧需同时安装 Prettier - Code formatter 和 Twig Language 2 两个扩展，保障Twig语法基础识别能力。
• 第二步：更新VSCode全局配置
  打开VSCode的settings.json文件，在原有配置基础上新增Prettier关联规则，完整参考配置如下：

  // 原有基础配置
  "files.associations": {
    "*.twig": "twig"
  },
  "emmet.includeLanguages": {
    "twig": "html"
  },
  // 新增Prettier适配配置
  "prettier.documentSelectors": ["**/*.twig"],
  "[twig]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
  

• 第三步：（可选）添加项目级Prettier配置
  多人协作场景下建议在项目根目录新建.prettierrc文件，统一格式化规则：

  {
    "plugins": ["prettier-plugin-twig-melody"],
    "overrides": [
      {
        "files": "*.twig",
        "options": {
          "parser": "twig",
          "htmlWhitespaceSensitivity": "css",
          "singleQuote": true
        }
      }
    ]
  }
  

配置完成后重启VSCode生效，后续格式化Twig文件时，Prettier会自动识别<script>标签内的JavaScript代码，按照JS规则完成格式化，不会出现语法混乱问题。

内容的提问来源于stack exchange，提问作者Sławomir Moskal