vscode编辑器vue项目格式化代码

最新推荐文章于 2025-07-15 16:49:27 发布

原创最新推荐文章于 2025-07-15 16:49:27 发布 · 5.9k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#Eslint #格式化 #formatting

vue 同时被 2 个专栏收录

3 篇文章

订阅专栏

Eslint

1 篇文章

订阅专栏

本文介绍如何在Vue项目中使用VSCode配置ESLint和Prettier，实现代码的自动格式化，包括设置保存时自动格式化、ESLint自动修复等功能，提升团队代码规范性和一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用Vue开发项目的时候，开启ESlint校验后有各种头疼的报错，即便与同事约定好了一些代码编写规范，偶尔也会有一些遗漏的时候，不过可以通过一些扩展插件来自动格式化代码，来避免一些低级bug的产生。

总体分三步：

第一步：
依次下载以下三个扩展插件，当然如果开发vue项目其他两个也是很有必要的。

第二步：
打开编辑器中用户设置的settings.json文件，在后面添加如下关于格式化格则的代码

  // #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": false,
  "explorer.confirmDragAndDrop": false,
  "javascript.preferences.quoteStyle": "single",
  "typescript.preferences.quoteStyle": "single",
  // tab 大小为2个空格
  "editor.tabSize": 2,
  // 100 列后换行
  "editor.wordWrapColumn": 100,
  // 保存时格式化
  "editor.formatOnSave": true,
  // 开启 vscode 文件路径导航
  "breadcrumbs.enabled": true,
  // prettier 设置语句末尾不加分号
  "prettier.semi": false,
  // prettier 设置强制单引号
  "prettier.singleQuote": true,
  // 注释后面加空格
  "prettier.eslintIntegration": true,
  // 选择 vue 文件中 template 的格式化工具
  "vetur.format.defaultFormatter.html": "prettyhtml",
  // 显示 markdown 中英文切换时产生的特殊字符
  "editor.renderControlCharacters": true,
  // 设置 eslint 保存时自动修复
  "eslint.autoFixOnSave": true,
  // eslint 检测文件类型
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  // vetur 的自定义设置
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "singleQuote": true,
      "semi": false
    }
  }

第三步：
如果不出意外，以上两步是可以完成保存时自动格式化代码的功能，不过有些同学可能不太习惯函数圆括号之前没有空格，那就把第二步中的"javascript.format.insertSpaceBeforeFunctionParenthesis": false,删除掉就好了。喜欢的同学只需要关闭Eslint关于函数括号的错误提示就好了。比如在.eslintrc.js中添加如下代码：
```
// allow async-await
'generator-star-spacing': 'off',
// 函数圆括号之前没有一个空格
"space-before-function-paren": ["error", "never"]
```
over