一套适合团队开发的 setting.json 配置(附vscode配套插件)

1,684 阅读2分钟

一、话不多说,上配置,直接替换原 setting.json 就行

{
  "files.autoSave": "afterDelay", // 自动保存
  "editor.fontSize": 13, //字号
  "editor.fontFamily": "'JetBrains Mono NL','等线'", //字体 中文  日本語 にほんご https://www.jetbrains.com/zh-cn/lp/mono
  "editor.suggestSelection": "recentlyUsedByPrefix", //按使用过的 prefix 前缀优先匹配,方便选择我们的惯用项
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue", //自动覆盖提示的优先默认值,也是为了保持惯用优先
  "workbench.startupEditor": "newUntitledFile", // 保持新开文件一定是一个独立的新窗口
  "workbench.editor.enablePreview": false, // 取消预览模式,保证编辑模式稳定
  "workbench.iconTheme": "material-icon-theme", // 开启 material icons 需要下载插件 Material Icon Theme
  "explorer.compactFolders": false, // 关闭文件夹紧凑模式显示 因为默认情况下,vscode 和 github 保持一致,即当一个文件夹下只有一个文件夹时,会略过中间部分的文件夹,将显示缩略为一行
  "files.eol": "\n", // 默认 lf 结尾 因为linux / mac / win 上的文件结尾符不一样,Git 对于不同的结尾符,在不同平台上可能会引发不一致问题
  "update.mode": "none", //关闭 vscode 自动更新提示,我们定期手动升级即可
  "explorer.confirmDelete": false, //关闭删除二次确认
  "extensions.ignoreRecommendations": false, //关闭 vscode 推荐插件的行为
  "extensions.autoUpdate": "onlyEnabledExtensions", //只有已启用的插件才开启自动 update 更新功能,防止禁用的插件还在后台更新浪费资源
  "workbench.colorTheme": "Dracula Soft", //暗色主题 Dracula Official
  "typescript.preferences.jsxAttributeCompletionStyle": "auto", // tsx 自动补全括号
  "javascript.preferences.jsxAttributeCompletionStyle": "auto", // jsx 自动补全括号
  "editor.inlineSuggest.enabled": true, //使用 Tabnine 或 github copilot 等自动补全插件都需要开启的选项
  "svg.preview.mode": "svg", // 预览 svg 时直接查看源码
  "liveServer.settings.donotShowInfoMsg": true, // 关闭开启liveserver服务提示
  "diffEditor.ignoreTrimWhitespace": false, //vscode 的 diff 行为默认会忽略尾部空字符,为了更精准的控制文件尾,我们需要更加敏感,所以关闭忽略行为

  // 默认格式化方式,统一为 prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.semi": true,
  "prettier.printWidth": 80,
  "prettier.singleQuote": true,
  // eslint 的配置
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.workingDirectories": [{ "mode": "auto" }], // eslint 自动识别工作区

  /* 由于 vscode 自 v1.60 开始原生支持彩色括号和导轨,且性能极好,我们从 Bracket-Pair-Colorizer 插件迁出,详见:
《 vscode1.60 原生高性能括号着色无缝迁移方案(等价Bracket-Pair-Colorizer) 》https://blog.csdn.net/qq_21567385/article/details/120387446
《 vscode1.62 原生代码块边缘导轨着色与Bracket Pair Colorizer的对标和差异化(附配置) 》https://blog.csdn.net/qq_21567385/article/details/121173936 */
  // 原生复现 彩色括号
  "workbench.colorCustomizations": {
    "editorBracketHighlight.foreground1": "#ffd700",
    "editorBracketPairGuide.activeBackground1": "#ffd7007f",
    "editorBracketHighlight.foreground2": "#da70d6",
    "editorBracketPairGuide.activeBackground2": "#da70d67f",
    "editorBracketHighlight.foreground3": "#87cefa",
    "editorBracketPairGuide.activeBackground3": "#87cefa7f",
    "editorBracketHighlight.foreground4": "#ffd700",
    "editorBracketPairGuide.activeBackground4": "#ffd7007f",
    "editorBracketHighlight.foreground5": "#da70d6",
    "editorBracketPairGuide.activeBackground5": "#da70d67f",
    "editorBracketHighlight.foreground6": "#87cefa",
    "editorBracketPairGuide.activeBackground6": "#87cefa7f",
    "editorBracketHighlight.unexpectedBracket.foreground": "#ff0000"
  },
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",

  /* 其他 */
  // svg formatter
  "[svg]": {
    "editor.defaultFormatter": "jock.svg"
  },
  // python format
  "[python]": {
    "editor.defaultFormatter": "ms-python.python"
  },
  // python language server engine
  "python.languageServer": "Pylance"
}

参考来源:blog.csdn.net/qq_21567385…

感谢老铁提供的思路!!!

二、vscode 配套插件

  • vue3配套插件:vue3-snippets-for-vscode 和 Vue Language Features (Volar)

image.png

  • 智能 AI 机器人:Tabnine

image.png

  • 规范代码:ESLint + Prettier + EditorConfig for VS Code

image.png

image.png

image.png

  • 自闭合标签 Code Spell Checker、自动重命名标签 Auto Rename Tag

image.png

  • 代码拼写检查 Code Spell Checker

image.png

  • 图片引入显示 Image preview、import 引入显示 Import Cost

image.png

  • 微型服务 Live Server

image.png

  • 主题风格及文件样式美化:Dracula Official + Material Icon Theme

image.png

image.png