vscode book

 

vs常用插件

星级	图标	插件名	介绍链接
*****		TabOut	让tab能跳出括号 引号
*****		Eclipse Keymap	使用eclipse的快捷键
*****		Open in browser	使用Alt + B 直接运行html
**		vetur	vue 代码提示插件
*		Vue 3 Snippets	vue3 代码提示插件(包含Vue 2 Snippets)
*		Vue VSCode Snippets	代码提示插件 , 最常用的是 v3 提示
*****		TypeScript Vue Plugin (Volar)	功能之一 ref.value 省略插件
****		Vue - Official	vue language Feature(Volar) 已改名为Vue - Official，安装即可
*****		Auto Rename Tag	头尾标签自动一起变更的插件
**		vite	直接在vscode中看到前端展示页面
*****		Debugger for Chrome	chrome已集成自己的调试,该插件已弃用
****		Live Server	启用本地服务供静态或动态页面调用
*		Live Server Preview	在vscode内部直接查看Liver Server启动后的页面效果, 不能输出console , 如果要查看打印值, 建议输出到div或textarea中
****		Rest Client	http请求工具 (选中某一块区域后Ctrl + Alt + R 运行 , 之后一直按那块区域执行, 除非选中新的区域)
*		code runner	codeVsCode中运行nodeJs代码的简单方法==>https://www.cnblogs.com/doit8791/p/8191065.html
		Bracket Pair Colorizer	Bracket Pair Colorizer1和2不再维护？==>https://zhuanlan.zhihu.com/p/448884951
