VSCode 代码格式化，如何解决 Vetur 与 ESLint 的冲突？

代码格式化可以代码保持整洁，让团队拥有统一的代码风格和规范。VSCode 上有很多代码格式化的插件，如 Beautify, Prettier 等，但我推荐使用 Vetur。

大多数同学可能只注意到 Vetur 是编辑器识别 vue 文件的必备插件，却不知道它可以用来格式化代码。你只有真的用了之后你会发现，真香。

但使用 Vetur 格式化代码时，你可能会发现 Vetur 格式化代码的规则与 ESLint 冲突，具体表现为结尾逗号，结尾分号，函数后无空格。

解决方案是修改 setting.json 配置（文件 => 首选项 => 设置 => 搜索setting.json），贴下个人 setting.json 配置。

{
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "[javascript]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  // 注意：加了下面的设置后，在函数前加空格的的配置才生效
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  // 在函数名称前加一个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // 保存时自动格式化代码
  "editor.formatOnSave": true,
  // 保存时自动修复 eslint 报错
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

效果如下：

注意，修改 setting.json 配置后重启下 VSCode 软件。

如果对你有所帮助，请点个赞吧！