VS Code 设置和插件

望间2023年6月22日大约 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

Git 集成与可视化

Git Graph
以图形方式展示 Git 仓库的分支和提交历史，便于理解和操作。
git-commit-plugin
提供更便捷的 Git 提交操作，可能包括自定义模板和快捷键。
GitLens
深度集成 Git，提供高级功能如代码作者追踪、分支比较等。

主题与图标

One Dark Pro
VSCode 的深色主题。
vscode-icons
VSCode 的图标库。

语言支持

Chinese (Simplified)
提供简体中文界面，方便中文用户使用。
Babel JavaScript
将现代 JavaScript 转换为广泛兼容的版本，支持老旧环境。
EJS language support
对 EJS 模板语言提供语法高亮和智能提示。
Markdown All in One
为 Markdown 文件提供全方位的编辑支持，包括快捷键和预览。
Python
提供 Python 开发的全面支持，包括调试、代码提示和格式化。
SVG
增强 SVG 文件的编辑体验，提供语法高亮和基础功能。

辅助工具

Browse Lite
可能是一个轻量级的浏览工具，可能用于快速查看资源或文档。
Image preview
在编辑器中直接预览图片，无需离开当前工作区。
indent-rainbow
通过颜色显示代码缩进，帮助识别嵌套层次。
open in browser
快速将 HTML 文件在浏览器中打开，方便前端开发预览。
Path Intellisense
自动补全文件路径，提高文件引用速度。
Project Manager
管理和切换多个项目，提高多项目开发的效率。

技术框架

Vite
快速的前端构建工具，提供热模块替换和快速启动。
Vue - Official
官方 Vue.js 插件，增强 Vue 项目的开发体验。

AI 工具

TONGYI Lingma
阿里云的 AI 编码助手，提供实时代码建议和多种开发辅助功能。
Baidu Comate
百度的 AI 代码助手，可能提供智能代码补全和分析。
CodeGeeX
一个 AI 代码生成或分析工具，利用机器学习提升开发效率。
IntelliCode
微软的 AI 辅助开发工具，提供基于上下文的智能代码完成。

字体

Fira Code

一款对程序员友好的字体

GitHub 地址：https://github.com/tonsky/FiraCode

VS Code 设置

"editor.fontFamily": "'Fira Code', Consolas",
"editor.fontLigatures": true,

editor.fontFamily 表示字体 editor.fontLigatures 表示字符是否可以连接显示