首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

VS Code 编辑器入门指南上篇-核心概念与组件

组件内容:击侧边不同组件这里会展示相应显示组件内容。 面板:包括问题显示、输出、调试控制台和终端四个组件。...状态:可以类比为 macOS 菜单 + 通知中心,这里会展示和文档及项目相关简单信息以及部分插件提供信息。 侧边及常用组件 ?...默认情况下,侧边显示五个组件分别是:资源管理器、跨文件搜索、源代码管理、启动和调试和扩展管理。...侧边显示默认组件中「资源管理器」和「跨文件搜索」就是字面功能,分别用来浏览管理文件和进行内容查找替换,我们会在下篇中配合具体应用场景进行更详细介绍。...简而言之,当你使用 VS Code 打开一个文件可以在命令面板中搜索运行 add folder to workspace,然后选择想要打开其它文件夹,此时就会显示一个尚未保存工作区。 ?

91020

关于vscode断点调试

这篇文章将介绍如何配置 Visual Studio Code 和 Chrome 来完成直接在 VS Code 断点调试代码, 并且在VS Code调试窗口看到Chrome中console相同值。...安装插件 点击 Visual Studio Code侧边扩展按钮, 然后在搜索框输入Debugger for Chrome并安装插件,再输入,安装完成后点击 reload 重启 VS Code...添加 Visual Studio Code 配置 点击 Visual Studio Code侧边 调试 按钮, 在弹出调试配置窗口中点击 设置 小齿轮, 然后选择 chrome, VS Code...sourcemap 如果你是基于 webpack 打包 vue 项目, 可能会存在断点不匹配问题, 还需要做些修改: 打开根目录下 config 目录下 index.js 文件 将dev 节点下...Chrome 在 vue 项目中执行npm run dev以调试方式启动项目 点击 VS Code侧边调试按钮,选择 Attach to Chrome 并点击绿色开始按钮,正常情况下就会出现调试控制条

1.8K20
您找到你想要的搜索结果了吗?
是的
没有找到

Vue笔记:使用 VS Code 断点调试

断点调试代码, 并且在 VS Code 调试窗口看到 Chrome 中 console 相同值,这篇文章就来介绍一下这个配置过程。...左侧边扩展按钮, 然后在搜索框输入Debugger for Chrome 并安装插件,再输入,安装完成后点击 reload 重启。...3.创建 Debug 配置文件 点击 Visual Studio Code侧边 调试 按钮, 在弹出调试配置窗口中点击 设置 小齿轮, 然后选择 chrome, VS Code 将会在工作区根目录生成...4.修改 webpack 配置 如果是基于 webpack 打包 vue 项目, 可能会存在断点不匹配问题, 还需要做些修改: 1.打开根目录下 config 目录下 index.js 文件 2...点击 VS Code侧边调试按钮,选择 Attach to Chrome 并点击绿色开始按钮,正常情况下就会出现调试控制条。 现在就可以在 vue 文件 js 代码中打断点进行调试了。

2.8K20

VS code常用快捷键

前端推荐使用编辑器VS code,用过HB-X,ST3,Webstorm等编译器之后就会发现,前端编辑器最屌还是VS code。...在打开输入框内,可以输入任何命令。 这个比较常用是安装插件或者查找文件,我一般都是用来查找项目文件,插件的话一般直接在扩展程序中安装。...编辑器与窗口管理 新建文件: Ctrl+N 文件之间切换: Ctrl+Tab 打开一个新VS Code编辑器: Ctrl+Shift+N 关闭当前窗口: Ctrl+W 关闭当前VS...Ctrl+F 查找替换Ctrl+H 整个文件夹中查找Ctrl+Shift+F 显示相关 全屏显示(再次按则恢复): F11 放大或缩小(以编辑器左上角为基准): Ctrl +/- 侧边显示或隐藏...:Ctrl+B 显示资源管理器(光标切到侧边中才有效): Ctrl+Shift+E 显示搜索(光标切到侧边中才有效): Ctrl+Shift+F 显示(光标切到侧边中才有效): Git

60640

【说站】微软新出Pylance,Python体验获得增强

