如何解决Prettier v8.1.0给JS文件return追加的分号显示在页面的问题

问题根因 #

你遇到的现象本质是未配置的Prettier默认将.js后缀文件识别为普通JavaScript文件，无法正确识别文件内的JSX语法，插入的分号被项目编译链错误带入渲染结果，才会直接显示在网页上。

修复方案（无需全局禁用自动插入分号功能） #

你可以根据自己的项目情况选择以下任意一种方案：

• 方案1：修改文件后缀
  把所有包含JSX语法的组件文件后缀从.js改为.jsx，Prettier默认会对.jsx文件启用JSX专属解析规则，自动识别return后的JSX代码块，插入的分号会被编译链正常识别为语句结束符，不会泄漏到页面。
• 方案2：新增局部Prettier配置
  在项目根目录新建.prettierrc文件，添加以下配置即可，保留全局自动插入分号的规则：

  {
    "parser": "babel-jsx",
    "semi": true
  }
  

  配置完成后重启VS Code的Prettier插件，重新格式化文件即可生效。
• 方案3：单文件临时适配
  如果不想修改全局配置或文件后缀，只需要在对应出问题的.js文件顶部添加如下注释，即可告诉Prettier当前文件包含JSX语法：

  /** @jsx React.createElement */
  

内容的提问来源于stack exchange，提问作者Dakota Mac Dylan Carter MacBai