vscode 写的代码能在手机上访问 详细步骤

最新推荐文章于 2025-10-23 02:22:55 发布
原创 最新推荐文章于 2025-10-23 02:22:55 发布 · 1w 阅读 · 47 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#windows #vscode

本文介绍了如何在VSCode中安装和使用LiveServer插件，以及如何更改WindowsIP设置，以便在手机上实时预览网页。通过win+R打开终端输入'ipconfig'获取本地IP，然后在与手机连接相同WiFi的情况下，将VSCode生成的网页URL替换为本地IP。最后，将更新后的URL发送到手机，即可在手机上查看预览效果。此方法适用于前端开发者进行跨设备网页调试。
在vscode下载Live Server插件和更改windows ip设置，具体操作如下：

下载vscode插件

在这里插入图片描述

设置windows ip

  • win+R 打开终端输入：ipconfig
    在这里插入图片描述
  • 重点 找到SDN 服务器:

在这里插入图片描述
2.
在这里插入图片描述

  • 找到设置ipv4窗口：

在这里插入图片描述

在这里插入图片描述
3.
在这里插入图片描述
4.
在这里插入图片描述
5.
在这里插入图片描述

  • 手机和电脑连同一个wifi的情况下，再把vscode生成的网页网址前面的IP换成本地的IP
    在这里插入图片描述
  • 最后发送到手机执行的效果：
    在这里插入图片描述
  • 总结：1.通过安装vscode 插件Live Server 来实现网页代码实时预览，
  • 2.然后更改 windows ip
  • 3.修改网址前面的 IP
  • 4.把网址发送到手机即可实现效果
