VSCode插件和配置终极版2023 vscode插件大全

# vscode简介

Visual Studio Code是一个轻量级但功能强大的源代码编辑器，可在您的桌面上运行，并且可用于Windows，macOS和Linux。它具有对JavaScript，TypeScript和Node.js的内置支持，并具有丰富的其他语言（例如C ++，C＃，Java，Python，PHP，Go）和运行时（例如.NET和Unity）扩展的生态系统。VS Code内置了对Git的支持，可以使用图形化界面方便的进行版本控制，比如添加暂存，提交更新，拉取远程代码，推送代码到远程代码库，创建合并分支，文件内容差异比较等这些常规操作。

一，快捷键

二，我的插件

代码支持包：

经典工具：

体验提升：

vue开发工具：

摸鱼：

代码规范：

git相关工具：（这三个东西都是活动栏源代码管理的拓展插件，会拓展它的功能）

三，小知识

1. 写代码时一闪一闪的竖线变成方框怎么办？

   按一下insert键就可以，因为我们默认的写入方式是插入，但是可以改成覆盖；

2. html文件中在输入时直接写一个html就可以进入选择html5把框架写出来（输入一个感叹号也可以）

3. 在设置里搜索编码可以在打开文件时自动判断文件的编码

4. 我们的代码注释如果想要折叠怎么办？

   在代码的前后端加上#region 和 #endregion就可以折叠了

5. vscode删除的文件在回收站，想要找回去回收站恢复即可。

6. 我打开一个新文件就会覆盖掉旧文件，很烦怎么设置去掉这个东西？

   设置输入：enable preview。

   把这个地方的√去掉就好了（我这里是已经去掉了）

   但是有时候打开很多导致vscode卡顿，哎，还是得用这个功能，所以说一定要记住，你可能会编辑的文件或者需要长时间留存的文件，你就双击打开，不要单击，当然如果你编辑的话也可以达到效果。

四，我的setting.json文件

{
  // 基本配置（不用管）
  "security.workspace.trust.untrustedFiles": "open",
  "explorer.confirmDragAndDrop": false,
  "files.autoGuessEncoding": true,
  "explorer.confirmDelete": false,
  "vsicons.dontShowNewVersionMessage": true,
  "window.autoDetectColorScheme": true,
  "editor.codeLensFontSize": 16,
  "editor.fontSize": 20,
  "editor.tabSize": 2,
  "editor.guides.bracketPairs": true,
  "workbench.editor.splitInGroupLayout": "vertical",
  "editor.detectIndentation": false,
  "editor.linkedEditing": true,
  "window.commandCenter": false,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "workbench.colorTheme": "Visual Studio Light",
  "workbench.iconTheme": "vscode-icons",
   "files.eol": "\n",
  // 保存相关配置
  // 文件自动保存，如果配置afterdelay那么eslint自动修复就不会生效了，要自己ctrl+s保存一下才会修复
  "files.autoSave": "afterDelay",
  // liverserver设置
  "liveServer.settings.donotShowInfoMsg": true,
  "liveServer.settings.donotVerifyTags": true,
  // git相关配置
  "git.path": "C:/Git/Git/bin/git.exe",
  "git.suggestSmartCommit": false,
  "git.autofetch": true,
  "git.confirmSync": false,
  // 针对特定文件文件更改配置
  "[markdown]": {
    "editor.quickSuggestions": {
      "other": true,
      "comments": true,
      "strings": true
    }
  },
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "stylelint.vscode-stylelint"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  //关于格式化的配置
  "editor.formatOnSave": true, //是否在保存时格式化文件
  // eslint配置
  "eslint.alwaysShowStatus": true,
  "eslint.quiet": false, // 忽略规则中的warning项，false为不忽略，true为忽略
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue"
  ],
  "eslint.run": "onSave",
  "eslint.options": {
    "extensions": [
      ".js",
      ".vue",
      ".ts"
    ], //指定vscode的eslint所处理的文件的后缀
    // "overrideConfigFile": "C:\\Users\\30764\\.eslintrc.json" // eslint的配置文件,如果项目里有就不用配置了
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // prettier 格式化配置
  "javascript.format.placeOpenBraceOnNewLineForControlBlocks": false, // 函数左括号{是否换行
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 让函数(名)和后面的括号之间加个空格
  // "prettier.configPath": "C:\\Users\\30764\\.prettierrc.json", //C:\\Users\\30764\\.prettierrc
  //vetur 配置
  "vetur.format.options.tabSize": 2,
  "vetur.format.options.useTabs": false,
  "vetur.format.defaultFormatter.html": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "semi": false, //不加分号
      "singleQuote": true, //用单引号
      "tabWidth": 2,
      "printWidth": 80,
      "bracketSpacing": true, // 数组属性：后跟一个空格
      "endOfLine": "auto",
      "trailingComma": "es5",
    }
  },
  //Tabnine配置
  "tabnine.experimentalAutoImports": true,
  //volar配置：可以自动.value
  "volar.autoCompleteRefs": true,
  "emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html"
  },
  "volar.icon.splitEditors": true,
  //dotenv配置
  "files.associations": {
    "*.env.*": "dotenv"
  },
  //code spell checker的忽略字符
  "cSpell.ignoreWords": [
    "axios",
    "vueuse",
    "attributify",
    "tabnine",
    "vetur",
    "esbenp",
    "antv",
    "commitlint",
    "Pinia",
    "nuxt",
    "vuex"
  ],
  // TODO配置
  "todo-tree.highlights.enabled": true,
  "todo-tree.general.tags": [
    "BUG",
    "HACK",
    "FIXME",
    "TODO",
    "NOTE"
  ],
  // 背景图配置
  "backgroundCover.imagePath": "c:\\Users\\30764\\Pictures\\Saved Pictures\\2034048.jpg",
  "backgroundCover.opacity": 0.1,
  //翻译插件配置
  "commentTranslate.hover.string": true,
  "commentTranslate.hover.variable": true,
  "commentTranslate.multiLineMerge": true,
}