微软于7月1日发布一款新VS Code插件,名为Pylance,这个名称是向Monty PythonLancelot致敬。...Pylance距离截稿不足2天时间,VS Code插件安装量已经达到6800+。...在2018年,MicrosoftPython团队发布了Python语言服务器,将Visual Studio丰富Python IntelliSense支持引入了VS Code。...Pylance还提供了快速、准确自动完成和类型检查。 另外,需要注意是,微软虽然发布了Pylance,但是并没有开源Pylance源代码。 下面就来介绍一下这款新鲜出炉VS Code插件!...Pylance 安装 和其他VS Code插件一样,可以直接点击侧边活动插件市场图标,搜索Pylance进行安装。 安装之后,打开一个新.py文件即可使用。

47710

Visual Studio Code 更改侧边字体样式(CSS)

Visual Studio Code(以下简称 VSCode) 窗口放大以后侧边字体样式异常难看,让人感到非常别扭,bdfs 也找不到完整解决方案,最后在知乎看了 muxu.jiu 回答,茅塞顿开...常规方法 首先打开开发人员工具,一层一层打开 html 标签,找到如图 1.0.div 所示 Div 标签,朝下找到 Computed(已计算) 标签,点击 Font-Size,找到一个带有 content...子项,右键,点击第二个选项,再点击 },复制右上方文件地址和它左边 CSS Code(没有粘贴板软件用户可以先粘贴到记事本里,再一个一个复制),打开资源管理器,粘贴,将 %20 替换成空格,删除...//vscode-app/ 和后面的文件名,双击 workbench.desktop.main.css,按 Ctrl + F 键,在搜索框中粘贴 CSS Code,添加下面这行代码: ;font-family...快捷方法 打开 Visual Studio Code,点击 File,再点击 Open File,在地址框中输入你 VSCode 安装地址 + resources\app\out\vs\workbench

2.8K20

前端学习(0)~vscode工具使用

VS Code 全称是 Visual Studio Code,是一款开源、免费、跨平台、高性能、轻量级代码编辑器。这里只讲在前端开发中使用。...VS Code 安装 VS Code 官网:https://code.visualstudio.com VS Code快捷键 移动光标 Mac快捷键 Win快捷键 作用 备注 Cmd + ← Fn +...Cmd + P Ctrl + P 在当前项目工程里,全局搜索文件 很常用 Ctrl + G Ctrl + G 跳转到指定行 Cmd + Shift + O Ctrl + shift + O 在当前文件各种方法之间进行跳转...Cmd + B Ctrl + B 显示/隐藏侧边 很实用 Cmd + \ Ctrl + \ 创建多个编辑器 比较实用 Cmd + Option + 左右方向键 Ctrl + Pagedown/Pageup...在已经打开文件之间进行切换 非常实用 Ctrl + Tab Ctrl + Tab 在已经打开文件之间进行跳转 不如上面的快捷键实用 Cmd + J Ctrl + J 显示/隐藏控制台 VS Code

78530

在Mac上使用Visual Studio Code开发调试.NET Core代码

2.新建一个.NET Core程序 打开Mac终端: mkdir hwapp cd hwapp dotnet new 这几个命令是新建一个叫hwapp目录然后在该目录下初始化一个项目,类似于用VS...5.安装VS CodeC#扩展 打开VS Code,按快捷键:Command+p,在弹出输入框里输入ext install csharp,在搜索出来下拉框里选第一个C#,安装之。 ?...安装完C#扩展插件让我们打开Program.cs这个文件编辑一下吧。这个时候已经有C#标准代码着色,跟智能提示了。 ?...我们主要是需要修改program属性设置,其实就是当前可执行文件Path,注意在Mac下没有exe,编译是dll。 ?...VS Code侧边有一只虫子样图标,点击切换到调试模式,VS Code中下断点跟VS里一样,在代码行最左边点击一下,出现一个红点,表示下断点成功。

5.1K10

用我这套模板,几分钟做出文档网站!

