VSCode进阶之路
VSCode进阶之路:从入门到高效率开发
🚀 Hey,朋友们好!还在为VSCode的海量功能感到眼花缭乱吗?咱们一起来解锁VSCode的超神技能吧!
开篇碎碎念 🎯
第一次用VSCode时,就像个闯入魔法世界的麻瓜,面对满屏的快捷键和命令面板一脸懵逼。经过摸爬滚打,终于从一个"记事本选手"进化成了"VSCode法师"。
今天,咱们一起突破VSCode的进阶之路!
第一关:从基础配置开始 ⚙️
1. 界面布局大改造
兄弟们,第一件事,我们得把VSCode打扮得漂漂亮亮的,不然写代码没心情啊!
{"workbench.colorTheme": "One Dark Pro","editor.fontSize": 14,"editor.fontFamily": "JetBrains Mono","editor.fontLigatures": true,"workbench.iconTheme": "material-icon-theme","editor.minimap.enabled": true,"editor.cursorSmoothCaretAnimation": true,"editor.smoothScrolling": true,"workbench.list.smoothScrolling": true
}
💡 小贴士:JetBrains Mono这个字体是我用过最舒服的编程字体,连字特性简直不要太赞!而且最近的更新增加了更多连字支持,代码看起来更加优雅。
2. 必装插件套餐
开发效率神器
- GitLens - Git可视化简直是神器,查看代码历史记录如翻书般轻松
- Auto Rename Tag - 前端开发必备,改标签爽到飞起
- ESLint + Prettier - 代码格式化双胞胎,代码风格统一不再是难题
- Remote - SSH - 远程开发从未如此简单,服务器开发像本地一样流畅
- Thunder Client - 接口测试的轻量级选择,比Postman启动快多了
前端开发必备
- CSS Peek - 直接从HTML跳转到CSS定义
- Color Highlight - 颜色代码直接显示对应的颜色
- Import Cost - 显示引入包的大小,优化性能必备
- JavaScript (ES6) code snippets - ES6代码片段
AI辅助编程
- GitHub Copilot - AI配对编程,提高编码效率
- Tabnine AI - 智能代码补全,学习你的编码风格
🎈 插件小贴士:别贪多!安装太多插件会影响VSCode的启动速度。建议根据实际开发需求安装,不用的及时禁用。
第二关:快捷键称霸天下 ⌨️
必记快捷键清单
| 快捷键 | 功能 | 使用场景和技巧 |
|---|---|---|
Ctrl + Shift + P | 命令面板 | 万能入口,记不住快捷键就用它 |
Ctrl + P | 文件快速跳转 | 大项目文件检索神器,支持模糊匹配 |
Alt + ↑/↓ | 行移动 | 代码重构时的效率神器 |
Ctrl + D | 多光标选择 | 批量修改必备技能 |
Ctrl + K + S | 保存所有文件 | 强迫症患者必备 |
Ctrl + Shift + L | 选择所有相同词 | 比替换更精确的批量修改 |
Ctrl + B | 侧边栏显示/隐藏 | 快速获得更多编码空间 |
高级快捷键技巧
-
组合技
Ctrl + L连续按:逐行选择Alt + Click:添加多个光标Ctrl + Shift + K:删除整行
-
自定义快捷键
{"key": "ctrl+alt+/","command": "editor.action.blockComment","when": "editorTextFocus && !editorReadonly"
}
🎮 练习建议:建一个专门的练习文件,每天花10分钟专门练习快捷键。一个月后,你会发现自己完全离不开这些快捷键了!
第三关:代码片段自动化 🤖
1. Vue3组件模板
{"Vue3 Template": {"prefix": "v3","body": ["<template>"," <div class=\"${1:component-name}\">"," $2"," </div>","</template>","","<script setup lang=\"ts\">","import { ref, onMounted } from 'vue'","","const props = defineProps<{"," ${3:propName}: ${4:string}","}>())","","const ${5:data} = ref(${6:null})","","onMounted(() => {"," $7","})","</script>","","<style scoped lang=\"scss\">",".${1:component-name} {"," $8","}","</style>"],"description": "Vue3 setup template with TypeScript"}
}
2. React组件模板
{"React Functional Component": {"prefix": "rfc","body": ["import React from 'react'","","interface ${1:${TM_FILENAME_BASE}}Props {"," ${2:prop}: ${3:type}","}","","export const ${1:${TM_FILENAME_BASE}} = ({ ${2:prop} }: ${1:${TM_FILENAME_BASE}}Props) => {"," return ("," <div>"," $4"," </div>"," )","}",""],"description": "React Functional Component with TypeScript"}
}
💡 进阶提示:代码片段还支持正则表达式和变量替换,可以实现更复杂的自动化。
第四关:工作区配置大法 🎯
多项目工作区配置
{"folders": [{"path": "frontend","name": "前端项目"},{"path": "backend","name": "后端服务"},{"path": "docs","name": "项目文档"}],"settings": {"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode","editor.formatOnSave": true,"editor.tabSize": 2},"[python]": {"editor.defaultFormatter": "ms-python.python","editor.formatOnSave": true,"editor.tabSize": 4},"[markdown]": {"editor.defaultFormatter": "yzhang.markdown-all-in-one","editor.formatOnSave": true}},"launch": {"configurations": [],"compounds": []}
}
项目特定设置
在项目根目录创建 .vscode/settings.json:
{"search.exclude": {"**/node_modules": true,"**/dist": true},"files.watcherExclude": {"**/node_modules/**": true,"**/dist/**": true},"editor.codeActionsOnSave": {"source.fixAll.eslint": true}
}
第五关:Debug不求人 🐛
1. 断点进阶技巧
- 条件断点:右键断点 → 编辑断点 → 设置条件
// 示例:当循环索引为5时触发断点
for(let i = 0; i < 10; i++) {if(someCondition) { // 设置条件:i === 5doSomething();}
}
- 日志点:右键行号 → 添加日志点
// 不用修改代码就能打印日志
getMessage() { // 添加日志点:'返回消息:{message}'return message;
}
2. Launch配置进阶
{"version": "0.2.0","configurations": [{"type": "node","request": "launch","name": "启动服务","program": "${workspaceFolder}/server.js","env": {"NODE_ENV": "development"},"preLaunchTask": "npm: build","postDebugTask": "notify-debug-finished"}]
}
第六关:Git集成玩法 🌳
1. 内置Git功能增强
{"git.enableSmartCommit": true,"git.confirmSync": false,"git.autofetch": true,"git.pruneOnFetch": true
}
2. GitLens进阶配置
{"gitlens.codeLens.enabled": true,"gitlens.currentLine.enabled": true,"gitlens.hovers.currentLine.over": "line","gitlens.statusBar.enabled": true
}
彩蛋:我的私藏技巧 🎁
1. 任务自动化
{"version": "2.0.0","tasks": [{"label": "开发环境启动","type": "shell","command": "npm run dev & npm run mock","problemMatcher": []},{"label": "部署流程","dependsOn": ["构建","测试","部署"],"group": {"kind": "build","isDefault": true}}]
}
2. 实用配置技巧
{// 自动保存"files.autoSave": "afterDelay","files.autoSaveDelay": 1000,// 编辑器优化"editor.bracketPairColorization.enabled": true,"editor.guides.bracketPairs": true,// 终端优化"terminal.integrated.defaultProfile.windows": "Git Bash","terminal.integrated.fontFamily": "MesloLGS NF",// 搜索优化"search.smartCase": true,"search.useGlobalIgnoreFiles": true
}
3. 终端集成技巧
- 配置集成终端:
{"terminal.integrated.profiles.windows": {"Git Bash": {"path": ["C:\\Program Files\\Git\\bin\\bash.exe"],"icon": "terminal-bash"}}
}
- 任务运行器配置:
{"version": "2.0.0","tasks": [{"label": "Monitor Changes","type": "shell","command": "watch","args": ["npm", "run", "test"],"group": "test","presentation": {"reveal": "always","panel": "new"}}]
}
总结一下 📝
VSCode就像一把瑞士军刀,关键是要用对方法。通过这篇教程的六大关卡,相信你已经掌握了:
- 基础配置优化
- 效率插件运用
- 快捷键进阶
- 代码片段自动化
- 工作区管理
- 调试技巧
- Git集成应用
记住,工具永远是提升效率的手段,而不是目的。持续学习和实践才是提升编程效率的王道!
下期预告 🔮
下一篇我们将深入探讨IDEA的独家秘籍,让Java开发效率再上新台阶!敬请期待!
🤝 交流时间:你有什么VSCode使用秘籍?欢迎在评论区分享!
如果觉得有帮助,别忘了点个赞哦!你的支持是我创作的最大动力!
相关文章:
VSCode进阶之路
VSCode进阶之路:从入门到高效率开发 🚀 Hey,朋友们好!还在为VSCode的海量功能感到眼花缭乱吗?咱们一起来解锁VSCode的超神技能吧! 开篇碎碎念 🎯 第一次用VSCode时,就像个闯入魔法世…...
leetcode-21-合并两个有序链表
题解: 1、初始化哑节点dum 2、 3、 代码: 参考:leetcode-88-合并两个有序数组...
SSM项目部署到服务器
将SSM(Spring Spring MVC MyBatis)项目部署到服务器上,通常需要以下步骤: 打包项目 生成一个WAR文件,通常位于target目录下 配置Tomcat: 将生成的WAR文件复制到Tomcat的webapps目录下。 配置conf/se…...
【Linux】网络编程:初识协议,序列化与反序列化——基于json串实现,网络通信计算器中简单协议的实现、手写序列化与反序列化
目录 一、什么是协议? 二、为什么需要有协议呢? 三、协议的应用 四、序列化与反序列化的引入 什么是序列化和反序列化? 为什么需要序列化和反序列化? 五、序列化推荐格式之一:JSON介绍 六、网络版计算器编程逻…...
Educational Codeforces Round 171 (Rated for Div. 2)(A~D) 题解
Problem - A - Codeforces--PerpendicularSegments 思路:正方形对角线最长,并且相互垂直.直接输出即可. int x,y,k; void solve(){ //Acin>>x>>y>>k;int resmin(x,y);cout<<"0 0"<<" "<<res<<" &q…...
【教程】Git 标准工作流
目录 前言建仓,拉仓,关联仓库修改代码更新本地仓库,并解决冲突提交代码,合入代码其他常用 Git 工作流删除本地仓库和远程仓库中的文件日志打印commit 相关 前言 Git 是日常开发中常用的版本控制工具,配合代码托管仓库…...
Nico,从零开始干掉Appium,移动端自动化测试框架实现
开头先让我碎碎念一波~去年差不多时间发布了一篇《 UiAutomator Nico,一个基于纯 adb 命令实现的安卓自动化测试框》(https://testerhome.com/topics/37042), 由于种种原因 (详见此篇帖子) 当时选择了用纯 adb 命令来实现安卓自动…...
PHP合成图片,生成海报图,poster-editor使用说明
之前写过一篇使用Grafika插件生成海报图的文章,但是当我再次使用时,却发生了错误,回看Grafika文档,发现很久没更新了,不兼容新版的GD,所以改用了intervention/image插件来生成海报图。 但是后来需要对海报…...
微信小程序 - 数组 push / unshift 追加后数组返回内容为数字(数组添加后打印结果为 Number 数值类型)
前言 假设一个空数组,通过 push 方法追加了一个项,控制台打印的结果竟然是 Number 数值。 例如,以下微信小程序代码: // 源数组 var arr = [] // 追加数据 var tem = arr.push(数据)...
1、DevEco Studio 鸿蒙仓颉应用创建
1. 仓颉鸿蒙应用简介 因为仓颉是静态编译型语言,使用仓颉开发的应用执行效率更高。而且主打全场景,后续可并入仓颉生态,其和ArkTS都是基于ArkUI进行开发,最大的区别是typescript和仓颉语法间的差异。 2. 应用创建 前置条件&…...
从头开始学PHP之面向对象
首先介绍下最近情况,因为最近入职了且通勤距离较远,导致精力不够了,而且我发现,人一旦上了班,下班之后就不想再进行任何脑力劳动了(对大部分牛马来说,精英除外)。 话不多说进入今天的…...
C++ | Leetcode C++题解之第519题随机翻转矩阵
题目: 题解: class Solution { public:Solution(int m, int n) {this->m m;this->n n;this->total m * n;srand(time(nullptr));}vector<int> flip() {int x rand() % total;vector<int> ans;total--; // 查找位置 x 对应的…...
vrrp和mstp区别
思路 vrrp是用来虚拟网关,噢,是虚拟一条虚拟网关 优先级,priority越大越优先,优先级相同,哪个的路由器的vrrp先起来,谁就是主 mstp是快速生成树协议,防止环路用的 优先级越小越优先 华为命令…...
前端页面整屏滚动fullpage.js简单使用
官网CSS,JS地址 fullPage.js/dist/fullpage.min.js at master alvarotrigo/fullPage.js GitHub fullPage.js/dist/fullpage.min.css at master alvarotrigo/fullPage.js GitHub <!DOCTYPE html> <html lang"en"><head><meta charset"…...
JQuery基本介绍和使用方法
JQuery基本介绍和使用方法 W3C 标准给我们提供了⼀系列的函数, 让我们可以操作: ⽹⻚内容⽹⻚结构⽹⻚样式 但是原⽣的JavaScript提供的API操作DOM元素时, 代码⽐较繁琐, 冗⻓. 我们可以使⽤JQuery来操作⻚⾯对象. jQuery是⼀个快速、简洁且功能丰富的JavaScript框架, 于20…...
【案例】旗帜飘动
开发平台:Unity 6.0 开发工具:Shader Graph 参考视频:Unity Shader Graph 旗帜飘动特效 一、效果图 二、Shader Graph 路线图 三、案例分析 核心思路:顶点偏移计算 与 顶点偏移忽略 3.1 纹理偏移 视觉上让旗帜保持动态飘动&a…...
大模型思维链推理的综述:进展、前沿和未来
转自公众号AIRoobt A Survey of Chain of Thought Reasoning: Advances, Frontiers and Future 思维链推理的综述:进展、前沿和未来 摘要:思维链推理,作为人类智能的基本认知过程,在人工智能和自然语言处理领域引起了极大的关注…...
项目一:使用 Spring + SpringMVC + Mybatis + lombok 实现网络五子棋
一:系统展示: 二:约定前后端接口 2.1 登陆 登陆请求: GET /login HTTP/1.1 Content-Type: application/x-www-form-urlencodedusernamezhangsan&password123登陆响应: 正常对象:正常对象会在数据库中存储&…...
openEuler 系统中 Samba 文件共享服务器管理(windows、linux文件共享操作方法)
一、Samba 简介 Samba 是在 Linux 和 Unix 系统上实现 SMB/CIFS 协议的一个免费软件,使得这些系统可以与 Windows 系统进行文件和打印机共享。通过 Samba,可以将 openEuler 系统配置为文件服务器,让 Windows、Linux 和其他支持 SMB/CIFS 协议…...
使用 Elasticsearch 进行语义搜索
Elasticsearch 是一款功能强大的开源搜索引擎,可用于全文搜索、分析和数据可视化。传统上,Elasticsearch 以其执行基于关键字/词汇的搜索的能力而闻名,其中文档基于精确或部分关键字匹配进行匹配。然而,Elasticsearch 已经发展到支…...
Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例
使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件,常用于在两个集合之间进行数据转移,如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model:绑定右侧列表的值&…...
前端导出带有合并单元格的列表
// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...
Golang dig框架与GraphQL的完美结合
将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用,可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器,能够帮助开发者更好地管理复杂的依赖关系,而 GraphQL 则是一种用于 API 的查询语言,能够提…...
全球首个30米分辨率湿地数据集(2000—2022)
数据简介 今天我们分享的数据是全球30米分辨率湿地数据集,包含8种湿地亚类,该数据以0.5X0.5的瓦片存储,我们整理了所有属于中国的瓦片名称与其对应省份,方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...
在Ubuntu中设置开机自动运行(sudo)指令的指南
在Ubuntu系统中,有时需要在系统启动时自动执行某些命令,特别是需要 sudo权限的指令。为了实现这一功能,可以使用多种方法,包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法,并提供…...
Unit 1 深度强化学习简介
Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库,例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体,比如 SnowballFight、Huggy the Do…...
OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别
OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...
全志A40i android7.1 调试信息打印串口由uart0改为uart3
一,概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本:2014.07; Kernel版本:Linux-3.10; 二,Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01),并让boo…...
稳定币的深度剖析与展望
一、引言 在当今数字化浪潮席卷全球的时代,加密货币作为一种新兴的金融现象,正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而,加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下,稳定…...
保姆级教程:在无网络无显卡的Windows电脑的vscode本地部署deepseek
文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama(有网络的电脑)2.2.3 安装Ollama(无网络的电脑)2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...
