大家好，今天给各位分享fir分发网站源码分享的一些知识，其中也会对网站分发平台进行解释，文章篇幅可能偏长，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在就马上开始吧！
VsCode自从诞生以来，以其各自优异的特性迅速走红。尤其是对于前端开发小伙伴来说，几乎成为必不可少的开发工具。所以，熟练掌握VsCode的各自使用技巧与调试技巧会让你的日常开发工作效率倍增。本文将会以大量图文的方式，从下面几个方面详细介绍VsCode的各种技巧：
第一部分主要介绍VsCode的基本技巧，比如常用快捷键、辅助标尺等。熟悉此部分的可以直接跳过。第二部分主要各种断点（比如日志断点、内联断点、表达式断点等等）、数据面板等等第三部分主要讲解各种项目的调试实战，比如Node程序、TS程序、Vue程序、Electron程序、Html等的调试实战最后一部分将会讲解其他有用的技巧，比如代码片段、重构、Emmet等等
基本技巧
快速启动
VsCode安装后，会自动写入环境变量，终端输入code即可唤起VsCode应用程序。
常用快捷键
ctrl+p快速搜索文件并跳转，添加:可以跳转到指定行ctrl+shift+p根据您当前的上下文访问所有可用命令。ctrl+shift+c在外部打开终端并定位到当前项目路径ctrl+按键1左边的符号显示隐藏终端面板Ctrl+B切换侧边栏Ctrl+\\快速拆分文件编辑alt+单机左键添加多处光标alt+shift+单击左键同一列所有位置添加光标alt+shift+鼠标选择选择相同开始和结束的区域alt+上键或下键将当前行或者选中的区域上移/下移一行
垂直标尺
在配置文件中添加如下配置，可以增加字符数标尺辅助线
&34;:[40,80,100]\n
进阶技巧
断点的基本使用
下面以在VsCode中快速调试一个Node项目为例，演示断点的基本使用。后文会继续结束各种高级断点。
创建一个基本的node项目为Nodejs打开左侧调试面板，选择你要调试的node项目名称，添加调试配置选择调试的项目类型为Node.js打开生成的.vscode/launch.json文件，指定程序入口文件
program字段用于指定你的程序入口文件，${workspaceFolder}表示当前项目根路径
在程序中添加断点，只需要点击左侧的边栏即可添加断点按F5开始调试，成功调试会有浮窗操作栏
浮窗的操作按钮功能依次为：
继续(F5)、调试下一步(F10)、单步跳入(F11)、单步跳出(ShiftF11)、重新调试(Ctrl+Shift+F5)、结束调试(Shift+F5)
日志断点
日志断点是普通断点的一种变体，区别在于不会中断调试，而是可以把信息记录到控制台。日志断点对于调试无法暂停或停止的服务时特别有用。步骤如下:
添加日志断点的步骤输入要日志断点的信息，点击回车添加完成
可以使用{}使用变量，比如在此处添加日志断点，b的值为${b}
日志断点添加成功后会有是一个菱形图标按F5运行查看调试结果
表达式条件断点
条件断点是表达式结果为true时才会进行断点，步骤如下:
在代码行左侧右击，也可以添加断点，此处选择添加条件断点填写表达式，按回车键添加成功的小图标如下按F5调试，条件成立所以进行了断点
命中计数断点
只有该行代码命中了指定次数，才会进行断点。步骤如下:
选择条件断点，切换为命中次数选项，填写命中次数填写成功如下图所示按F5调试，如图所示，index为9时才中断
内联断点
仅当执行到达与内联断点关联的列时，才会命中内联断点。这在调试在一行中包含多个语句的缩小代码时特别有用。比如for循环，短路运算符等一行代码包含多个表达式时会特别有用。步骤如下:
在指定位置按Shift+F9调试之后，每次运行到该内联处的代码都会中断
补充知识点：数据面板介绍
数据面板可以查看所有变量在变量上点击右键，可以设置变量值、复制变量值等操作聚焦于数据面板时，可以通过键入值来搜索过滤。点击下图所示按钮可以控制是否筛选。
补充知识点：监听面板介绍
可以将变量添加到监听面板，实时观察变量的变化。
在变量面板通过右键选择“添加到监视”将变量添加到监听面板也可以直接在监听面板选择添加按钮进行变量添加添加变量后就可以实时监听变量的变化
补充知识点：调试服务器时打开一个URI
开发Web程序通常需要在Web浏览器中打开特定URL，以便在调试器中访问服务器代码。VSCode有一个内置功能“serverReadyAction”来自动化这个任务。
一段简单的server代码
varexpress=require(&39;);\nvarapp=express();\n\napp.get(&39;,function(req,res){\nres.send(&39;);\n});\n\napp.listen(3000,function(){\nconsole.log(&39;);\n});\n
配置launch.json，以支持打开URI
{\n&34;:&34;,\n&34;:&34;,\n&34;:&34;,\n&34;:&34;,\n\n&34;:{\n&34;:&34;,\n&34;:&34;,\n&34;:&34;\n}\n}\n
pattern是设置匹配的程度端口号，端口号放在小括号内，即作为一个正则的捕获组使用。uriFormat映射为URI，其中%s使用pattern中的第一个捕获组替换。最后使用该URI作为外部程序打开的URI。
按F5调试，会自动打开浏览器，且会在下图所示处中断，当继续执行后，浏览器才能看到输出了server的内容
终局：各场景调试实战
调试NodeJS项目
关于NodeJs项目的调试方法，已经在上述的断点的基本使用部分做了介绍，可以网上滚动翻阅。
调试Typescript项目
调试TS项目前，先创建一个TS项目先初始化一个ts程序，生成默认的tsconfig.json文件34;sourceMap&34;outDir&34;./out&39;fn&34;Hello&34;version&34;2.0.0&34;tasks&34;type&34;typescript&34;tsconfig&34;tsconfig.json&34;problemMatcher&34;$tsc&34;group&34;build&34;label&34;tsc:构建-tsconfig.json&34;en&34;UTF-8&34;X-UA-Compatible&34;IE=edge&34;viewport&34;width=device-width,initial-scale=1.0&34;./out/index.js&39;fn&39;World&34;he&34;version&34;0.2.0&34;configurations&34;type&34;pwa-chrome&34;request&34;launch&34;name&34;LaunchChrome&34;url&34;file:///E:/demo/vscode/debug/ts/index.html&34;preLaunchTask&34;tsc:构建-tsconfig.json&34;webRoot&34;${workspaceFolder}&34;source-map&34;version&34;0.2.0&34;configurations&34;type&34;chrome&34;request&34;launch&34;name&34;vuejs:chrome&34;url&34;http://localhost:8080&34;webRoot&34;${workspaceFolder}&34;breakOnLoad&34;pathMapping&34;/_karma_webpack_&34;${workspaceFolder}&34;sourceMapPathOverrides&34;webpack:/*&34;${webRoot}/*&34;/./*&34;${webRoot}/*&34;/src/*&34;${webRoot}/*&34;/*&34;*&34;/./~/*&34;${webRoot}/node_modules/*&34;preLaunchTask&34;serve&34;version&34;2.0.0&34;tasks&34;label&34;serve&34;type&34;npm&34;script&34;serve&34;isBackground&34;problemMatcher&34;base&34;$tsc-watch&34;background&34;activeOnStart&34;beginsPattern&34;Startingdevelopmentserver&34;endsPattern&34;Compiledsuccessfully&34;group&34;kind&34;build&34;isDefault&34;source-map&终端执行命令，启动项目\nnpmrunserve\n
按F5启动调试即可
更多详细内容，请点击这里的参考文档查阅。
借助vscode插件DebuggerforFirfox在Firefox中调试
和DebuggerforChrome基本一样，区别在于安装DebuggerforFirfox插件，并在launch.json配置中，增加调试Firefox的配置即可，配置如下
{\n&34;:&34;,\n&34;:[\n//省略Chrome的配置…\n//下面添加的Firefox的配置\n{\n&34;:&34;,\n&34;:&34;,\n&34;:true,\n&34;:&34;,\n&34;:&34;,\n&34;:&34;,\n&34;:[{&34;:&34;,&34;:&34;}]\n}\n]\n}\n
调试时选择对应的调试命令即可
Firefox初始启动时不会触发调试，需要刷新一次
调试Electron项目
Electron很多人都使用过，主要用于开发跨平台的系统桌面应用。那么来看下vue-cli-electron-builder创建的Electron项目怎么调试。步骤如下：
在初始化项目后，首先修改vue.config.js文件配置，增加sourceMaps配置：
module.exports={\nconfigureWebpack:{\ndevtool:&39;\n}\n}\n
创建调试配置.vscode/launch.json
{\n&34;:&34;,\n&34;:[\n{\n&34;:&34;,\n&34;:&34;,\n&34;:&34;,\n&34;:&34;,\n&34;:&34;,\n&34;:&34;,\n&34;:{\n&34;:&34;\n},\n&34;:[&34;,&34;],\n&34;:[&34;]\n},\n{\n&34;:&34;,\n&34;:&34;,\n&34;:&34;,\n&34;:9223,\n&34;:&34;,\n&34;:0,\n&34;:&34;,\n&34;:{\n&34;:&34;\n}\n},\n],\n&34;:[\n{\n&34;:&34;,\n&34;:[&34;,&34;]\n}\n]\n}\n
此处配置了两个调试命令:Electron:Main用于调试主进程，Electron:Renderer用于调试渲染进程；compounds[].选项用于定义复合调试选项;configurations定义的复合命令是并行的;preLaunchTask用于配置命令执行前先执行的任务脚本，其值对应tasks.json中的label字段;preLaunchTask用在compounds时，用于定义configurations复合任务执行前先执行的脚本。
创建任务脚本
{\n//Seehttps://go.microsoft.com/fwlink/?LinkId=733558\n//forthedocumentationaboutthetasks.jsonformat\n&34;:&34;,\n&34;:[\n{\n&34;:&34;,\n&34;:&34;,\n&34;:&34;,\n&34;:{\n&34;:&34;,\n&34;:{\n&34;:{\n&34;:&34;,\n&34;:&34;\n}\n}\n},\n&34;:true,\n&34;:[\n&34;,&34;\n],\n&34;:{\n&34;:&34;,\n&34;:{\n&34;:&34;\n},\n&34;:{\n&34;:&34;,\n&34;:&34;\n}\n}\n}\n]\n}\n
启动调试
在主进程相关代码上打上断点，然后启动调试主进程命令就可以调试主进程了
注意，这里的options参数是根据实际的情况，自定义添加我们运行项目时所需要的参数，比如我这里因为启动项目的npm命令是:
&34;:&34;\n
主进程调试成功开始调试渲染进程
切换到渲染进程的调试选项，在渲染进程的代码处打上断点，点击调试。注意，此时并不会有断点终端，需要ctrl+r手动刷新软件进程才会看到渲染进程的断点。
刷新渲染进程后的效果，如下图，已经进入了断点另一种方式
同时开启渲染进程和主进程的调试，只需要切换到调试全部的选项即可。注意，此种方式因为compounds[].configurations配置是并行执行的，并不一定能保证渲染进程调试一定能附加到主进程调试成功（估计是时机问题），有些时候会调试渲染进程不成功。所以，可以采取上面的方式进行调试。
更多调试Electron的内容，可以点击参考文档查阅。
补充：更进一步
VS调试Reactapp文档VS调试Next.js文档更多…
其他技巧
技巧一：代码片段（snippets）
从扩展商店中安装snippets
@category:&34;\n
创建全局代码片段
选择文件->首选项->用户片段选择新建全局代码片段文件添加代码片段文件的文件名称，会生成.code-snippets后缀的文件定义用户片段
{\n&34;:{\n&34;:&34;,\n&34;:&34;,\n&34;:[\n&39;$1&34;,\n&34;\n],\n&34;:&39;&34;\n}\n}\n
关键词
类型
说明
scope
string
代码片段生效的作用域，可以是多个语言，比如javascript,typescript表示在js和ts生效，不加scope字段表示对所有文件类型生效
prefix
`string
string[]`
body
string[]
代码片段内容，数组的每一项会是一行
description
string
IntelliSense显示的片段的可选描述
1-1?n
–
定义光标的位置，光标根据数字大小按tab依次跳转；注意$0是特殊值，表示光标退出的位置，是最后的光标位置。
在键盘输入log时效果如下指定光标处的默认值并选中
&34;:[\n&39;${1:abc}&34;\n],\n
指定光标处的默认值有多个，并提供下拉选择
用两个竖线包含多个选择值，|多个选择值直接用逗号隔开|
&34;:[\n&39;${1:abc}&34;,\n&34;\n],\n
新建当前工作区的代码片段
只需要选择文件->首选项->用户片段->新建xxx文件夹的代码片段,新建后会在当前工作区生成.vscode/xxx.code-snippets文件
技巧二：Emmet
vscode内置了对Emmet的支持，无需额外扩展。例如html的Emmet演示如下:
技巧三：对光标处代码变量快速重命名
选中或者光标所处的位置，按F2可以对所有的变量重命名
技巧四：代码重构建议
选中要重构的代码，点击出现的黄色小灯的图标选中重构的类型输入新的变量名还可以重构到函数TS中还可以提取接口等等
补充：VsCode扩展插件开发
VsCode扩展插件可以做什么事情？
定制主题、文件图标扩展工作台功能创建webView自定义新的语言提示支持调试特定的runtime
基于Yeoman快速开发VsCode插件，步骤如下:
安装Yeoman和用于生成模板的插件VSCodeExtensionGenerator
#终端运行，主要node版本需要12及以上，node10会安装报错\nnpmi-gyogenerator-code\n
运行yocode创建命令，选择要生成的项目模板。这里演示Newextension根据提示依次选择生成的内容如下按F5生成编译项目，此时会自动打开一个新窗口在新窗口按Ctrl+Shfit+P,输入HelloWorld命令此时会弹出一个弹窗的效果至此，一个最简单的插件就完成了
关于fir分发网站源码分享的内容到此结束，希望对大家有所帮助。