VS Code 代码格式化_vscode中格式化代碼-优快云博客

本文详细介绍如何在VSCode中配置代码格式化功能，通过安装并设置ESLint、Prettier-Codeformatter和Vetur插件，实现代码的自动美化，包括调整tab大小、代码换行、自动修复语法错误等，提升代码阅读体验。

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

这几天在接触学习 sass 的时候，可以将 sass 文件编译成 css 文件，但是当代码过多的时候，看起来并不美观，甚至还有一点乱糟糟的感觉。
对于我这个天秤座的人来说只能接受优雅美观的东西，所以为了让代码看起来更加优美，我们需要配置 vscode 使其具有代码格式化功能。

一：.需要安装三个插件

1.ESLint
在这里插入图片描述
2.Prettier - Code formatter

3.Vetur
在这里插入图片描述

二：在 setting 下设置

打开 setting 的方式

对于Windows file --> preferences -->setting
对于MAC Code --> preferences -->setting

我这里以 Windows 为例
在这里插入图片描述

三：打开 setting.json 文件

在 setting 界面中右上角有一个打开图标，点击即可打开 setting.json 文件
在这里插入图片描述

在 setting.json 文件中添加配置
在这里插入图片描述
配置代码如下：

{
  // tab 大小为2个空格 
  "editor.tabSize": 2,
  // 100 列后换行
  "editor.wordWrapColumn": 100,
  // 保存时格式化
  "editor.formatOnSave": true,
  // 开启 vscode 文件路径导航  
  "breadcrumbs.enabled": true,
  // prettier 设置语句末尾不加分号  
  "prettier.semi": false,
  // prettier 设置强制单引号  
  "prettier.singleQuote": 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
    }
  }
}