VS Code 设置和插件

望间大约 6 分钟

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

VS Code 设置和插件

设置

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

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

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

{
  // 智能提示时默认选择第一个
  "editor.suggestSelection": "first",
  // 按下Tab键时自动选择智能提示
  "editor.tabCompletion": "on",
  // 开启自动显示建议
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },
  // 不显示新版本消息
  "vsicons.dontShowNewVersionMessage": true,
  // 配置Windows终端的默认shell
  "terminal.integrated.defaultProfile.windows": "Windows PowerShell",
  // 自动拉取远程git仓库的更新
  "git.autofetch": true,
  // UI主题
  "workbench.colorTheme": "One Dark Pro Darker",
  // 图标主题
  "workbench.iconTheme": "vscode-icons",
  // 编辑器字体
  "editor.fontFamily": "Fira Code, Consolas, 'Courier New', monospace",
  // 开启连字符（如某些编程字体的特殊连接字符）
  "editor.fontLigatures": true,
  // 开启行数提示
  "editor.lineNumbers": "on",
  // Tab键对应两个空格
  "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配置
  "eslint.options": {
    "configFile": "./.eslintrc.js",
    "extensions": [".html", ".js", ".vue"]
  },
  // 启用括号颜色区分
  "editor.bracketPairColorization.enabled": true,
  // 显示活动的括号对
  "editor.guides.bracketPairs": "active",
  // 取消删除文件时的确认弹窗
  "explorer.confirmDelete": false,
  // 搜索时不跟随符号链接
  "search.followSymlinks": false,
  // 打开diff编辑器的code lens
  "diffEditor.codeLens": true,
  // 隐藏特定文件夹
  "files.exclude": {
    "**/.deploy_git": true,
    "**/.vscode": true,
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true,
    "**/*.meta": true,
    "**/.history": true,
    "**/.idea": true,
    "**/idea": true,
    "**/logs": true,
    "**/target": true,
    "**/pid": 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"
  },
  // 在进行 Git 同步操作时，不弹出确认对话框
  "git.confirmSync": false,
  // 设置同步时忽略的扩展插件列表，这里忽略了 'johnstoncode.svn-scm'
  "settingsSync.ignoredExtensions": ["johnstoncode.svn-scm"],
  // 启用智能提交，允许在没有明确提交消息的情况下提交，并且使用暂存区的更改生成提交消息
  "git.enableSmartCommit": true,
  // 在文件资源管理器中拖放文件或文件夹时，不弹出确认对话框
  "explorer.confirmDragAndDrop": false,
  // 配置 Error Lens 插件，排除由 'css(css-ruleorselectorexpected)' 引起的错误提示
  "errorLens.excludeBySource": ["css(css-ruleorselectorexpected)"],
  // 自动重命名成对的HTML/XML标签
  "editor.linkedEditing": true,
  // 自动添加HTML/XML的关闭标签
  "html.autoClosingTags": true,
  // 启用内联建议
  "editor.inlineSuggest.enabled": true,
  // TypeScript的本地化设置
  "typescript.locale": "zh-CN",
  // 不高亮非基本ASCII字符
  "editor.unicodeHighlight.nonBasicASCII": false,
  // 禁止 Live Server 显示信息消息
  "liveServer.settings.donotShowInfoMsg": true,
  // 不高亮模糊字符
  "editor.unicodeHighlight.ambiguousCharacters": false,
  // 为不同类型的括号对使用独立的颜色池
  "editor.bracketPairColorization.independentColorPoolPerBracketType": true,
  // 不要在父文件夹中打开仓库
  "git.openRepositoryInParentFolders": "never",
  // GitLens 插件：跳过以下 git 命令的确认
  "gitlens.gitCommands.skipConfirmations": [
    "fetch:command", // 跳过拉取（fetch）操作的确认
    "stash-push:command", // 跳过暂存（stash）推送操作的确认
    "switch:command" // 跳过分支切换操作的确认
  ]
}

插件

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

代码编辑与格式化

CSS Peek
提供快速查看和导航 CSS 规则的功能，通过预览关联的 CSS 选择器增强编辑体验。
EditorConfig for VS Code
通过.editorconfig文件确保跨项目的一致代码风格。
Error Lens
在代码行上直观地显示错误和警告，提高代码审查效率。
ESLint
实时检测 JavaScript 代码质量，遵循可配置的编码规范。
Prettier
自动格式化代码，保持代码整洁和一致。

代码运行与调试

Code Runner
支持一键运行多种编程语言的代码片段或文件，方便快速测试。
Live Server
启动一个具有实时重载功能的本地服务器，适用于前端开发的实时预览。
Turbo Console Log
优化 JavaScript 的 console.log，自动包含变量信息，便于调试。
- Ctrl + Shift + L 选中变量之后，使用这个快捷键生成 console.log
- Alt + Shift + D 删除所有 console.log
- Alt + shift + C 注释所有 console.log
- Alt + shift + U 启用所有 console.log