VScode配置快捷快速填充代码安装配置和使用(详细-Windows和Mac)

这篇具有很好参考价值的文章主要介绍了VScode配置快捷快速填充代码安装配置和使用(详细-Windows和Mac)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

❤ VScode安装、vscode安装配置和使用(Windows和Mac)

一、下载安装

二、常见设置

1、vscode设置中文模式🌟

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

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

2、VSCode 菜单栏🌟

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

3、vscode任务栏图标不显示怎么办🌟

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

4、设置自动换行🌟

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

5、vscode快捷键格式化时候标签不换行🌟

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

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

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

如下图
vscode设置快捷代码,电脑软硬件使用,vscode,ide,编辑器
重新:shift+alt+f 搞定收工

6、自定义代码:设置log得时候自动输出console.log()

  1. 打开命令面板(快捷键Ctrl+Shift+P或Cmd+Shift+P)
  2. 输入Configure User Snippets 命令
  3. 选择你需要的代码格式
    vscode设置快捷代码,电脑软硬件使用,vscode,ide,编辑器
    进入配置项
    vscode设置快捷代码,电脑软硬件使用,vscode,ide,编辑器
    放开console.log() 的配置项
    vscode设置快捷代码,电脑软硬件使用,vscode,ide,编辑器
    效果:
    vscode设置快捷代码,电脑软硬件使用,vscode,ide,编辑器
    配置成功!

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

vscode设置快捷代码,电脑软硬件使用,vscode,ide,编辑器

8、vscode配置快捷快速填充代码

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

vscode设置快捷代码,电脑软硬件使用,vscode,ide,编辑器

