前端vscode开发工具-使用必备

最新推荐文章于 2025-10-29 10:05:14 发布

原创最新推荐文章于 2025-10-29 10:05:14 发布 · 414 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#visual studio code #javascript

前端必备工具专栏收录该内容

1 篇文章

订阅专栏

这篇博客记录了Visual Studio Code(VSCode)作为前端开发的高效工具，分享了一套完整的插件安装与设置。包括Prettier用于代码格式化，快速建议，智能提交，自动拉取，代码保存时自动格式化等功能，提升开发效率和代码质量。此外，还提到了针对Vue，JSON，SCSS，HTML等文件类型的默认格式化器设置。

记录前端好用的工具以及插件，在大佬的分享下看到的，好用自己也记录一下

1.vscode 下载地址https://code.visualstudio.com/

2.必备插件安装

在这里插入图片描述

3. vscode/setting.js配置

{
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.quickSuggestions": {
    "strings": true
  },
  "workbench.colorTheme": "One Monokai",
  "editor.tabSize": 2,
  "editor.detectIndentation": false,
  "emmet.triggerExpansionOnTab": true,
  "editor.formatOnSave": true,
  "javascript.format.enable": true,
  "git.enableSmartCommit": true,
  "git.autofetch": true,
  "git.confirmSync": false,
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "liveServer.settings.donotShowInfoMsg": true,
  "explorer.confirmDelete": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "typescript.updateImportsOnFileMove.enabled": "always",
  "files.exclude": {
    "**/.idea": true
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true,
    "source.fixAll.eslint": true
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.suggest.snippetsPreventQuickSuggestions": false,
  "prettier.htmlWhitespaceSensitivity": "ignore",
  "prettier.vueIndentScriptAndStyle": true,
  "docthis.authorName": "chuzhixin 1204505056@qq.com",
  "docthis.includeAuthorTag": true,
  "docthis.includeDescriptionTag": true,
  "docthis.enableHungarianNotationEvaluation": true,
  "docthis.inferTypesFromNames": true,
  "vetur.format.defaultFormatter.html": "prettier",
  "files.autoSave": "onFocusChange"
}