VScode常用插件

本文介绍了如何利用VSCode的snippets插件管理和创建代码模板,减少重复劳动,提升编程效率。涵盖了snippet的基本概念、使用方法、自定义snippets的步骤以及snippets文件的属性解析。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

记录一下自己常用的插件,方便更换环境后快速搭建环境
tag:后端向

快速编码

不管你使用何种编程语言,在我们日常的编码工作中,都会存在大量的重复代码编写,例如:

  • 日志打印: console.log,log.info(’…’)
  • 输出到控制台:System.out.println("…"), fmt.Println("…")
  • 循环:switch(…){},for(i := 0, i <= len, i++),for…i 等等

这种模板代码在 java,go 中静态语言会比较多,实际上,平时除了 模板代码,还有很多模板文件,也是存在很多重复编码的工作,例如:vue文件,html文件,xml文件,里面的很多标签,方法,属性基本都是固定的,我平时遇到比较多的还是 java,go 里面的模板文件和代码,关于重复代码不胜枚举,这里就不过多概述了。

写这些模板代码和模板文件,实际上除了练习你的打字速度外,不会给你带来任何技能上的提升,是属于 重复而且低价值的事情,比如就算你把 “hello world” 练习一千遍,你也不会成为高手一样,

那么作为一个高效的程序员,要懂利用如何节省自己的时间,把有限的精力投资在高价值,高回报的事情上,对于这些无法逃避的重复的编码工作,我们需要用技术和工具来把他们解决就好。

代码模板插件-snippets

而 VSCode 提供的 user snippets 用户代码段(在 jetbrains 家族中也称为 Live templates )就是这样一个优秀的,能把这个事情做好的插件。

使用方法

代码段是一种模板,可以更容易地输入重复的代码模式,例如循环或条件语句

使用 snippeets 代码段对 javascript 中的 ajax 的重复代码进行封装,只需要输入关键字:ajax,就可以把整个代码段带出来,非常的高效。

VSCode 对于每种语言都有默认初始化的 snippets,能够满足日常的使用,在 VSCode 打开命令行界面输入:insert snippets 即可查看当前可以用的 snippets

默认的 snippets,通常相关联的语言工具包都内置的大量常用的 snippets,我们通常只要安装即可。

在 VSCode 的扩展使用:@category:snippets 过滤搜索安装对应的工具即可

创建你自己的 snippets

在 VSCode 中创建 snippets 是非常简单的事情(无需安装任何扩展),有两种方法实现:

在 macOS 中选择:Code -> Preferencts -> User Snippets 选项
或者在 VSCode Command 中输入:configure user snippets 即可
如果是创建 snipperts 选择 选择 New Global Snippets file ,输入你要创面的 snipperts name 即可进入配置

snipperts 文件

文件是 JSON 风格,刚创建后的默认格式内容如下:
在这里插入图片描述

属性的作用介绍

  • scope:限定代码段的作用域,例如 go 语言的代码段不会出现在 js 中,反之亦然
  • prefix:是快捷关键字,当 VSCode 检测到代码中出现 prefix 关键字就会在编辑器中替换为 body 的内容
  • body:是重复的代码模板内容,通常是程序员想要自动化的一些重复,模板代码,录入在这里
  • description:顾名思义就是对这段 snippets 的具体描述
    这里值得再提一下的就是, body 里面的 $1 关键字是模板代码替换后鼠标光标的所在位置,当出现多个 $1,$2 的时候,可以通过键盘 TAB 按键快速切换鼠标光标所在位置,用于提高效率,这块就不具体深入描述了,有兴趣的小伙伴可以自行去探索。

关于 snipperts 配置文件的细节还有很多,这里就不深究了,

有兴趣深入研究的伙伴可以 VSCode Snippets 官方的相关的文档,里面解释的非常详细。

### VSCode 常用插件推荐 以下是针对开发人员常用的几类功能所整理的 VSCode 插件推荐: #### 浏览器预览工具 对于前端开发者来说,在浏览器中实时查看 HTML 文件的效果是非常重要的。可以通过安装 **Live Server** 或者类似的插件来实现这一需求。这类插件允许通过快捷键或者鼠标右键操作快速在默认或自定义浏览器中打开 HTML 文件,支持多种主流浏览器,例如 Firefox、Chrome、Opera、IE 和 Safari [^1]。 #### 书签管理工具 为了提高代码编辑效率,可以使用 Bookmarks 插件标记重要位置并快速导航至这些标记处。具体配置方法如下:按下 `F1` 键调出命令面板,输入 `[打开键盘快捷方式]` 进入设置界面;随后可调整添加/删除标签以及跳转至上一/下一标签的相关快捷键组合。例如,将 PgUp 设置为跳转到上一个标签,PgDn 跳转到下一个标签,Ctrl+T 添加或移除标签 [^2]。 #### 中文化支持 如果希望让 VSCode 的菜单栏显示中文语言,则需执行以下步骤完成切换:按住 `Ctrl+Shift+P` 打开指令输入框,接着输入 `Configure Display Language` 并回车确认;之后从下拉列表里挑选目标语言包(如 zh-cn),最后按照提示点击重启按钮即可生效 [^3]。 此外还有其他一些非常实用但未提及于上述引用中的扩展程序也值得考虑加入日常工作中: - **Bracket Pair Colorizer**: 自动给匹配的大括号着色以便更容易识别嵌套结构。 - **ESLint / Prettier - Code formatter**: 配合 JavaScript (JSX), TypeScript, Vue.js 等项目进行静态分析和自动格式化处理。 - **GitLens — Git supercharged**: 提升版本控制体验,提供更深入的历史记录视图等功能。 ```javascript // 示例 ESLint 配置文件 .eslintrc.json 内容片段展示如何启用规则 { "rules": { "indent": ["error", 4], "quotes": ["error", "double"], "semi": ["error", "always"] } } ``` 以上列举了一些常见的 Visual Studio Code 插件及其用途介绍,实际应用过程中可根据个人偏好和技术栈特点灵活选用适合自己的辅助工具集。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值