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小時內與您取得聯系。