*		prettier (我没用）	使用prettier工具规范代码==》https://www.jianshu.com/p/3dd65358c7e5
*****		CodeGeeX	CodeGeeX是一款基于大模型的智能编程助手，它可以实现代码的生成与补全，自动为代码添加注释，不同编程语言的代码间实现互译，针对技术和代码问题的智能问答，当然还包括代码解释，生成单元测试，实现代码审查，修复代码bug等非常丰富的功能。 https://marketplace.visualstudio.com/items?itemName=aminer.codegeex 快捷键 Alt + Y

 

 

 

vscode plugin 插件离线下载

• 下载地址  https://marketplace.visualstudio.com/vscode
• 插件放到bin目录 
• 在bin目录执行命令安装 code --install-extension tabout.vsix

参考链接 简单的 VSCode 插件离线安装方法==>https://blog.csdn.net/qq_40963664/article/details/81938468

 

国内可用的插件在线地址

https://chrome.zzzmh.cn/search/vue

 

 

其它插件推荐

24 款神级插件，让你的 vscode 更牛逼！==>https://zhuanlan.zhihu.com/p/449227753

 

vscode自带 npm 脚本运行工具

Npm Scripts View

Ctrl + Shift + P | 输入 Npm Scripts View | 打开 Npm Scripts View | 双击某个选项即可直接运行

   

 

常用 General

按 Press	功能 Function
Ctrl + Shift + P，F1	显示命令面板 Show Command Palette
Ctrl + P	快速打开 Quick Open
Ctrl + Shift + N	新窗口/实例 New window/instance
Ctrl + Shift + W	关闭窗口/实例 Close window/instance

基础编辑 Basic editing

按 Press	功能 Function	换成eclipse风格
Ctrl + Space	代码提示	Alt + /
Ctrl+X	剪切行（空选定） Cut line (empty selection)
Ctrl+C	复制行（空选定）Copy line (empty selection)
Alt+ ↑ / ↓	向上/向下移动行 Move line up/down
Shift+Alt + ↑	向外扩选 , 超级有用, 免去肉眼上下翻飞的痛苦
Shift+Alt + ↓	向上/向下复制行 Copy line up/down	ctrl + alt + ↓ / ↑
Ctrl+Shift+K	删除行 Delete line
Ctrl+Enter	在下面插入行 Insert line below	Shift + Enter
Ctrl+Shift+Enter	在上面插入行 Insert line above
Ctrl+Shift+\	跳到匹配的括号 Jump to matching bracket
Ctrl+] / [	缩进/缩进行 Indent/outdent line
Home	转到行首 Go to beginning of line
End	转到行尾 Go to end of line
Ctrl+Home	转到文件开头 Go to beginning of file
Ctrl+End	转到文件末尾 Go to end of file
Ctrl+↑ / ↓	向上/向下滚动行 Scroll line up/down
Alt+PgUp / PgDown	向上/向下滚动页面 Scroll page up/down
Ctrl+Shift+[	折叠（折叠）区域 Fold (collapse) region
Ctrl+Shift+]	展开（未折叠）区域 Unfold (uncollapse) region
Ctrl+K Ctrl+[	折叠（未折叠）所有子区域 Fold (collapse) all subregions
Ctrl+K Ctrl+]	展开（未折叠）所有子区域 Unfold (uncollapse) all subregions
Ctrl+K Ctrl+0	折叠（折叠）所有区域 Fold (collapse) all regions
Ctrl+K Ctrl+J	展开（未折叠）所有区域 Unfold (uncollapse) all regions
Ctrl+K Ctrl+C	添加行注释 Add line comment
Ctrl+K Ctrl+U	删除行注释 Remove line comment
Ctrl+/	切换行注释 Toggle line comment
Ctrl + \	分割编辑器到右侧
Shift+Alt+A	切换块注释 Toggle block comment
Alt+Z	切换换行 Toggle word wrap

导航 Navigation

按 Press	功能 Function
Ctrl + T	显示所有符号 Show all Symbols
Ctrl + G	转到行... Go to Line...
Ctrl + P	转到文件... Go to File...
Ctrl + Shift + O	转到符号... Go to Symbol...
Ctrl + Shift + M	显示问题面板 Show Problems panel
F8	转到下一个错误或警告 Go to next error or warning
Shift + F8	转到上一个错误或警告 Go to previous error or warning
Ctrl + Shift + Tab	导航编辑器组历史记录 Navigate editor group history
Alt + ←/→	返回/前进 Go back / forward
Ctrl + M	切换选项卡移动焦点 Toggle Tab moves focus

搜索和替换 Search and replace

按 Press	功能 Function
Ctrl + F	查找 Find
Ctrl + H	替换 Replace
F3 / Shift + F3	查找下一个/上一个 Find next/previous
Alt + Enter	选择查找匹配的所有出现 Select all occurences of Find match
Ctrl + D	将选择添加到下一个查找匹配 Add selection to next Find match
Ctrl + K Ctrl + D	将最后一个选择移至下一个查找匹配项 Move last selection to next Find match
Alt + C / R / W	切换区分大小写/正则表达式/整个词 Toggle case-sensitive / regex / whole word

多光标和选择 Multi-cursor and selection

按 Press	功能 Function	额外说明
Alt +单击	插入光标 Insert cursor
Alt + 连续选择各行内容	连续选择各行内容, 可以同时选中各种内容, 然后复制到其它地方
Ctrl + Alt +↑/↓	在上/下插入光标 Insert cursor above / below
Ctrl + U	撤消上一个光标操作 Undo last cursor operation
Shift + Alt + I	在选定的每一行的末尾插入光标 Insert cursor at end of each line selected
Ctrl + I	选择当前行 Select current line
Ctrl + Shift + L	选择当前选择的所有出现 Select all occurrences of current selection	相当于replaceAll()功能
Ctrl + F2	选择当前字的所有出现 Select all occurrences of current word
Shift + Alt + →	展开选择 Expand selection
Shift + Alt + ←	缩小选择 Shrink selection
Shift + Alt + （拖动鼠标）	列（框）选择 Column (box) selection
Ctrl + Shift + Alt +（箭头键）	列（框）选择 Column (box) selection
Ctrl + Shift + Alt + PgUp / PgDown	列（框）选择页上/下 Column (box) selection page up/down

丰富的语言编辑 Rich languages editing

按 Press	功能 Function
Ctrl + 空格	触发建议 Trigger suggestion
Ctrl + Shift + Space	触发器参数提示 Trigger parameter hints
Tab	Emmet 展开缩写 Emmet expand abbreviation
Shift + Alt + F	格式化文档 Format document
Ctrl + K Ctrl + F	格式选定区域 Format selection
F12	转到定义 Go to Definition
Alt + F12	Peek定义 Peek Definition
Ctrl + K F12	打开定义到边 Open Definition to the side
Ctrl + .	快速解决 Quick Fix
Shift + F12	显示引用 Show References
F2	重命名符号 Rename Symbol
Ctrl + K Ctrl + X	修剪尾随空格 Trim trailing whitespace
Ctrl + K M	更改文件语言 Change file language

编辑器管理 Editor management

按 Press	功能 Function
Ctrl+F4, Ctrl+W	关闭编辑器 Close editor
Ctrl+K F	关闭文件夹 Close folder
Ctrl+\	拆分编辑器 Split editor
Ctrl+ 1 / 2 / 3	聚焦到第1，第2或第3编辑器组 Focus into 1st, 2nd or 3rd editor group
Ctrl+K Ctrl+ ←/→	聚焦到上一个/下一个编辑器组 Focus into previous/next editor group
Ctrl+Shift+PgUp / PgDown	向左/向右移动编辑器 Move editor left/right
Ctrl+K ← / →	移动活动编辑器组 Move active editor group

文件管理 File management

按 Press	功能 Function
Ctrl+N	新文件 New File
Ctrl+O	打开文件... Open File...
Ctrl+S	保存 Save
Ctrl+Shift+S	另存为... Save As...
Ctrl+K S	全部保存 Save All
Ctrl+F4	关闭 Close
Ctrl+K Ctrl+W	关闭所有 Close All
Ctrl+Shift+T	重新打开关闭的编辑器 Reopen closed editor
Ctrl+K	输入保持打开 Enter Keep Open
Ctrl+Tab	打开下一个 Open next
Ctrl+Shift+Tab	打开上一个 Open previous
Ctrl+K P	复制活动文件的路径 Copy path of active file
Ctrl+K R	显示资源管理器中的活动文件 Reveal active file in Explorer
Ctrl+K O	显示新窗口/实例中的活动文件 Show active file in new window/instance

显示 Display

按 Press	功能 Function
F11	切换全屏 Toggle full screen
Shift+Alt+1	切换编辑器布局 Toggle editor layout
Ctrl+ = / -	放大/缩小 Zoom in/out
Ctrl+B	切换侧栏可见性 Toggle Sidebar visibility
Ctrl+Shift+E	显示浏览器/切换焦点 Show Explorer / Toggle focus
Ctrl+Shift+R	打开该文件所在资源管理器的文件夹
Ctrl+Shift+F	显示搜索 Show Search
Ctrl+Shift+G	显示Git Show Git
Ctrl+Shift+D	显示调试 Show Debug
Ctrl+Shift+X	显示扩展 Show Extensions
Ctrl+Shift+H	替换文件 Replace in files
Ctrl+Shift+J	切换搜索详细信息 Toggle Search details
Ctrl+Shift+C	打开新命令提示符/终端 Open new command prompt/terminal
Ctrl+Shift+U	显示输出面板 Show Output panel
Ctrl+Shift+V	切换Markdown预览 Toggle Markdown preview
Ctrl+K V	从旁边打开Markdown预览 Open Markdown preview to the side

调试 Debug

 

 

按 Press	功能 Function	额外说明	英文名
F9	切换断点 Toggle breakpoint
F5	开始/继续 Start/Continue
Shift+F5	停止 Stop
F11 / Shift+F11	下一步/上一步 Step into/out
F10	跳过 Step over
Ctrl+K Ctrl+I	显示悬停 Show hover
CTRL+SHIFT+I	查看并计算 选中区域	完全自定义	Debug:evaluate

集成终端 Integrated terminal

按 Press	功能 Function	额外说明	英文名
Ctrl+`	显示集成终端 Show integrated terminal
Ctrl+Shift+`	创建新终端 Create new terminal
Ctrl+Shift+C	复制选定 Copy selection
Ctrl+Shift+V	粘贴到活动端子 Paste into active terminal
Ctrl+↑ / ↓	向上/向下滚动 Scroll up/down
Shift+PgUp / PgDown	向上/向下滚动页面 Scroll page up/down
Ctrl+Home / End	滚动到顶部/底部 Scroll to top/bottom
Alt+T	聚焦到命令行终端	完全自定义	Focus Terminal
Ctrl+1	聚焦到编辑区	本身自带	Focus First Editor Group
Ctrl+`	聚焦到命令行终端	本身自带	Toggle Integrated Terminal

 

 

vscode自定义快捷键

文件 | 首选项 | 键盘快捷方式  

 

Alt + A : 在资源管理器视图中显示活动文件

在资源管理器视图中显示活动文件 或 Reveal in Explorer View

 

Ctrl + Shift + A : 选择括号所有内容  

 

 

 

右键, 再按G跳转到指定css

vscode中使用 import "./myColor.css" 时, 使用  Ctrl + 鼠标左键 无法跳转, 我们可以设置快捷键 Go To Source Definition 成 G 之后, 在 myColor.css处右键, 再按G跳转 

 

 

 

 

其它

tips: vscode中按下 Ctrl + Alt 会显示变量

 

 

 

 

 

调整vscode菜单和编辑区字体大小

进入设置 | 搜索字体 | 字体 | 点击 在settings.json 中编辑 | 调整  "window.zoomLevel": 1, 越大菜单字体越大 | 调整 "editor.fontSize": 18, 越大编辑区字体越大

 

{
    "git.confirmSync": false,
    "workbench.editor.enablePreview": false,
    "git.enableSmartCommit": true,
    "window.zoomLevel": 1,
    ......省略......
    "files.exclude": {
        "**/.gitignore": true
    },
    "explorer.confirmDragAndDrop": false,
    "workbench.colorTheme": "Default Light+",
    "editor.fontSize": 18,
    "redhat.telemetry.enabled": true,
    "output.smartScroll.enabled": false,
    "debug.console.fontSize": 17, //默认端口
}

 

 

 vscode修改终端成git-bash

settings-->features-->Terminal-->External: Windows Exec  -->修改路径成gitbash绝对路径

 

 vscode相同类型的文件不要覆盖当前窗口

Ctrl + Shift +  P  搜索 enablePreview ,  Workbench > Editor:Enable Preview 的勾✔去掉

 

vscode中忽略部分文件,不让展示

 

 

vscode 控制台 老是自动 不滚动

ctrl + , | Smart Scroll | 取消打勾

vscode中直接运行bat

安装code runner后 ， 右键 bat 文件 （不能是快捷方式） ，Run Code 或者 按快捷键 Ctrl + Alt + N

 

 

 

使用Liver server 实现跨域

 

settings.json配置如下

{
    "git.confirmSync": false,
    "workbench.editor.enablePreview": false,
    "git.enableSmartCommit": true,
    "window.zoomLevel": -1,
    "liveServer.settings.donotShowInfoMsg": true,
    "liveServer.settings.proxy": {//代理配置
        "enable": true,//是否开启代理
        "baseUri": "/eureka",//以什么开头
        "proxyUri": "http://localhost:60000/eureka"//代理到其它服务
    },
    "liveServer.settings.CustomBrowser": "chrome",//默认使用的浏览器
    "liveServer.settings.host": "localhost", //设置域名
    "liveServer.settings.port": 5500, //默认端口
}

 

code runner 启动与关闭nodejs

右键文件  | Run Code (Ctrl + Alt + N)

右键"输出"区 | Stop Code Run (Ctrl + Alt + M)

 

 

vscode中断点代码

先使用live server 启动本地服务

然后使用 Ctrl + Shift + P 输入 debug Open Link 打开调试

 

launch.json配置

{
    "configurations": [
        {
            "type": "pwa-chrome",
            "name": "http://127.0.0.1:5500/template.html",
            "request": "launch",
            "url": "http://127.0.0.1:5500/template.html"
        }
    ]
}

 

vscode断点

使用node断点

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch nodejs",
            "program": "${workspaceFolder}/main.js"
        }
    ]
}

参考: https://blog.csdn.net/qq_33220881/article/details/80260065

使用chrome断点

{
    "version": "0.2.0",
    "configurations": [

        {
            "type": "chrome",
            "request": "launch",
            "name": "research.html",
            "url": "http://192.168.2.57:80/vuedemo/research/research.html",
            "sourceMaps": true
            // "webRoot": "${workspaceFolder}"
        }
    ]
}

 

 

 

vscode断点调试nodejs

 

 

vscode中使用REST Client 插件发送get post 请求

test.http文件内容如下:

###
GET http://localhost:8080/student?name=sisi&age=19 HTTP/1.1



###
POST http://localhost:8000/api/getList HTTP/1.1
content-type: application/json

{"name":"bobo"}

 

禁用dart自动格式化

如果你的vscode会自动格式化dart（flutter）代码，那么在settings.json中配置额外添加此段配置即可

{
    "[dart]": {
        "editor.formatOnSave": false,
        "editor.formatOnPaste": false,
        "editor.formatOnType": false,
    }
}

 

如何打开settings.json文件

肯定有更方便的方式 ，暂时只知道这个

 

 

vscode代码片断

搜索关键字 vscode模板  vscode代码片断  vscode占位

1. 在VScode中打开文件 → 首选项 → 用户代码片段 → 在搜索框中搜索 JavaScript 选择 JavaScript.json

即 File | Preferences | Configure User Snippets | javascript (或者输入typescript 最好两个都改) | 放开vscode自带的注释内容

{
	// Example:
	"Print to console": {
		"prefix": "log",
		"body": [
			"console.log('$1');",
			"$2"
		],
		"description": "Log output to console"
	}
}

之后输入log再按下table即可快速自动输入 console.log()了

 

vscode老是提示新版本不想更新怎么办?

setting | User | Application | Update |   Mode 设置成none

或 

搜索 update:mode | 找到 Application | Mode 设置成none

 

 

Update imports for 'xxxx' 不小心点了Never怎么办?

在 VSCode 中，如果你不小心点击了 "Never" 选项来阻止更新导入，可以通过以下步骤恢复：

1. 清除特定文件的设置：

   • 打开命令面板（Ctrl + Shift + P 或 Cmd + Shift + P）。

   • 搜索并选择 Preferences: Open Settings (JSON)。

   • 在 settings.json 文件中查找与更新导入相关的设置，通常是 javascript.updateImportsOnFileMove.enabled 或 typescript.updateImportsOnFileMove.enabled，确保它们没有被设置为 never。

 

 

参考：

微软良心之作——Visual Studio Code 开源免费跨平台代码编辑器==>https://www.cnblogs.com/huyong/p/4573041.html

VS Code打造一个完美的Springboot开发环境==>https://blog.csdn.net/xiaocy66/article/details/82875770