vs code 配置_editor.defaultformatter": "octref.vetur-优快云博客

本文详细介绍了一套针对前端开发的VSCode配置方案，包括字体大小、制表符宽度、主题颜色、代码自动格式化等设置，以及推荐的插件如Vetur、Sass、Prettier、ESLint和Beautify，旨在提升开发效率和代码质量。

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

一. 路径

二 .插件

1. Vetur

2 Sass

3 Prettier

4 ESLint

5 Beautify

三. 配置

{
  "editor.fontSize": 18,
  "editor.tabSize": 2,
  "editor.fontFamily": "Consolas, 'Courier New', monospace",
  "workbench.activityBar.visible": false,
  "git.ignoreMissingGitWarning": true,
  "terminal.integrated.shell.windows": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
  "breadcrumbs.enabled": true,
  // vetur:对html的内容使用js-beautify-html
  // "vetur.validation.template": true,
  // 配置 ESLint 检查的文件类型
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue-html",
    "vue",
    "vue"
  ],
  "editor.formatOnSave": true,
  // 自动修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "es6-css-minify.genCSSmap": true,
  "workbench.sideBar.location": "left",

  "workbench.colorTheme": "Default Light+",
  "html.format.enable": false,
  "workbench.colorCustomizations": {
    "[Atom One Light]": {
      "foreground": "#f504e1",
      "editor.background": "#c8e6c9",
      "editor.lineHighlightBackground": "#dcedc8",
      "editor.selectionBackground": "#f0f4c3",
      "editorWidget.background": "#c8e6c9",
      "editorHoverWidget.background": "#c8e6c9",
      "editorHoverWidget.border": "#a5d6a7",
      "editorLineNumber.foreground": "#8cb48d",
      "editorWhitespace.foreground": "#a5d6a7",
      "editorSuggestWidget.background": "#c8e6c9",
      "editorSuggestWidget.border": "#a5d6a7",
      "editorSuggestWidget.foreground": "#338a3e",
      "editorSuggestWidget.highlightForeground": "#338a3e",
      "editorSuggestWidget.selectedBackground": "#a5d6a7",
      "activityBar.background": "#c8e6c9",
      "activityBar.foreground": "#04be14",
      "activityBarBadge.background": "#519657",
      "activityBarBadge.foreground": "#FFFFFF",
      "editorLineNumber.activeForeground": "#002203",
      "input.background": "#c8e6c9",
      "input.border": "#c5e1a5",
      "focusBorder": "#c5e1a5",
      "sideBar.background": "#c8e6c9",
      "sideBarSectionHeader.background": "#c8e6c9",
      "tab.activeBackground": "#c8e6c9",
      "tab.activeForeground": "#000000",
      "tab.inactiveBackground": "#c8e6c9",
      "tab.inactiveForeground": "#555555",
      "tab.border": "#c8e6c9",
      "badge.background": "#519657",
      "statusBar.background": "#c8e6c9",
      "statusBar.foreground": "#519657",
      "statusBarItem.hoverBackground": "#dcedc8",
      "statusBar.noFolderBackground": "#519657",
      "statusBar.debuggingBackground": "#519657",
      "statusBar.debuggingForeground": "#00701a",
      "debugToolBar.background": "#a5d6a7",
      "editorGroupHeader.tabsBackground": "#c8e6c9",
      "button.background": "#519657",
      "button.foreground": "#FFFFFF",
      "button.hoverBackground": "#519657",
      "extensionButton.prominentBackground": "#3BBA54",
      "extensionButton.prominentHoverBackground": "#4CC263",
      "scrollbar.shadow": "#a5d6a7",
      "scrollbarSlider.background": "#a5d6a7",
      "scrollbarSlider.hoverBackground": "#81c784",
      "scrollbarSlider.activeBackground": "#81c784",
      "list.activeSelectionBackground": "#dcedc8",
      "list.activeSelectionForeground": "#519657",
      "list.inactiveSelectionBackground": "#dcedc8",
      "list.inactiveSelectionForeground": "#519657",
      "list.hoverBackground": "#dcedc8",
      "list.highlightForeground": "#dcedc8",
      "dropdown.background": "#c8e6c9",
      "dropdown.border": "#c5e1a5",
      "titleBar.activeBackground": "#c8e6c9",
      "titleBar.activeForeground": "#519657",
      "titleBar.inactiveBackground": "#c8e6c9",
      "titleBar.inactiveForeground": "#519657"
    }
  },
  "editor.tokenColorCustomizations": {
    "[Atom One Light]": {
      "textMateRules": [
        {
          "name": "Comment",
          "scope": ["comment"],
          "settings": {
            "foreground": "#97b498",
            "fontStyle": ""
          }
        },
        {
          "name": "String",
          "scope": ["string"],
          "settings": {
            "foreground": "#338a3e"
          }
        },
        {
          "name": "Variable",
          "scope": ["variable"],
          "settings": {
            "foreground": "#c51162"
          }
        },
        {
          "name": "[VSCODE-CUSTOM] PHP Punctuation Variable Definition",
          "scope": "punctuation.definition.variable.php",
          "settings": {
            "foreground": "#c51162"
          }
        }
      ]
    }
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur" // 使用 vetur 格式化规则
  },
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "semi": false, // 去掉分号
      "singleQuote": true // true 为使用单引号
    }
  },
  "vetur.format.defaultFormatter.js": "vscode-typescript", // js 使用 typescript
  "vetur.format.defaultFormatter.html": "js-beautify-html", // html 使用 beautify
  // "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 函数名字和括号前加空格
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[scss]": {
    "editor.defaultFormatter": "michelemelluso.code-beautifier"
  },
  "jsdoc.author": "haozhengqiang",
  "eslint.migration.2_x": "off",
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "vetur.completion.scaffoldSnippetSources": {},
  "vetur.grammar.customBlocks": {},
  "files.associations": {}
}