指路:https://github.com/liyupi/codefather 然后下载代码压缩包:解压,用 WebStorm 或 VS Code 等开发工具打开项目。...比如模板中所有的 ts 文件侧边配置文件:// 监听文件变化,热更新extraWatchFiles: [".vuepress/*.ts", ".vuepress/sidebars/*.ts"],5、...,所有的侧边配置都放在 sidebar.ts 文件中,然后在 config.ts 中引用。...但是由于侧边配置比较复杂,文章多时候需要分组、还要能自动识别文章中小标题,所以这里我摸索出来 最佳实践 是:1)将同类文章放到同一个目录里,比如学习路线:2)将该目录所有文章(侧边配置)...集中写在单独配置文件中,比如 roadmapSideBar.ts,放到 sidebars 目录下:3)在侧边 sidebar.ts 配置中,引用各分类侧边配置文件,实现不同分类下文章,展示侧边不同

34710

VS Code常用快捷键

1、编辑器与窗口管理 新建文件: Ctrl+N 文件之间切换: Ctrl+Tab 打开一个新VS Code编辑器: Ctrl+Shift+N 关闭当前窗口: Ctrl+W...关闭当前VS Code编辑器: Ctrl+Shift+W 切出一个新编辑器窗口(最多3个): Ctrl+\ 切换左中右3个编辑器窗口快捷键: Ctrl+1 Ctrl+2 Ctrl...(4) 查找替换 查找: Ctrl+F 查找替换: Ctrl+H (5) 显示相关 全屏显示(再次按则恢复): F11 放大或缩小(以编辑器左上角为基准): Ctrl +/- 侧边显示或隐藏...: Ctrl+B 显示资源管理器(光标切到侧边中才有效): Ctrl+Shift+E 显示搜索(光标切到侧边中才有效): Ctrl+Shift+F 显示(光标切到侧边中才有效):...修改快捷键绑定方法二:点击搜索下侧“ keybindings.json ”,进入编辑界面,如下图所示: ?

72530

这几个 VS Code 快捷键,请一定要用一用,可以大大提高你编辑效率

这里列举 15 个我经常用到快捷键,可以大大提高你编辑效率,如下: 0、命令行启动 VS Code 首先在 VS Code 安装 code 命令,启动 VS Code,按下快捷键 Command+Shift...当您使用终端并想在 VS Code 中打开一个目录时,它非常有用,也可以 code {path} 来打开对应 path。 1、搜索文件,并打开它。...快捷键: Mac:Command + p Windows/Linux:Ctrl + p 在文件之间导航是非常普遍需求来,编辑一个文件同时,需要同步修改另一个文件,此时最高效就是键入文件名模糊搜索然后回车打开...,这个快捷键按下输入文件名回车就可以打开对应文件,比鼠标选择要快多了。...15、打开或隐藏侧边 快捷键 Mac: Command + b Windows/Linux: 可以使用此命令切换侧边,以便在看代码时有更多屏幕空间。

1.8K20

VSCode统计代码行数

很多小伙伴在开发时想知道当前项目代码行数是多少,很多人会使用Git来进行查看,但是在开发中如果编辑器使用了VsCode我们可以使用VsCode插件--VS Code Counter来进行代码行数查询。...1.下载插件 在VsCode侧边搜索插件名进行下载: image.png 2.配置插件 编写插件配置选择哪些文件统计,哪些文件不统计VsCode插件市场文档 //代码统计 "VSCodeCounter.languages..."**/package.json", "**/tsconfig.json", "**/**.json", "**/yarn.lock", ] image.png 我在项目中设置了排除文件以及文件夹...3.生成结果 如果是从根路径开始检测就在目录空白处右键,如果是想要检测文件夹内代码行数就对指定文件夹右键选择 Count lines in directory image.png image.png...4.获得结果 会获得一个md文档和txt文件等等 image.png 这是本项目(个人博客系统)截止2022-05-14时有效代码行数(把依赖包,成果物,配置文件都排除掉了) image.png

6.2K30

使用IBM Blockchain Platform extension开发你第一个fabric智能合约

安装IBM Blockchain Platform extension for VS Code IBM Blockchain Platform extension是工作在VS Code上面的,VS Code...如果你已经有了VS Code,点击屏幕左侧边扩展程序。在顶部,在扩展市场中搜索IBM Blockchain Platform。单击安装,然后单击重新加载。那么就安装好了。...在左侧边中,单击IBM Blockchain Platform图标(它看起来像一个正方形,如果这是你安装最新扩展,则可能位于图标集底部)。...完成,你可以导航到“资源管理器”视图(最有可能在左侧顶部图标,看起来像“文档”图标)并打开src / my-asset-contract.ts文件以查看你智能合约代码脚手架。...在左侧边中,单击IBM Blockchain Platform图标。 将鼠标悬停在SMART CONTRACT PACKAGES面板上,单击“…”菜单,然后从下拉列表中选择“打包智能合约项目”。