(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,ide,编辑器

三、配置VSCode插件推荐🌟

1、设置背景图片

(1)下载background-cover插件
(2)下载了插件以后,点击vscode右下方按钮,然后选择背景图,重启vscode即可

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

  • 效果图

2、美化代码颜色 Bracket Pair Colorizer(最新code已经内置)

vscode设置快捷代码,电脑软硬件使用,vscode,ide,编辑器

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

3、美化注释代码 Better Comment

vscode设置快捷代码,电脑软硬件使用,vscode,ide,编辑器
Better Comment就是在视觉上方便对不同类型的注释进行标记的插件
vscode设置快捷代码,电脑软硬件使用,vscode,ide,编辑器

4、VScode使用分屏浏览器

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

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

vscode设置快捷代码,电脑软硬件使用,vscode,ide,编辑器
vscode设置快捷代码,电脑软硬件使用,vscode,ide,编辑器

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

5、code 识别Vue文件

插件 Vetur

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

插件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

力扣刷算法题的插件

Image preview

图片预览插件 (非必需)

自动补全代码插件

aiXcoder

自动补全代码插件

Kite

自动补全代码插件

Codeium

AI智能代码提示生成插

Ai代码插件

GitHub Copilot 安装 (收费-学生邮箱免费)

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

vscode设置快捷代码,电脑软硬件使用,vscode,ide,编辑器

点击右下角进行登陆

vscode设置快捷代码,电脑软硬件使用,vscode,ide,编辑器

按照提示登陆

vscode设置快捷代码,电脑软硬件使用,vscode,ide,编辑器

Codeium

四、环境配置

vscode配置C语言环境

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

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

下载地址

点击进入下载
vscode设置快捷代码,电脑软硬件使用,vscode,ide,编辑器
② 解压后放到D盘下:
vscode设置快捷代码,电脑软硬件使用,vscode,ide,编辑器

③ 配置环境变量

vscode设置快捷代码,电脑软硬件使用,vscode,ide,编辑器
检测安装
cmd进入

gcc --version

vscode设置快捷代码,电脑软硬件使用,vscode,ide,编辑器
④ code安装 C/C++安装包

vscode设置快捷代码,电脑软硬件使用,vscode,ide,编辑器
安装运行插件
vscode设置快捷代码,电脑软硬件使用,vscode,ide,编辑器

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

运行
vscode设置快捷代码,电脑软硬件使用,vscode,ide,编辑器

vscode设置快捷代码,电脑软硬件使用,vscode,ide,编辑器

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

五、报错

(1)无法加载文件 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
————————————————

vscode设置快捷代码,电脑软硬件使用,vscode,ide,编辑器文章来源地址https://www.toymoban.com/news/detail-861271.html

到了这里,关于VScode配置快捷快速填充代码安装配置和使用(详细-Windows和Mac)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 3秒钟教你如何配置vscode中的vue3代码快速生成模版

    代码如下:  赶快去尝试吧!

    2024年02月09日
    浏览(14)
  • Ubuntu20.04安装配置gitlab及使用git管理代码超详细教程

    目录 简介 安装教程 安装gitlab 配置Gitlab  登录gitlab  gitlab内存优化  创建用户  创建群组 添加成员进群组 管理群组成员权限   创建项目 分支管理  使用git bash工具 下载git bash 上传代码 使用sourceTree工具创建分支 提交分支 gitlab服务器邮箱的配置(可选) 今日推荐  GitLab是

    2024年02月21日
    浏览(18)
  • VSCode新手快速下载、安装、使用

    目录 下载 安装 1、许可协议 2、安装位置 3、开始菜单文件夹 4、附加任务 5、确认安装 6、完成 使用 1、汉化(设置中文界面) 2、设置 进入VSCode官方页面,选择自己系统对应的下载链接 VSCode默认提供的 User Installer版本。 但在实际开发中,考虑到对系统文件的管理难易 推荐

    2024年02月15日
    浏览(30)
  • VScode 代码对齐快捷键

      vscode代码对齐快捷键,选中要对齐的代码块,windows shift+alt+F  Mac Shift + Option + F. 效果如下:    

    2024年02月16日
    浏览(7)
  • vscode折叠代码展开快捷键

    1.折叠所有代码 (按住ctrl 分别点击k和0) ctrl+k,ctrl+0 2.展开所有代码 (按住ctrl 分别点击k和j) ctrl+k,ctrl+j 3. 折叠鼠标竖线所在位置的节点以及当前节点下的子节点(递归折叠) ctrl+k,ctrl+[ 4. 展开鼠标竖线所在位置的节点以及当前节点下的子节点(递归展开) ctrl+k,ctrl+] 5.折叠除所

    2024年02月11日
    浏览(20)
  • VSCode安装及环境配置详细教程(windows版本)

    目录 安装VSCode 安装Python 检查环境变量 检查Python是否能运行 VSCode环境配置 切换成简体中文 添加Python插件 编写代码运行 !!请先在官网下载Python和VSCode安装包,保存至本地 Python官网:https://www.python.org/downloads/ 根据自己的电脑系统选择相应的版本。    VS Code官网:Download

    2024年02月13日
    浏览(20)
  • 【代码阅读软件】VSCode最新版本 下载、安装、配置

    VSCode 全称是 Visual Studio Code,是一款免费且开源的现代化代码编辑器,几乎支持所有主流开发语言的语法高亮、智能代码补全、代码片段提示、自定义快捷键等。 VSCode的特点包括: 轻量级:VSCode的安装包非常小,启动速度也很快,占用内存较少,因此非常适合在低配置电脑上

    2024年02月11日
    浏览(30)
  • vscode copilot快捷键、配置方法

    参考文章1:GitHub Copilot 参考文章2:在 Visual Studio Code 中开始使用 GitHub Copilot 参考文章3:在 Visual Studio Code 中配置 GitHub Copilot 接受内联代码建议 Tab (editor.action.inlineSuggest.commit) 忽略内联代码建议 Esc (editor.action.inlineSuggest.hide) 显示下一个建议 Alt + ] (editor.action.inlineSugg

    2024年02月09日
    浏览(26)
  • Mac对Vscode代码注释快捷键(单行//,多行/**/)

    单行注释 command+/ 多行注释 option+shift+A 取消注释同理,在执行一遍同样的快捷键

    2024年04月24日
    浏览(12)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包