前端开发vscode的常用插件

最新推荐文章于 2025-10-13 17:02:30 发布

原创最新推荐文章于 2025-10-13 17:02:30 发布 · 630 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

本文介绍了一套针对Vue项目的VsCode配置方案，包括了多个提升开发效率的插件及详细的配置参数，帮助开发者优化VsCode的工作环境。

VsCode开发Vue的常用插件（配置文件）

Atom One Dark Theme
Auto Close Tag
Auto Complete Tag
Auto Rename Tag
Bracket Pair Colorizer 2
CSS Navigation
EditorConfig for VS Code
ESLint
GitLens — Git supercharged
Highlight Matching Tag
Import Cost
indent-rainbow
JSON to TS
Kite AutoComplete AI Code
Material Icon Theme
npm Intellisense
px to rem & rpx (cssrem)
SCSS Everywhere
Settings Sync
stylelint
Trailing Spaces
Version Lens
Vetur
Visual Studio IntelliCode
Vue i18n
vue-helper

{
  // vscode性能优化
  "telemetry.enableTelemetry": false,
  "files.exclude": {
    "**/.git": true,
    "**/.DS_Store": true,
    "**/.vscode": true,
    "**/__pycache__": true,
    "**/.pytest_cache": true,
    "**/node_modules": true,
    "venv": true,
    "*.sublime-*": true,
    "env*": true
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/env": true,
    "**/venv": true
  },
  "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/.git/subtree-cache/**": true,
    "**/node_modules/**": true,
    "**/env/**": true,
    "**/venv/**": true,
    "env-*": true
  },
  // 编辑器设置
  "editor.fontSize": 15,
  "editor.fontWeight": 500,
  "editor.fontFamily": "'JetBrains Mono', Consolas, 'Courier New', 'Source Code Pro', monospace",
  "editor.tokenColorCustomizations": {
    "comments": "#968372", // 注释颜色
    "keywords": "#FEDE5D", // 关键字颜色
    "textMateRules": [
      {
        "name": "italic font",
        "scope": [
          "comment",
          "keyword",
          "storage",
          "keyword.control.import",
          "keyword.control.default",
          "keyword.control.from",
          "keyword.operator.new",
          "keyword.control.export",
          "keyword.control.flow",
          "storage.type.class",
          "storage.type.function",
          "storage.type",
          "storage.type.class",
          "variable.language",
          "variable.language.super",
          "variable.language.this",
          "meta.var.expr",
          "constant.language.null",
          "support.type.primitive",
          "entity.name.method.js",
          "entity.other.attribute-name",
          "punctuation.definition.comment",
          "text.html.basic entity.other.attribute-name.html",
          "text.html.basic entity.other.attribute-name",
          "tag.decorator.js entity.name.tag.js",
          "tag.decorator.js punctuation.definition.tag.js",
          "source.js constant.other.object.key.js string.unquoted.label.js",
        ],
        "settings": {
          "fontStyle": "italic",
        }
      },
    ]
  },
  "editor.letterSpacing": 0.5,
  "editor.fontLigatures": true, // 这个控制是否启用字体连字，true启用，false不启用，这里选择启用
  "editor.quickSuggestions": {
    "other": true,
    "comments": false,
    "strings": true
  },
  "window.title": "${dirty} ${rootName}${separator}${activeEditorMedium}",
  "breadcrumbs.enabled": true,
  "editor.minimap.renderCharacters": false,
  "editor.minimap.maxColumn": 200,
  "editor.minimap.showSlider": "always",
  "editor.unfoldOnClickAfterEndOfLine": true,
  "editor.wordWrap": "on",
  "editor.tabSize": 2,
  "terminal.integrated.cursorStyle": "underline",
  "terminal.integrated.fontSize": 15,
  "terminal.integrated.shell.osx": "/bin/zsh",
  // git配置
  "git.autofetch": true,
  "git.rebaseWhenSync": true,
  "git.autofetchPeriod": 60,
  "git.fetchOnPull": true,
  "git.ignoreLegacyWarning": false,
  "git.showPushSuccessNotification": true,
  "git.autoStash": true,
  "git.autoRepositoryDetection": "openEditors",
  "git.ignoreLimitWarning": true,
  "git.inputValidationLength": 100,
  "git.enableSmartCommit": true,
  "git.confirmSync": false,
  "merge-conflict.autoNavigateNextConflict.enabled": true,
  // 图标主题配置
  "material-icon-theme.activeIconPack": "vue_vuex",
  "material-icon-theme.folders.theme": "specific",
  "material-icon-theme.hidesExplorerArrows": false,
  "material-icon-theme.folders.color": "#26a69a",
  // 主题配置
  "workbench.iconTheme": "material-icon-theme",
  "workbench.colorTheme": "Atom One Dark",
  "workbench.colorCustomizations": {
    "terminal.background": "#333842",
  },
  // emmet语法
  "emmet.showExpandedAbbreviation": "always",
  "emmet.triggerExpansionOnTab": true,
  "emmet.optimizeStylesheetParsing": false,
  "emmet.showSuggestionsAsSnippets": true,
  "emmet.includeLanguages": {
    "vue-html": "html",
    "vue": "html",
    "nvue": "html"
  },
  // css智能提示
  "html-css-class-completion.enableEmmetSupport": true,
  "html-css-class-completion.enableFindUsage": true,
  "html-css-class-completion.enableScssFindUsage": true,
  "html-css-class-completion.includeGlobPattern": "**/*.{css,scss,sass,html}",
  "html-css-class-completion.remoteStyleSheets": [
    "https://m.sadais.com/sadais-front/piui/piui.css"
  ],
  // lint 配置
  "eslint.alwaysShowStatus": true,
  "eslint.format.enable": true,
  "eslint.packageManager": "yarn",
  "editor.codeActionsOnSave": {
    // For ESLint
    "source.fixAll.eslint": true,
    // For TSLint
    "source.fixAll.tslint": true,
    // For Stylelint
    "source.fixAll.stylelint": true
  },
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  // 标签高亮插件配置
  "highlight-matching-tag.styles": {
    "opening": {
      "left": {
        "custom": {
          "borderWidth": "0 0 0 .125rem",
          "borderStyle": "solid",
          "borderColor": "#ff508a",
          "borderRadius": ".25rem",
          "overviewRulerColor": "white"
        }
      },
      "right": {
        "custom": {
          "borderWidth": "0 .125rem 0 0",
          "borderStyle": "solid",
          "borderColor": "#ff508a",
          "borderRadius": ".25rem",
          "overviewRulerColor": "white"
        }
      }
    }
  },
  // 插件配置
  "sync.gist": "1e774801956fbf0bb71a84c4b1bc958e",
  "kite.showWelcomeNotificationOnStartup": false,
  "bracket-pair-colorizer-2.showBracketsInGutter": true,
  "bracket-pair-colorizer-2.showBracketsInRuler": true,
  // TS配置
  "typescript.referencesCodeLens.showOnAllFunctions": true,
  "explorer.confirmDelete": false,
  "editor.suggestSelection": "first",
  "editor.gotoLocation.multipleDeclarations": "goto",
  "editor.gotoLocation.multipleDefinitions": "goto",
  "editor.gotoLocation.multipleTypeDefinitions": "goto",
  "CSSNavigation.alsoSearchDefinitionsInStyleTag": true,
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "editor.cursorSurroundingLinesStyle": "all",
  "editor.cursorBlinking": "expand",
}