1.3K20

【玩转 Cloud Studio】不一样本地与云协作

如果你还在纠结是选择 VS Code Remote SSH 还是 Jetbrains Code With Me 进行协作开发,那么 Cloud Studio 一定是你不二之选。...同样 CS 在创建空项目时可以从 Git 仓库中拉取项目进行部署图片使用协作Cloud Studio 提供了一套非常完善 Cloud Studio MetaWork 协作套件,在侧边中打开 Cloud...使用本地 VS Code Remote SSH 插件可以有效解决这种问题来实现本地端开发。...是你远程ssh公网ipUser是你远程ssh用户名,如果远程是Linux系统的话,这个就是你登录Linux用户名图片保存侧边中轻点 Host 旁边窗口按钮即可连接至你主机图片第一次连接让你选择操作系统并输入密码来验证信息每次都需要密码验证就显得非常麻烦...来刷新你 SSH 服务图片至此免密登陆就配置完成了,在 VS Code 内打开到 /root/RemoteWorking/ 即可看到我们 Cloud Studio 工程文件

1.6K140

VS Code整合AI助手改变游戏规则,一键自动处理代码

配有更大聊天会话窗,只要轻轻一点就能从侧边移到更大编辑器空间: 使用“/createWorkspace”斜杠命令就能让Copilot自动创建项目工作区,还是带目录那种。...使用“/search 命令”,Copilot现在可以编写正则表达式搜索代码,帮你快速找到想找内容。...还没完,除了上面展示,还有更多功能等你来玩。 VS Code+Copilot 编辑器聊天现在新增了“实时预览”模式。...甚至可以帮忙解决单元格执行失败等问题,在单元格状态上选择“使用Copilot修复”可以显示建议: Copilot现在还能自动执行PR审核时建议,只要安装一个GitHub Pull Requests...而从VS Code 1.79 版本开始,也可以在稳定发行版中直接使用,但仍需安装GitHub Copilot扩展预发布版。

17910

时隔多久,微软再出神器,Python这次惨了!

微软于7月1日发布一款新VS Code插件,名为Pylance,这个名称是向Monty PythonLancelot致敬。...Pylance距离截稿不足2天时间,VS Code插件安装量已经达到6800+。...在2018年,MicrosoftPython团队发布了Python语言服务器,将Visual Studio丰富Python IntelliSense支持引入了VS Code。...Pylance还提供了快速、准确自动完成和类型检查。 另外,需要注意是,微软虽然发布了Pylance,但是并没有开源Pylance源代码。 下面就来介绍一下这款新鲜出炉VS Code插件!...Pylance 安装 和其他VS Code插件一样,可以直接点击侧边活动插件市场图标,搜索Pylance进行安装。 安装之后,打开一个新.py文件即可使用。

1.6K30

Docsify使用指南(打造最快捷、最轻量级个人&团队文档)

Docsify特性 无需构建,写完文档直接发布 容易使用并且轻量 (压缩 ~21kB) 智能全文搜索 提供多套主题 丰富 API 支持 Emoji 兼容 IE11 支持服务端渲染 SSR (示例...文件作用 文件 基础配置项(入口文件) index.html 封面配置文件 _coverpage.md 侧边配置文件 _sidebar.md 导航配置文件 _navbar.md 主页内容渲染文件 README.md...repo: 'https://github.com/YSGStudyHards', // 侧边支持,默认加载项目根目录下_sidebar.md文件...最大支持渲染标题层级 maxLevel: 5, // 自定义侧边默认不会再生成目录,设置生成目录最大层级(建议配置为2-4)...简单、轻便 (压缩 ~21kB) - 无需生成 html 文件 - 众多主题 [开始使用 Let Go](/README.md) 侧边配置文件(_sidebar.md) Docsify官网配置侧边教程

2.9K10
领券