scode怎么运行代码HTML?vscode是一款源代码编辑器软件,能够用于windows、macOS以及Linux系统,具有丰富的其他语言。网站html编写也需要使用到vscode,但是很多小伙伴们不知道如何运行编写html代码,那么今天就来教大家vscode怎么运行代码HTML以及怎么在vscode编写HTML代码,一起来看看吧。
VS Code中运行
代码有两种方法:
1.自动打开HTML文件
步骤如下:
1)在VS Code中搜索并安装Live Server插件;
2)打开HTML文件;
3)右键单击编辑器中的HTML代码,选择“Open with Live Server”;
4)浏览器将自动打开并显示HTML页面。
2.手动打开HTML文件
步骤如下:
1)打开HTML文件;
2)右键单击编辑器中的HTML代码,选择“Open with Default Application”;
3)浏览器将自动打开并显示HTML页面。
是一款轻量级且非常好用的ide,我平时用idea开发java,但是开发vue,go和net core会选择用vscode,因为它的内存占用要比idea小很多,下面罗列了些快速使用vscode的信息,方便更换电脑时可以快速启用它,涉及常用快捷键,个性化配置,适用于各种语言开发的插件。
(下载,常用快捷键,个性化配置,通用插件,前端插件,java开发插件,go开发插件,c#开发插件)
下载
https://code.visualstudio.com/Download
常用快捷键
打开命令面板(F1)
快速打开(ctrl + P)
注释行(ctrl + /)
全局搜索(ctrl + shift + F)
清除全部没用的import(alt + shift + o)
更多快捷键:https://code.visualstudio.com/docs/getstarted/keybindings
个性化配置
设为双击打开文件
设置里搜索“open mode”,把下拉选项改成doubleClick
取消点击预览功能
设置里搜索“preview”,点击工作台,把第一个打勾框的勾去掉
自动保存
设置里搜索“auto save”,选择afterDelay
通用插件
Live Server
静态服务,方便浏览html页面,并且修改页面后会立即更新
Material Icon Theme
解决目录图标不明显的问题
Chinese (Simplified)
中文支持
YAML
支持yml文件的格式
Visual Studio IntelliCode
只能感应提示
Tabnine AI Autocomplete
具有AI特性的代码智能提示
前端开发用到的插件:
Vetur (vue的支持)
Auto Close Tag (自动添加HTML/XML的结束标记)
Auto Rename Tag (自动完成另一侧标签的同步修改)
Auto Import (自动处理import,支持TS和TSX)
JavaScript(ES6) code snippets —— ES6语法智能提示以及快速输入,除js外还支
Path Intellisense —— 自动路径补全
HTML CSS Support —— 让 html 标签上写class 智能提示当前项目所支持的样式
vscode-color-picker 方便样式里直接进行颜色选择
Prettier - Code formatter 代码格式化
Beautify——格式化代码,值得注意的是,beautify插件支持自定义格式化代码规则
Bracket Pair Colorizer 2——给括号加上不同的颜色,便于区分不同的区块,使用者可以定义不同括号类型和不同颜色
open in browser——直接右键项目单击启动
开发java用到的插件:
// java基础
Extension Pack for Java
Debugger for Java
Maven for Java
Project Manager for Java
Test Runner for Java
Spring Boot Extension Pack
Quarkus
Quarkus snippets
开发go用到的插件:
Go
Go Nightly
开发C#用到的插件:
C#语言开发支持
C# Extensions
Auto-Using for C#
C# XML Documentation Comments
10 月 21 日消息,微软现已推出了可完全在浏览器中运行的轻量级 VS Code 网页预览版,该程序可以允许开发者直接使用浏览器中的 VS Code,无需使用本地安装版本进行开发。
早在 2019 年,微软就趁着 .dev 顶级域名开放注册时,申请了 vscode.dev、并将之重定向到code.visualstudio.com 。然而直到本周三,微软才正式发布了可完全在浏览器中运行的轻量级 VS Code 。这意味着开发者无需任何安装,就可以使用基于浏览器的 VS Code打开本地机器上的文件夹并开始编程工作。现在,当用户打开https://vscode.dev时,就会收到这个轻量级版本的 VS Code。
新的体验
基于浏览器的VS Code可提供以下体验:
可对本地文件进行查看和编辑。可以快速在Markdown中做笔记(并预览)即使您的设备受限而无法安装完整的VS Code,您依然可以使用vscode.dev来查看和编辑本地文件。
构建HTML、JavaScript 和CSS应用程序的客户端,并可结合浏览器工具进行调试。
可在很难安装VS Code的低功率机器(如 Chromebook)上编辑代码。
可以在iPad上使用。您可以上传/下载文件(甚至可以将文件存储在云中),还可以通过内置GitHub Repositories extension远程打开存储库。
除此之外,基于浏览器的 VS Code还内置了存储库(GitHub Repositories)、代码空间(Codespaces)和查询请求(Pull Request)扩展。
与GitHub.dev的区别
以下是基于浏览器的 VS Code与 GitHub.dev 在线编辑器的区别:
GitHub.dev 为深度集成到 GitHub 中的 Web 版 VS Code 定制实例,可以自动登录,URL 格式遵循 github.com 的 /organization/repo 格式,并且它是为 GitHub 定制的,允许用户简单地改变 .com 或 .dev 域名后缀来编辑某个 repo,具有亮色和暗色模式。除了 GitHub 上的存储库之外,基于浏览器的VS Code还支持 Azure Repos(作为 Azure DevOps 的一部分)。
微软在其官方博客中表示:“将 VS Code 植入浏览器是对该开发套件最初愿景的实现。对于 VS Code 也是一个全新的开始。人们只需要一台能联网的电脑和一个浏览器就可以在未来实现开发,在那种环境下人们可以随时随地的开发代码。期待未来的发展。”
<iframe scrolling="no" frameborder="0" class="vote_iframe js_editor_vote_card" data-display-style="height: 256px;" data-display-src="/cgi-bin/readtemplate?t=vote/vote-new_tmpl&__biz=MjM5MjAwODM4MA==&supervoteid=455314322&token=844817107&lang=zh_CN" data-src="/mp/newappmsgvote?action=show&__biz=MjM5MjAwODM4MA==&supervoteid=455314322#wechat_redirect" data-supervoteid="455314322" allowfullscreen=""></iframe>
参考链接:
https://mspoweruser.com/microsoft-vs-code-running-in-browser/
https://code.visualstudio.com/blogs/2021/10/20/vscode-dev
☞三大院士、十大数据库掌门人,岳麓对话开启数字经济新时代!
使用了12个月的苹果M1芯片,我发现了它的「致命」弱点
*请认真填写需求信息,我们会在24小时内与您取得联系。