vsCode保存代码时自动格式化

本文介绍如何在VSCode中配置Vue项目的设置,包括颜色主题、默认格式化工具选择、快速建议开启、自动格式化等功能,同时展示了如何通过settings.json文件进行个性化定制。

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

在编辑器中找到 文件 > 首选项 > 设置 打开settings.json,配置如下代码:
{
  //     "terminal.integrated.shell.windows": "D:\\git\\Git\\bin\\bash.exe",
      "workbench.colorTheme": "Atom One Dark",
      "[vue]": {
          "editor.defaultFormatter": "octref.vetur"
      },
      "editor.quickSuggestions": {
          "strings": true
      },
      "window.zoomLevel": 0,
      "files.associations": {},
      "vetur.format.defaultFormatter.html": "js-beautify-html", // 更改vue的html格式,根据需求设置
      // 更改vue的js格式
      // "vetur.format.defaultFormatter.js": "vscode-typescript",
      // 保存时自动格式化
      "editor.formatOnSave": true,
      "vetur.format.defaultFormatterOptions": {
          "js-beautify-html": {
              "wrap_attributes": "auto",
          }
      },
      // 保存时自动格式化
      "editor.formatOnSave": true,
      "settingsSync.ignoredSettings": [],
      "cssrem.rootFontSize": 80,
      "editor.codeActionsOnSave": null,
  }

### 设置 VSCode 保存时自动格式化的具体方法 要在 Visual Studio Code (VSCode) 中实现保存代码自动格式化功能,可以通过调整 `settings.json` 文件以及安装必要的扩展来完成。以下是详细的设置说明: #### 安装必要扩展 为了支持 ESLint 自动格式化功能,需先安装官方推荐的 **ESLint 扩展** 和其他可能需要的语言工具(如 Prettier 或特定语言的支持插件)。这些扩展可以在 VSCode 的市场中找到并安装。 #### 配置 settings.json 文件 通过编辑用户的全局设置或工作区专属的 `settings.json` 文件,可以启用保存时触发的自动格式化行为。按照以下步骤操作: 1. 使用快捷键组合 `Ctrl+,` (Windows/Linux)或者 `Cmd+,` (Mac),进入 VSCode 的设置界面。 2. 点击左上角的齿轮图标,选择 **Settings JSON** 来手动编辑配置文件。 3. 将如下内容复制到 `settings.json` 文件中,并根据实际需求进行调整[^1]: ```json { "eslint.workingDirectories": ["./back", "./front"], // 指定项目的工作目录路径 "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" // 启用保存时运行 eslint fix 命令 }, "eslint.format.enable": true, // 开启 ESlint 格式化功能 "eslint.validate": [ "javascript", "vue", "html" ], // 列举需要验证的文件类型 "editor.defaultFormatter": "dbaeumer.vscode-eslint", // 设定默认格式化程序为 ESLint 插件 "[javascript]": { "editor.formatOnSave": true // 对 JavaScript 文件启用保存格式化 } } ``` 如果遇到某些情况下 ESLint 失效的情况,则应检查指定的文件夹名称是否匹配当前项目的结构。例如,将 `"./back"` 改为 `"./backend"` 及 `"./front"` 修改成 `"./frontend"`,以适应不同的命名习惯[^1]。 另外,在 `.eslintrc.js` 文件中的 rules 属性部分也可以进一步细化规则设定。比如针对 Vue 组件 HTML 缩进问题可加入下面这段定义[^2]: ```js 'vue/html-indent': ['error', 2, { attribute: 1, baseIndent: 1, closeBracket: 0, alignAttributesVertically: true, ignores: [] }] ``` 同对于函数括号前缺少空格的问题,应该增加对应的校验条目: ```js 'space-before-function-paren': ['error', 'always'] ``` 以上就是关于如何在 VSCode 上配置保存时自动执行代码格式化的全部过程描述。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值