vbind
关注
VSCode 如何同步显示网页在手机或者平板上
Odyssey_kd的博客
03-28 1427
如何在手机上同步显示Vscode的网页 如何在平板上同步显示vscode的网页
VSCode 开发flutter 实现设备远程调试
曹世鑫的杂谈
05-05 2369
VSCode 开发flutter 实现设备远程调试
VSCode html 页面查看在手机端的效果
m0_44998776的博客
09-27 4239
用VSCode写的 html 页面在电脑上显示没有问题，在手机上看却有一些溢出之类的问题，所以我找了一下怎么预览在不同客户端的效果。 这里提供两种比较简单的方法： 在电脑端模拟手机效果。在 Chrome 浏览器中模拟手机设备并查看HTML文件在手机上的效果。 使用移动设备调试功能。通过VSCode中的Live Server插件实现在手机上查看HTML文件。
如何在安卓设备上运行VS Code？2025年超详细本地部署指南
最新发布
gitblog_00185的博客
10-23 1352
想在安卓手机或平板上体验与桌面端无异的VS Code开发环境吗？**VS Code for Android** 实现方案让这一想法成为现实！本教程将带你通过简单步骤，在安卓设备上搭建完整的本地代码编辑平台，无需依赖云端服务器，随时随地享受高效编程体验。 ## ???? 什么是VS Code for Android？ **VS Code for Android** 是一个基于Flutter框架开发的...
利用vscode插件live server开启局域网共享html页面
qq_46680839的博客
03-24 4415
通过vscode插件live server开启局域网共享html页面
vscode 写的代码在手机上实时查看 详细步骤
weixin_61710685的博客
01-09 5391
vscode 写的代码在手机上实时查看 详细步骤
使用vscode写的html页面在手机端实现预览
qyx189573的博客
07-21 8597
使用vscode写的html页面在手机端实现预览 1.准备 在vscode 中下载 live Serve 扩展插件 2.设置 打开文件------首选项 ------设置-----找到扩展中----Live Serve Config-----Settings: Custom Browser -----个人选择浏览器-----Settings: Host------设置局域网ip (在同一个局域网中)； 3.浏览 在浏览的时候选择 open with live serve 4.注意 以上需在同一局域网中，手机
精选资源
VSCode配置C++环境的详细步骤和指南.txt
08-27
在VSCode中配置C++语言环境的详细步骤和指南 Visual Studio Code (VSCode) 是一款轻量级但功能强大的代码编辑器，支持多种编程语言，包括C++。以下是如何在VSCode中配置C++语言环境的详细步骤和指南。 1. 安装必要...
Git本地代码管控（Vscode编辑）
03-03
本文将详细介绍如何利用Git进行本地代码版本控制，并结合Visual Studio Code (Vscode) 这款强大的代码编辑器来提升工作效率。 #### 二、准备工作：软件安装与配置 1. **安装Vscode** - 访问官网 ...
VsCode新建VueJs项目的详细步骤
10-19
本篇文章将详细介绍如何在VsCode环境下快速新建一个Vue.js项目。 首先，我们需要了解几个关键点： 1. Vue-cli是Vue.js官方提供的一个完整的命令行工具，它提供了一种快速生成Vue项目模板的方式，极大地简化了项目...
vscode 开发Vue项目的方法步骤
12-09
通过以上步骤，你已经成功地在VSCode中配置了一个适合Vue开发的环境，包括了代码高亮、格式化、规范检查以及断点调试。现在，你可以开始愉快地开发Vue项目了。在遇到问题时，利用调试功能能够高效地定位并解决问题，...
手机实时预览vscode写的html页面
韩旭不会敲代码吧的博客
11-19 3147
手机实时预览vscode写的html页面
vscode写的html页面在手机端实现预览
热门推荐
等待のL先森的博客
11-26 1万+
vscode写的html页面在手机端实现预览 做了一个响应式网页，需要在手机端查看浏览，所以在电脑上找了很久的资料，对于这个问题，但是都不是很详细，虽然最后终于解决了这个问题，实现了手机端浏览。但是我还是想把这个问题详细的步骤说出来，以便能给一些刚接触的和不会的小白一些方便。 1: 安装live server 插件 要想在移动端调试，首先得本地起一个服务，这时候就用到了live server 插件。 具体下载方法： 在vscode 中搜索下载，如图所示： 搜索出来，点击安装即可，我这里已经安装好了。 安
前端简易服务器之vscode篇（可供项目预览手机访问电脑网页等）
凌晨不睡觉
06-02 2991
几种方案本质其实都是启动一个简易服务器然后手机访问来实现的，一般来说使用webpackia脚手架搭建的项目都会自动启动一个服务所以并不需要使用这些方案再重复启动了，直接在config配置下host即可 方案一 使用vscode插件Live Server来实现，安装插件启用后会直接启动一个服务只需要保持手机跟电脑在同一个网络环境下即可访问。 具体步骤如下： 打开vscode在扩展中搜索 Live Server 插件选择安装 配置下插件的启动所使用的ip，在设置中搜索live在左侧菜单选择扩展&gt.
在VScode上写网页（html）
2302_80978287的博客
09-07 2359
把代码复制粘贴进去，然后点击文件→另存为→选择html格式。
auto.js使用vscode连接手机教程
Heartnottowake的博客
04-21 1万+
1，打开vscode安装插件，这个插件叫Auto.js-VSCodeExt 2，按下ctr+shift+p查找auto.js，然后启动anto.js: Start Server(选中回车就行） 3，手机下载autojs,开启无障碍功能，然后点击左上角的3个杠，点击连接电脑，然后再电脑端，打开cmd，输入ipconfig,将Ipv4的端口地址填入手机，然后在vscode输出框就会显示连接成功，并显示你的手机型号 4，这个时候，你就只需要新建一个js文件，然后输入简单命令，比如toast(“你好”),按f5运
vscode 原生H5项目实现移动端适配（px-to-rem）
QingHan_wow的博客
10-09 2134
vscode里下载插件px-to-rem 假设Ui给的设计稿尺寸是750*1334,我们先alt+s，设置1rem=75px后enter保存 写css的时候就按照px来写，然后alt+z转换成rem 再页面初始化的时候，window.onresize监听手机尺寸，设置1rem是window.innerWidth/10 px，即设置document.documentelement的fontsize 此时，页面就已经适配了 ...
VisualStudioCode实现手机阅览本地编写的html文件
miles-zh
01-07 1689
安装Live Server插件 设置 ——> 扩展 ——> Live Server Config ——> Setting:Host ，改为自己电脑的 ip地址 打开html文件所在文件夹，打开html文件，右键选择 Open with Live Server 就会跳转到浏览器阅览效果 在手机浏览器输入上一步浏览器的地址，可以查看效果了。 ...
如何使vscode写代码时有提示
07-08
### 配置 VSCode 以启用代码提示功能 在使用 VSCode 编写代码时，通过合理配置可以实现高效的代码提示功能。VSCode 提供了内置支持和丰富的扩展插件来增强开发体验。 #### Python 语言的代码提示设置 为了在编写 Python 代码时获得智能提示功能，需要确保安装了官方推荐的 Python 插件[^1]。该插件集成了 Pylance 和 Jedi 引擎，能够提供快速且准确的代码补全、错误检查以及文档字符串提示等功能。安装完成后，可以在设置中调整相关参数以优化提示效果。例如，启用自动导入功能可以减少手动输入模块名称的需求。 如果遇到没有提示的情况，可以通过重新安装 C/C++ 插件来解决问题之一[^2]。此外，还可以尝试打开 VSCode 的设置界面，在搜索框中输入“prevent”，取消勾选“禁止快速建议”选项后重启编辑器即可恢复提示功能。 #### C++ 语言的代码提示设置 对于 C++ 开发者来说，特别是涉及到第三方库（如 Eigen、Sophus）的情况下，需要手动配置包含路径以启用智能提示[^1]。具体操作步骤如下： 1. 打开命令面板（快捷键 `Ctrl + Shift + P`）。 2. 输入并选择 `C/C++: Edit Configurations (UI)`。 3. 在打开的界面中找到“包含路径”选项，添加所需的第三方库头文件路径。 4. 保存配置后重新启动 VSCode，即可获得完整的代码提示支持。 确保安装了 C/C++ 插件（由 Microsoft 提供），它内置了对多种标准和非标准库的支持。 #### Web 开发中的代码提示 在进行 HTML5 Canvas 相关开发时，可以通过添加特定类型的注释来帮助 IDE 更好地理解变量类型，从而提供更精确的代码提示[^3]。例如，在 JavaScript 中声明一个 canvas 元素时，可以这样写： ```javascript /** @type {HTMLCanvasElement} */ var canvasDom = document.getElementById('canvas'); ``` 这种方式有助于提高代码可读性和维护性，同时也能让开发者更快捷地访问到对象的方法与属性。 #### 推荐使用的插件 除了上述语言特定的设置外，还有一些通用性较强的插件可以帮助提升代码编写效率： - **Baidu Comate**：基于人工智能的代码补全与建议工具，支持多种语言，能够根据上下文生成高质量的代码片段。 - **Tabnine**：一款基于 AI 的自动补全工具，适用于几乎所有主流编程语言，提供更高效的代码输入体验。 - **GitHub Copilot**：由 GitHub 推出的 AI 成对编程助手，能够在你编写代码时提供行内建议。 这些插件不仅限于单一语言的支持，而且它们各自拥有独特的功能特点，可以根据个人喜好和项目需求灵活选用。 ---
评论 8
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值