Vscode快速跳到某一行 ❤code VScode安装配置和使用(Windows和Mac全部常见设置和使用）

已于 2025-05-22 09:56:09 修改
阅读量9k 收藏 36
点赞数 13
分类专栏： 电脑软硬件使用 文章标签： vscode ide 编辑器 1024程序员节
于 2024-01-27 13:59:06 首次发布
林太白
本文链接：https://blog.youkuaiyun.com/weixin_43615570/article/details/135881957
版权

❤ VScode安装、vscode安装配置和使用（Windows和Mac）

Ⅰ下载安装以及快捷键

👉安装

直接去官方一直下载安装即可

VsCode（简称Code）下载的官网
https://code.visualstudio.com/

👉快捷键

Ⅱ 常见设置

👉设置中文模式🌟

【window系统】
ctrl+shift+p打开命令窗口找到Configure Display Language点击；

【MAC 】
command+shift+p打开命令窗口找到Configure Display Language点击

👉菜单栏🌟

使用快捷键Ctrl+Shift+P调出VSCode的执行命令的输入框
输入命令view:toggle menu bar
上头的菜单栏又重新回来了

🌟字体大小

设置里面搜索Font Size

🌟自动保存

设置里面搜索
Files: Auto Save
控制具有未保存更改的编辑器的自动保存
在这里插入图片描述

🌟自动换行🌟

设置里面搜索World Wrap

自动换行指的是当一行代码的长度达到了窗口边缘时，就会自动放在下一行去显示。
点击文件菜单项之后使用快捷键Ctrl+,打开设置窗口，然后输入Word Warp就会出现和字符数量有关的限制,设置为不是off的就可以自动换行了

🌟空格缩进

设置里面搜索TabSize

正常我们都是使用2即可

👉自定义快捷代码：设置log得时候自动输出console.log()

  1. 打开命令面板（快捷键Ctrl+Shift+P或Cmd+Shift+P）
  2. 输入Configure User Snippets 命令
  3. 选择你需要的代码格式
    在这里插入图片描述
    进入配置项
    在这里插入图片描述
    放开console.log() 的配置项
    在这里插入图片描述
    效果：
    在这里插入图片描述
    配置成功！

👉代码编辑区域字体大小设置

在这里插入图片描述

👉配置代码片段填充代码

（1）vs面板左下角设置-配置用户代码片段

在这里插入图片描述

（2）弹出搜索框中输入typescript会出来2个选项，选择第二个react

（3）在代码片段中添加自己的快捷键设置片段（用$TM_FILENAME_BASE$1可以获取当前文件的名称）

{
	// Place your snippets for typescriptreact here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	"tsrc": {
		"prefix": "tsrc",
		"body": [
			"import React from 'react';",
			"",
			"function $TM_FILENAME_BASE$1 () {",
			"  return (",
			"    <div className=\"App\"></div>",
			"  );", 
			"}",
			"",
			"export default $TM_FILENAME_BASE$1;"
		],   
		"description": "TypeScript React FC component"
	},
	"a vue2 snippet": {
		"prefix": "vue2",
		"body": [
		  "<template>",
		  "  <div class=\"\"></div>",
		  "</template>",
		  "",
		  "<script>",
		  "export default {",
		  "  data() {",
		  "    return {",
		  "      ",
		  "    }",
		  "  }",
		  "}",
		  "</script>",
		  "",
		  "<style scoped lang=\"\"></style>"
		],
		"description": "a vue2 snippet"
	},
	"a vue3 snippet": {
		"prefix": "vue3",
		"body": [
		  "<script setup>",
		  "</script>",
		  "",
		  "<template>",
		  "  <div class=\"\"></div>",
		  "</template>",
		  "",
		  "<style scoped lang=\"\"></style>"
		],
		"description": "a vue3 snippet"
	},
	"a vue3 snippet with typescript": {
		"prefix": "vue3-ts",
		"body": [
		  "<script setup lang=\"ts\">",
		  "</script>",
		  "",
		  "<template>",
		  "  <div class=\"\"></div>",
		  "</template>",
		  "",
		  "<style scoped lang=\"\"></style>"
		],
		"description": "a vue3 snippet with typescript"
	},
}

