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 已经发展到支…...
MPNet:旋转机械轻量化故障诊断模型详解python代码复现
目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...
从WWDC看苹果产品发展的规律
WWDC 是苹果公司一年一度面向全球开发者的盛会,其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具,对过去十年 WWDC 主题演讲内容进行了系统化分析,形成了这份…...
《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》
引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...
Admin.Net中的消息通信SignalR解释
定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...
Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)
目录 1.TCP的连接管理机制(1)三次握手①握手过程②对握手过程的理解 (2)四次挥手(3)握手和挥手的触发(4)状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...
渲染学进阶内容——模型
最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...
在Ubuntu中设置开机自动运行(sudo)指令的指南
在Ubuntu系统中,有时需要在系统启动时自动执行某些命令,特别是需要 sudo权限的指令。为了实现这一功能,可以使用多种方法,包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法,并提供…...
自然语言处理——循环神经网络
自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元(GRU)长短期记忆神经网络(LSTM)…...
PAN/FPN
import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...
【分享】推荐一些办公小工具
1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由:大部分的转换软件需要收费,要么功能不齐全,而开会员又用不了几次浪费钱,借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...
