整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
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芯片，我發現了它的「致命」弱點
code-server 是一個可以在遠程服務器上運行 VS Code 的工具，可以說是服務器端的VSCode，你可以部署到遠程服務器，然后在瀏覽器進行訪問，來達到近乎本地的體驗效果，code-server就是這樣一個工具，為云端編輯器提供了強大的解決方案，而且是開源的！
https://github.com/cdr/code-server/
https://coder.com/
1、很明顯，你可以不用下載本地應用，直接部署到服務器之后，在本地瀏覽器就可以打開，非常的方便；
2、多端開發環境統一，已經在云端，那么你只需要配置一個環境，就全部統一了，不需要在多端同步，未來很多應用可能只是你書簽中一個某一個而已；
3、包括流暢性和功能上，幾乎和原生VSCode擁有一致的體驗，當然這取決于你的網絡環境。
本篇將在Linux上進行演示，由于條件限制，就在本地的Deepin linux上進行測試，執行以下命令即可（可能會有網絡問題，最近Github可能訪問效果不佳，稍后會打包上傳至Gitee附件），除了可以部署在本地，你還可以部署到Docker容器中，因為筆者docker用的不多，本文就不在細說。
wget https://github.com/cdr/code-server/releases/download/1.1156-vsc1.33.1/code-server1.1156-vsc1.33.1-linux-x64.tar.gz tar -xzvf code-server1.1156-vsc1.33.1-linux-x64.tar.gz cd code-server1.1156-vsc1.33.1-linux-x64 chmod -R 777 code-server ./code-server
以上命令不在細說，你可以分步執行，也可以一起粘貼過去執行，都沒問題，不出意外，應該和以下截圖類似
此時你就可以打開你的瀏覽器進行體驗了，訪問你的8443端口，如下圖可能會出現安全提示，我們先不管，因為是http的請求
點擊繼續訪問，然后就會到一個登錄界面來，輸入密碼，密碼在你的終端上
密碼復制下來，輸入，驚喜的時刻到了，看圖
這可不就是VSCode，接下來可能還夠你折騰一陣子。
我這里只以最簡單的例子來測試，如下圖，一個最簡單的html
我們在這個地方安裝一個擴展live server，這是我經常用的擴展，瀏覽器可以實時刷新，非常實用
安裝完成后我們到index.html文件，右擊
不出意外地話，會提示啟動在本地的5500端口，我們在瀏覽器打開測試，如下圖：
由于是在本地，一切看上去都是那么的美好！
我在本地測試，很多安全性的工作并沒有做，在安裝擴展的時候我可以直接安裝，除部分類似語言包不支持以外，其他插件，類似主題、圖標、路徑自動完成、智能提示等都是正常安裝，如下圖
主題正常安裝
可能有些小伙伴在安裝擴展的時候會遇到很多問題，在安裝到服務器的時候，安裝擴展可能沒那么容易，所以還有一種解決方案就是，你可以到下載離線的擴展包，然后通過離線的方式進行安裝，前提是你有一定的權限。這部分就需要你自己好好把控了，畢竟安全為重！
官方原話：目前我們無法使用官方VSCode Marketplace。我們創建了一個專注于開源擴展的自定義擴展市場。但是，如果您有權訪問.vsix文件，則可以手動安裝擴展。
離線安裝方法：
之前在Windows 10的linux子系統中安裝遇到各種奇葩問題，在確定是在浪費時間后，直接轉到Linux安裝后，非常的順暢
因為我是在Deepin的桌面版Linux上進行測試的，每個人測試的環境可能不一樣，遇到的問題可能也不一樣，所以感興趣的小伙伴可以自行嘗試，如果你和我一樣也是本地測試，那么非常容易的事情就是可能一切你都只需要點點鼠標，特別是對Linux不熟的，比如我自己，就不需要那么多命令了。Deepin個人感覺對我們開發人員而言已經相當的友好了！
code-server確實是一個非常強大的工具，我相信在將來，云端編程可能會是一種趨勢，這樣能節省大量的安裝配置工作，一切都在云端共享，code-server不會是第一個，也不會是最后一個，由于筆者對Web技術的熱愛，真心希望更多優秀的Web產品百花齊放，也祝愿所有熱愛軟件開發和學習的朋友能夠實現自己的理想！
由于近期Github訪問不穩定，也有可能是我本地網絡原因，訪問不是很順暢，那么我也將code-server的發布版備份到了我的一個碼云倉庫，如下，點擊附件，找到你想要的
https://gitee.com/null_341_5574/chrome_plugin
提：已創建vue項目，未創建請參考 https://www.toutiao.com/article/7398100974524449330/
步驟 1：在項目目錄下，安裝 Element UI（Element UI 是一個基于 Vue.js 的組件庫，它提供了一套為開發者設計和實現用戶界面的解決方案。Element UI 提供了大量預設計的組件，如按鈕、輸入框、選擇器等，這可以幫助開發者快速構建應用程序界面。
Element ui的手冊網站： https://element-plus.org/zh-CN/guide/installation.html ）
操作：在vscode中打開項目根目錄，按ctrl+~鍵打開終端，在終端中輸入npm install element-plus --save
步驟2：在 main.js 中引入 Element Plus 和相關的樣式（此方式是全局引入即將Element所有的組件引入）：
import { createApp } from 'vue';
import App from './App.vue';
import router from './router'; // 導入路由
import ElementPlus from 'element-plus'; // 導入 Element Plus
import 'element-plus/dist/index.css'; // 導入 Element Plus 的 CSS 樣式
// 創建 Vue 應用實例
const app = createApp(App);
// 使用路由
app.use(router);
// 使用 Element Plus 插件
app.use(ElementPlus);
// 掛載應用
app.mount('#app');
步驟3： 使用 Element Plus 組件
打開網站的“組件”界面，在左側選擇要添加的組件，如：按鈕；在右側出現各種樣式的按鈕，點擊樣式右下角的“<>”顯示出源代碼，復制源代進行調用。
實操：我們可以在新建一個dome.vue頁面，使用一個按鈕組件：
（1）創建新頁面，選中views右擊點擊“新建文件”在文件中輸入“dome.vue”
（2）選擇按鈕樣式，這里我選擇success按鈕，復制相對應的代碼<el-button type="success">Success</el-button>
（3）將代碼添加到頁面中
<template>
<el-button type="success">Success</el-button>
</template>
<script setup>
</script>
<style>
/* 這里可以添加樣式 */
</style>
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
