首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

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

直接在 Chrome 的调试窗口中调试 Vue 代码有诸多不便, 好在 Visual Studio Code 中提供了 Debugger for Chrome 插件,能够通过配置直接在 VS Code...3.创建 Debug 配置文件 点击 Visual Studio Code 左侧边栏的 调试 按钮, 在弹出的调试配置窗口中点击 设置 小齿轮, 然后选择 chrome, VS Code 将会在工作区根目录生成...4.修改 webpack 配置 如果是基于 webpack 打包的 vue 项目, 可能会存在断点不匹配的问题, 还需要做些修改: 1.打开根目录下的 config 目录下的 index.js 文件 2...在 vue 项目中执行 npm run dev 以调试方式启动项目 3....点击 VS Code 左侧边栏的调试按钮,选择 Attach to Chrome 并点击绿色开始按钮,正常情况下就会出现调试控制条。 现在就可以在 vue 文件的 js 代码中打断点进行调试了。

2.7K20

Vue笔记:VS Code 常用快捷键

VS Code 常用快捷键 1、注释: 单行注释:ctrl+/, 注释后再按取消 取消单行注释:alt+shift+A 注释后再按取消 2、移动行 向上移动一行:alt+up 向下移动一行:alt+down...ctrl + shift + n 10、行增加缩进 ctrl + [ 11、行减少缩进 ctrl + ] 12、关闭编辑窗口  ctrl + w 13、关闭所有窗口  ctrl + k + w VS Code...Support 在HTML标签上写class智能提示当前项目所支持的样式 12、HTML Snippets 超级好用且初级的H5代码片段以及提示 13、Debug for Chrome 使用 vs code...来打断点调试 14、Document this Js 的注释模板 15、jQuery Code Snippets jquery 提示工具 16、Html2jade html 模板转 pug 模板 17...代码段(包括Vue2 api、vue-router2、vuex2) 31、Vue 2 Snippets   vue必备vue代码提示 32、Vue-color   vue 语法高亮主题 33、Auto-Open

4K30

使用 Vue 开发的,这 7 个 VS Code 插件万万不可错过!

在 VS Code 中添加好用的插件可以提高我们的开发效率。这些可以帮助我们格式化,扩充性,执行最佳实践的代码方式,自动完成一些琐碎的事情。好了,费话不多说,那我们开始吧!...Vetur 维护得很好,它甚至还提供了对Vue3 Typescript的支持。...ESLint可以帮助你保持组织性,并且随着对Vue3的支持的增加,你可以编写可扩展的Vue项目。...Vue VSCode Snippets 这个插件基于最新的Vue官方语法高亮文件添加了语法高亮,并且依据Vue 2的API添加了代码片段。...它非常适合编写快速SFC,Vue指令和快速访问生命周期挂钩之类的东西。 Bookmarks 许多VSCode插件只有在大型项目时才真正展现出其全部潜力。

1.5K20
领券