跳至主要內容

VS Code 设置和插件

望间软件VS Code大约 4 分钟

个人使用的 VS Code 设置和插件。

VS Code 设置和插件

设置

VS Code 打开设置 JSON 文件方法:

  1. 快捷键 Ctrl + Shitf + P
  2. 输入 user settings
  3. 选择打开 JSON 的系统配置文件

下面这是个人的 VS Code 设置配置:

{
  // 智能提示
  "editor.suggestSelection": "first",
  // tab 选取智能提示
  "editor.tabCompletion": "on",
  // 开启自动显示建议
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },
  // 新版本消息
  "vsicons.dontShowNewVersionMessage": true,
  // 配置终端
  "terminal.integrated.defaultProfile.windows": "Windows PowerShell",
  // git 自动匹配远端代码
  "git.autofetch": true,
  // UI主题
  "workbench.colorTheme": "One Dark Pro Darker",
  // icon主题
  "workbench.iconTheme": "vscode-icons",
  // 字体
  "editor.fontFamily": "Fira Code, Consolas, 'Courier New', monospace",
  // 连字符
  "editor.fontLigatures": true,
  // 开启行数提示
  "editor.lineNumbers": "on",
  // table 为两个空格
  "editor.tabSize": 2,
  "editor.foldingImportsByDefault": true,
  "editor.cursorBlinking": "expand",
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.formatOnPaste": true,
  // 配置eslint
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit",
    "source.fixAll.eslint": "explicit",
    "eslint.autoFixOnSave": "explicit"
  },
  "eslint.options": {
    "configFile": "./.eslintrc.js",
    "extensions": [".html", ".js", ".vue"]
  },
  // 括号颜色区分
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",
  // 取消删除文件弹窗
  "explorer.confirmDelete": false,
  // 关闭rg.exe进程
  "search.followSymlinks": false,
  // 打开code lens
  "diffEditor.codeLens": true,
  // 隐藏文件夹
  "files.exclude": {
    "**/.deploy_git": true,
    "**/.vscode": true
  },
  // 搜索忽略文件夹
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true
  },
  // 文件类型关联
  "files.associations": {
    "*.wxml": "html",
    "*.wxss": "css",
    "*.ejs": "html"
  },
  // 代码格式化
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[svg]": {
    "editor.defaultFormatter": "jock.svg"
  },

  "redhat.telemetry.enabled": true,
  "git.confirmSync": false,
  "settingsSync.ignoredExtensions": [
    "johnstoncode.svn-scm"
  ],
  "git.enableSmartCommit": true,
  "explorer.confirmDragAndDrop": false,
  "errorLens.excludeBySource": [
    "css(css-ruleorselectorexpected)"
  ],
  
  // 自动重命名成对的标签
  "editor.linkedEditing": true,
  // 自动添加 HTML/XML 关闭标签
  "html.autoClosingTags": true,
  "editor.inlineSuggest.enabled": true,
}

插件

下面这是个人使用的 VS Code 插件:

  • Bracket Pair Colorizer 2

    给代码中的括号添加不同颜色,方便区分(深层数据福音)

    由于 Bracket Pair Colorizer 系列插件从 2022 年开始停止更新了,下面是替代方案,将下面代码添加至 VS Code 设置文件中

    // 括号颜色区分
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs": "active"
    
  • Babel JavaScript

    支持 Babel 语法高亮

  • Browse Lite

    VS Code 内置浏览器

  • Code Runner

    支持运行代码,并查看输出结果

  • CSS Peek

    能够直接查看和编辑 CSS 样式,而不需要跳转到对应的样式表文件中

  • EditorConfig for VS Code

    帮助团队内部保持一致的代码风格和格式

  • EJS language support

    支持 EJS 语法高亮

  • Error Lens

    支持代码错误提示,代码提示,代码补全,代码格式化,代码跳转,代码跳转到定义,代码跳转到引用,代码跳转到类型定义,代码跳转到实现,代码跳转到声明,代码跳转到类型声明,代码跳转到类型实现,代码跳转到类型引用,代码跳转到类型声明,代码跳转到类型实现,代码跳转到类型引用

  • ESLint

ESLint 集成到 VSCode 的代码检查工具

  • Git Graph

直观地查看和管理 Git 代码库的提交历史、分支情况以及代码变更

  • HTML CSS Support

    支持 HTML CSS 代码补全、语法高亮

  • Image preview

    支持图片预览

  • indent-rainbow

    支持代码缩进颜色区分

  • IntelliCode

    Microsoft 推出的一款基于人工智能的开发工具,智能代码补全

  • JavaScript (ES6) code snippets

    支持 ES6 代码补全

  • jQuery Code Snippets

    支持 jQuery 代码补全

  • Live Server

    提供了一个本地开发服务器,用于实时预览和调试网页应用程序

  • Markdown All in One

    支持 Markdown 语法高亮,实时预览

  • One Dark Pro

    VS Code 的 UI 风格主题

  • open in browser

    支持打开当前文件在浏览器中预览

  • Path Intellisense

    支持文件路径补全

  • Prettier

    代码格式化工具

  • Project Manager

    将常用的项目文件夹添加到项目列表中,可以快速打开或切换到这些项目

  • TONGYI Lingma

    通义灵码,阿里推出的的智能问答工具

  • Turbo Console Log

    快速生成 console.log() 使用方法:

    • Ctrl + Shift + L 选中变量之后,使用这个快捷键生成 console.log
    • Alt + Shift + D 删除所有 console.log()
    • Alt + shift + C 注释所有 console.log
    • Alt + shift + U 启用所有 console.log
  • Vite

    Vue 官方提供的快速开发工具,可以快速构建和启动项目,同时支持 TypeScript

  • vscode-icons

    VS Code 文件图标库

  • Vue - Official

    Vue 官方插件

上次编辑于:
贡献者: ViewRoom