效果：
在这里插入图片描述

👉Vscode快捷跳到某一行

🌟 使用Vscode给我们提供了一个特别方便的功能，直接点击右下方的行数，可以快捷跳到某一行。

Ⅲ 插件推荐以及配置🌟

优先级按照前后顺序推荐

👉背景插件background-cover

设置背景图片

👉 下载background-cover插件

快捷键 
ctrl+shift+p`

👉下载了插件以后，点击vscode右下方按钮，然后选择背景图，重启vscode即可

  • 效果图

在这里插入图片描述

👉Image preview

图片预览插件

鼠标放上去可以预览图片

👉Auto Complete Tag

自动补全HTML/XML 标签
在这里插入图片描述

👉文件夹图标插件VSCode Great Icons

VSCode Great Icons

👉美化代码颜色插件Bracket Pair Colorizer（最新code已经内置）

在这里插入图片描述

  • 颜值插件
  • 其关注于将不同层次的括号，包括圆括号、方括号和花括号用不同颜色进行渲染和连接，方便用户识别。

👉美化注释代码插件Better Comment

在这里插入图片描述
Better Comment就是在视觉上方便对不同类型的注释进行标记的插件
在这里插入图片描述

👉预览md文件（Markdown Preview Enhanced）

最近在使用vscode时查看自己写的md文件非常不方便，于是有了想要预览md文件的需求

在这里插入图片描述

使用方法：
鼠标右键=> 打开方式=> 选择Markdown Preview Enhanced

使用效果：
在这里插入图片描述

🎴 设置主题

在这里插入图片描述

🎴 设置图片根目录

👉主题样式

Monokai Pro

在这里插入图片描述

👉分屏浏览器插件

1、下载插件Live Server、[Deprecated] Browser Preview

2、设置插件 【文件=》首选项=》设置=》扩展=》Live Server Config】
3、 找到如下图

在这里插入图片描述
在这里插入图片描述

HTML的当前页面右键直接Open With Live Server 正常使用。

👉识别Vue文件插件

插件 Vetur

安装完成后，重启VS Code即可

👉vue3自动添加.value插件

TypeScript Vue Plugin (Volar) 弃用

在这里插入图片描述

Vue - Official

上面的废弃了，建议使用这个
在这里插入图片描述

👉路径自动查找插件Path Intellisense

可以自动帮助我们补全引入的路径位置

当然了自然可以直接看路径位置

👉截图插件CodeSnap

CodeSnap插件

// 下载
打开VS Code，进入扩展页面，搜索“CodeSnap”并安装该插件。

// 使用
选中想要截图的代码片段

点击鼠标右键，选择“CodeSnap”选项。

代码截图出现在页面右边

====保存这张截图到本地目录，点击代码截图上方的彩虹色圈圈，保存
====想复制截图到剪贴板，可以直接点击截图后使用快捷键Ctrl+C复制

案例图片：
在这里插入图片描述

👉识别tailwindcss样式

Tailwind CSS IntelliSense

👉语言插件Language Pack for Visual Studio Code

Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code

👉插件代码格式化Code formatter

解析代码并使用自己的规则(考虑到最大行长度)重新打印代码，并在必要时包装代码，从而实现一致的风格

👉自动补全标签

Auto Close Tag 自动补全标签 必备
Auto Rename Tag 修改标签名 自动同步修改闭合标签的标签名

👉Git History

git查看历史插件

👉LeetCode

力扣刷算法题的插件

👉自动补全代码插件

🍉 aiXcoder

自动补全代码插件

🍉 Kite

自动补全代码插件

🍉Codeium

AI智能代码提示生成

Ⅳ Ai代码插件 🍓

👉百度comate

https://comate.baidu.com/zh/shopping?inviteCode=fkzlak8f

👉CodeGeex

👉GitHub Copilot 安装 （收费-学生邮箱免费）

（1）打开 VSCode扩展  Cmd+Shift+X（在 macOS 上）
（2）在搜索框中输入 "GitHub Copilot"
（3）安装

在这里插入图片描述

点击右下角进行登陆

在这里插入图片描述

按照提示登陆

在这里插入图片描述

👉Codeium

Ⅴ其他配置🍓

🌟 配置vue3

（2024-08-14） 官方最新采用的插件为（vue推荐用: Vue - Official）

安装完成以后打开ts文件发现
我按照提示改安装了这个最新版的插件但是报红，最后没办法直接在设置里将ts校验去掉了，就不报红了
直接在设置里面查找validate
然后去掉这个TS的警告
在这里插入图片描述

🌟React配置

Ⅵ 开发环境配置🍓

code配置文件(.vscode/extensions.json)

在vscode之中下面有个extensions.json 配置文件

作用
在 VS Code 中，.vscode/extensions.json 文件用于管理工作区的推荐扩展列表。它的作用主要有两个方面：

推荐扩展列表管理： 这个文件允许你定义推荐的 VS Code 扩展，以便于团队成员或者工作区用户可以快速获得推荐的扩展。在 extensions.json 中，你可以列出扩展的标识符（identifier），VS Code 会在用户打开工作区时提供这些推荐扩展的安装建议。

扩展版本约束： 可以在 extensions.json 中为每个扩展指定一个版本约束。这样做可以确保团队成员或者工作区用户安装的扩展版本是一致的，从而避免因为扩展版本不同而引起的兼容性问题。

举例来说，一个典型的 extensions.json 文件可能如下所示：

{
  "recommendations": [
    "ms-python.python",
    "esbenp.prettier-vscode"
  ],
  "unwantedRecommendations": [
    "ms-vscode.vscode-typescript-tslint-plugin"
  ],
  "extensionPack": [
    "vscjava.vscode-java-pack"
  ],
  "extensionKind": {
    "mlworkflow": [
      "ms-toolsai.vscode-ai"
    ]
  },
  "disableWorkspaceRecommendations": true
}

vscode配置C语言环境

windows安装和配置c环境

VSCode毕竟是一个高级的编辑器，只能用来写C/C++代码，不能直接编译代码。
所以，如果我们要能使用VSCode搭建C/C++的编译和调试环境，还必须有编译器使用。

使用MinGw-w64 ，MinGw-w64移植到windows平台的一个gcc编译器，使用起来也是非常方便的。
下面我们就演示怎么下载和配置MinGw-w64。
① 下载和配置MinGw-w64编译器套件

下载地址

点击进入下载
在这里插入图片描述
② 解压后放到D盘下：
在这里插入图片描述

③ 配置环境变量

在这里插入图片描述
检测安装
cmd进入

gcc --version

在这里插入图片描述
④ code安装 C/C++安装包

在这里插入图片描述
安装运行插件
在这里插入图片描述

⑤ 设置C/C++编译的选项: c_cpp_properties.json

运行
在这里插入图片描述

在这里插入图片描述

Mac安装C环境

1、安装x-code编辑器（目的是有gcc环境）
这个最快最方便
配置电脑运行c需要的gcc

xcode-select --install

安装成功以后检测是否安装成功！

gcc -v

2、Vsocde插件安装

C/C++ Clang Command Adapter
C/C++ 
C/C++ Themes
C/C++ Extension Pack

2、 配置c环境
在这里插入图片描述

（快捷键 ctrl+shift+p）搜索「C/C++: 编辑配置(UI)」

然后直接可以在运行那里使用 GCC 编译器进行编译
在这里插入图片描述
然后直接在调试控制台里面就可以直接看到效果！

环境配置问题

需要的编译器mingw 地址
https://github.com/niXman/mingw-builds-binaries/releases
https://sourceforge.net/projects/mingw-w64/files/
在这里插入图片描述

配置的类型“cppdbg”不受支持

更新一下vscode。或者关闭重新打开就好了
在这里插入图片描述

————————————————

Ⅶ、版本新功能🍓

👉2024年夜枭之光

全称为
Theme: Night Owl Light (preview on vscode.dev)

Markdown 图片链接可以直接显示了

Ⅷ、问题处理🍓

👉 VSCode菜单栏不见了

使用快捷键Ctrl+Shift+P调出VSCode的执行命令的输入框

输入命令view:toggle menu bar

上头的菜单栏又重新回来了

👉任务栏图标不显示怎么办🌟

实测：最简单直接的方法，找到VScode，然后右键，创建快捷方式，然后把它移动到桌面上
​

👉快捷键格式化时候标签不换行🌟

使用快捷代码格式时经常会遇到标签换行，处理方式如下

打开vscode的 >文件 > 首选项 >设置>工作台>外观>打开setting.json文件对vscode进行配置

 "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
        "wrap_attributes": "auto"
      },
    }

如下图
在这里插入图片描述
重新：shift+alt+f 搞定收工

👉用VSCode打开TXT文件显示乱码

因为txt文件采用gb232的编码格式，VSCode打开文件采用的是utf-8编码，编码不一致就导致了乱码。
第一种解决方法是点击VSCode右下角的UTF-8按钮，弹出框中选择“通过重新编码打开”即可。
在这里插入图片描述

点击“通过编码重新打开”后，可以看到其他各类编码，进行选择。
在这里插入图片描述

然后VSCode刷新后字符编码正常了。此时右下角编码指示器以变化，此时修改保存文件也都是按照此编码。
第二种方法点击文件->首选项->设置，然后在右边用户设置输入：

<strong>"files.autoGuessEncoding": true,</strong>

插入这一行内容并保存。
在这里插入图片描述

加入这个设置后，VSCode会在打开文件时尝试猜测字符集编码。无需自己选择编码即可切换到一个正确的编码。

Ⅸ🍓报错处理

👉无法加载文件 D:\nodejs\yarn.ps1，因为在此系统中禁止执行脚本。有关详细信息，请参阅 “get-help about_signing“

vscode执行命令行报：使用yarn报错 无法加载文件 D:\nodejs\yarn.ps1，因为在此系统中禁止执行脚本。有关详细信息，请参阅 “get-help about_signing“。

原因： 关于报错：无法加载文件 D:\node\node_global\yarn.ps1，因为在此系统上禁止运行脚本的问题

这个是需要给vscode授权全局权限，否则无法操作命令
1.右键VSCode图标，在属性中选择兼容性，再选择以管理员身份运行此程序。
2.打开VSCode，打开终端。

输入命令1
get-ExecutionPolicy
返回Restricted

输入命令2
set-ExecutionPolicy RemoteSigned

输入命令3
get-ExecutionPolicy
返回RemoteSigned
————————————————

在这里插入图片描述

Visual Studio Code (VSCode)，快速跳转到指定行的代码
小秋 AI SLAM 入门实战教程
11-28 5459
这个方法非常高效，特别是在处理大型文件时，能快速定位到你感兴趣的部分。
python for vscode和python的区别_vscode+python 使用的一些些感受
weixin_39640444的博客
12-21 3578
(一)编辑器选择。Pycharm Or Vscode，最终我还是坚持用了Vscode。vscode ：更好看，UI、字体等整体给人感觉要好看。vscode更轻量化，软件大小200+M，比pycharm小多了。响应更快，打开vscode几秒钟，打开pycharm 至少30s，而且在Linux与win10 上使用pycharm简直卡爆了(也可能是我机器不好)，曾经有几次卡死机的悲惨经历。事实上，vsc...
vscode跳转到指定行快捷键
学亮编程手记
03-09 4241
vscode跳转到指定行快捷键 ctrl + G
手把手教你在VSCode里开启中文模式（新手必看避坑指南）
最新发布
fluxcode的博客
04-26 3290
在.vscode文件夹新建"explorer": "文件管理器","debug": "捉虫模式"（适合想玩梗的极客，比如把Debug改成"捉虫"）
vscode快捷键：快速定位到某一行
听海边涛声
04-26 2418
vscode快捷键：快速定位到某一行
vscode的安装与使用
xiangxiao_bobo的专栏
08-04 461
vscode是目前前端开发使用比较广的一款软件，下面简单介绍一下其下载安装与使用。 一、下载软件地址：https://code.visualstudio.com/ 软件下载成功后傻瓜式安装即可，一般我会修改一下安装目录地址，尽量不要安装到C盘，你懂的！ 二、基础配置 （一）设置主题：在文件-->首选项-->颜色主题Light+（default light） （二）设置字体 (1) 文件--->首选项-->设置--搜ctrl ...
vsCode安装与使用【图文并茂】
m0_45463480的博客
05-03 4432
vsCode安装与使用【图文并茂】 第一章 C语言开发环境 vsCode（点击下载） Xcode（点击下载） QtCreator（点击下载） 第二章 vsCode安装 安装部署cygwin 安装C/C++插件 下载C/C++离线插件包 安装部署make vsCode其他可选配置
VSCode安装配置与开发调试（详细教程）
m0_37383484的博客
03-08 6593
VSCode安装配置与开发调试（详细教程）
Mac配置VScode
NickDeCodes的博客
02-22 1313
Mac配置vscode
mac上VScode如何配置C++使用（方法出自于官网，很傻瓜，也很明白）
小诺的博客
12-30 2620
下面的方法基本是照抄官网的，只是翻译了一下，再加上一丢丢自己的备注。 本来不想麻烦的，因为VS code是很大众的编译器了，想着随便搜个教程，傻瓜式看着照搬就行了吧。结果不尽人意，排名靠前的试了试，都多少有问题，原理说的也不明白。最后还是自己去官网找了一下，英文看的不是很流利，但是非常傻瓜，使用方式，每一步的目的也都很清楚。 在VS code中使用Clang++的方法 在这篇指导中，你将学到如何在macOS系统中，使用Clang/LLVM的编译和调试器配置Visual Studio Code。 下面.
vscode server源码解析（一） - code server介绍
咻咻咻的博客
02-29 1956
code server作为成熟的远程开发解决方案之一，进一步拓展就可以架构Cloud IDE解决方案，本文带你了解一下这项产品
在浏览器中使用vscode（code server）
qq_42282217的博客
07-25 5196
vscode作为一个非常强大的IDE，虽然已经适配了linux，mac，但是还是不够，如果有了web端的，那么只要有了浏览器，我们就可以在任何设备上进行访问，今天文章的主题就是搭建一个基于vs code的web ide，当然不是自己去编写代码，而是站在巨人的肩膀上，用到的就是code server，它是基于vscode的一个开源项目，发布在github上（附上网址：code-server/github）。 接下来就说一下code server如何安装使用。 1.下载对应的压缩包 先通过ssh连接到lin
【VScode】如何使用快捷键定位到某行代码？
专注音频，高效工作，快乐生活！
11-22 1674
在工程出现问题或者警告的时候，常常要根据报错提示信息定位到对应的代码，这里介绍VScode的两个快捷键，用来帮助快速定位到对应的代码行。本文介绍一种方法，用来提高开发效率，供参考。
VSCode 的部署
weixin_63053154的博客
01-15 2611
望处雨收云断，凭栏悄悄，目送秋光。
VScode跳转指定文件、指定行
Coolzouwen的博客
12-01 2229
使用Command P跳转指定文件，指定行
【VSCode】安装与简单使用
一些笔记
05-26 5932
VSCode 安装与简单使用
vscode 跳转到指定的行数的快捷键
cvper's world !
07-17 7万+
  在工作中，尤其是容易产生错误的 js 代码，报错之后会提示有错误代码的位置，也就是在哪一行出问题了， 在vscode 编辑器中，可以使用快捷键 跳转到指定的行数：    快捷键： Ctrl + G ,然后在弹出的框中输入行数就可以了；   ...
VSCode安装和使用
huan
04-06 173
【代码】vscode 安装和使用。
最新VS Code安装详细教程及vs code配置
热门推荐
Python基础详解教程，让编程变得简单！
07-16 7万+
文中主要讲述VS Code与VS的区别及其下载网站，Windows、Linux、Mac的VS Code版本类型，VS Code安装程序的安装及安装选项设置，VS Code界面颜色、中文界面、自动保存、扩展(Extension)、运行(run)程序代码、Workspace、新标签页打开文件、Command Palette、卸载等配置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

林太白

感谢打赏，你必大富大贵之人！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值