VSCode保存时反引号自动转为双引号，如何阻止？

我之前也碰到过完全一样的问题！这其实是Prettier的默认行为在搞鬼——它会自动把没有插值的模板字符串（就是用反引号括起来但里面没有${xxx}变量的字符串）转换成普通的双引号字符串（因为Prettier默认singleQuote配置为false）。下面是几种靠谱的解决方法，你可以根据需求选择：

方法1：通过ESLint强制使用模板字符串（推荐统一代码风格的场景） #

如果你的项目已经配置了ESLint，可以在ESLint配置文件（比如.eslintrc.js）中添加quotes规则，强制代码使用反引号：

module.exports = {
  // 其他已有的配置...
  rules: {
    "quotes": ["error", "backtick"]
  }
};

记得要确保你已经安装了eslint-plugin-prettier和eslint-config-prettier这两个依赖，让ESLint和Prettier协同工作，这样Prettier就会遵循ESLint的引号规则，不再自动转换反引号。

方法2：修改Prettier配置，改用单引号（如果接受单引号替代反引号） #

如果你只是不想看到双引号，接受用单引号代替反引号，可以在项目根目录创建Prettier配置文件（比如.prettierrc），添加以下配置：

{
  "singleQuote": true
}

这样Prettier会把无插值的模板字符串转换成单引号字符串，而不是双引号。

方法3：局部禁用Prettier格式化（适合个别代码行） #

如果只是某几行代码需要保留反引号，可以在目标代码行的上方添加// prettier-ignore注释，让Prettier忽略这部分代码的格式化：

// prettier-ignore
module.exports = { 
  siteMetadata: { 
    title: `Gatsby Default Starter`, 
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`, 
    author: `@gatsbyjs`, 
  },
}

方法4：调整VSCode格式化优先级（解决ESLint和Prettier冲突） #

有时候VSCode会优先用Prettier格式化，忽略ESLint的规则。你可以打开VSCode的settings.json，添加以下配置：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "prettier.requireConfig": true
}

这样保存代码时，会先让ESLint修复代码规则问题，再用Prettier格式化，确保两者的规则统一。

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