Skip to content

vs-code

约 1019 字大约 3 分钟

2025-05-23

1、核心配置

  1. 打开设置
  2. 打开配置文件

Settings.json

{
  // 菜单栏只显示菜单图标
  "window.menuBarVisibility": "compact",
  // 将命令启动器与窗口标题栏分开
  "window.commandCenter": false,
  // 禁用布局控件
  "workbench.layoutControl.enabled": false,
  // 自动更新已启用的扩展
  "extensions.autoUpdate": "onlyEnabledExtensions",
  // 在没有从上一会话中恢复出信息的情况下,不打开编辑器
  "workbench.startupEditor": "none",
  // 文件图标主题
  "workbench.iconTheme": "material-icon-theme",
  // 编辑器字体大小
  "editor.fontSize": 16,
  // 一个制表符等于的空格数
  "editor.tabSize": 2,
  // 编辑器折行的方式:较小值处折行
  "editor.wordWrap": "bounded",
  // 优化鼠标样式
  "editor.cursorBlinking": "smooth",
  // 自动重命名HTML标签
  "editor.linkedEditing": true,
  // 彩虹括号配置 1
  "editor.guides.bracketPairs": true,
  // 彩虹括号配置 2
  "editor.guides.bracketPairsHorizontal": "active",
  // 彩虹括号配置 3
  "editor.bracketPairColorization.independentColorPoolPerBracketType": true,
  // 彩虹括号配置 4
  "editor.defaultColorDecorators": true,
  // 控制活动代码段是否阻止代码提示
  "editor.suggest.snippetsPreventQuickSuggestions": false,
  // 控制是否应自动关闭括号、引号和括号
  "editor.autoClosingBrackets": "languageDefined",
  // 保存时自动格式化
  "editor.formatOnSave": true,
  // 自动格式化粘贴内容
  "editor.formatOnPaste": true,
  // 默认格式化工具 - Prettier - Code formatter 插件
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // 当编辑器失去焦点时,自动保存
  "files.autoSave": "onFocusChange",
  // 排除文件和文件夹
  "files.exclude": {
    "**/node_module": true
  },

  // 默认终端 - Git
  "terminal.integrated.defaultProfile.windows": "Git Bash",
  // 终端组合键绑定
  "terminal.integrated.allowChords": false,
  // 删除文件确认
  "explorer.confirmDelete": false,
  // 拖放移动文件或文件夹时确认
  "explorer.confirmDragAndDrop": false,
  // 自动更新导入路径
  "javascript.updateImportsOnFileMove.enabled": "always",
  // 始终允许不受信任的文件引入受信任的工作区,而不显示提示
  "security.workspace.trust.untrustedFiles": "open",
  // 允许提示用户对 Intellisense 使用在工作区中配置的 TypeScript 版本
  "typescript.enablePromptUseWorkspaceTsdk": true,

  // Git 配置 - Start
  "git.enableSmartCommit": true,
  "git.confirmSync": false,
  "git.ignoreRebaseWarning": true
  // Git 配置 - End
}

2、插件推荐

名称描述
IntelliSense for CSS class names in HTML智能 CSS 类名提示
Inline Parameters for VSCode函数参数提示
Vue - OfficialVue 语法支持
Code Spell Checker单词拼写检查
VueHelperVue 代码片段
vue-helperVue 代码片段
Path Autocomplete路径别名支持
Path Intellisense路径别名支持
Live Server本地开发服务器
Code Runne代码运行程序
Material Icon ThemeVsCode 文件图标
Image preview代码行图像预览
indent-rainbow彩虹缩进
Prettier - Code formatter代码格式化程序
PrettierConfig for VS Code代码格式化程序配置
CodeGeeX智能 AI 编程助手

3、项目环境配置

根目录下创建文件jsconfig.jsontsconfig.json

  • 即使项目中没有使用 TypeScript,也可以使用此文件来获得更好的 IDE(集成开发环境)支持
  • 比如更准确的代码自动补全、语法提示、路径别名、导航和类型检查等等
{
  "compilerOptions": {
    // 指定用于解析非相对模块名称的基目录
    "baseUrl": "./",
    // 类型支持
    "types": ["element-plus/global"],
    // 路径别名
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

4、控制台权限不足

Windows平台下,如nodenpmtsc等命令在VsCode控制台执行时,发生报错

错误如下

xxx : 无法加载文件 xxxx,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。

解决方案

  1. Win + X
  2. 运行Windows PowerShell(管理员)
  3. 执行命令
set-ExecutionPolicy RemoteSigned
  1. 输入Y,回车;关闭窗口,重启 VsCode

5、在 VsCode 中代码调试

演示

image-20240703144800408

✨1、添加配置

  1. .vscode目录下新建launch,json文件
  2. 添加如下配置
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "dev",
      "url": "http://localhost:5173", // Replace with your project's local URL
      "webRoot": "${workspaceFolder}",
      "runtimeExecutable": "stable" // Use the "stable" or custom browser path
    }
  ]
}
  1. 根据需要修改urlruntimeExecutable

调试配置


注:runtimeExecutable默认使用stable即可,若提示错误,请将该值改为浏览器地址

例如Google Chrome浏览器(Win):

C:/Program Files/Google/Chrome/Application/chrome.exe

✨2、启动调试

  1. 在代码文件中添加断点(红框位置,鼠标单击)

添加断点

  1. 在左侧工具栏中,选择调试,运行dev即可

启动调试

豫ICP备18027433号 萌ICP备20240840号 本网站由又拍云提供CDN加速/云存储服务