微軟發(fā)布輕量級(jí) VS Code 工具，可完全在瀏覽器中運(yùn)行

整理 | 祝濤

出品 | CSDN（ID：CSDNnews）

10 月 21 日消息，微軟現(xiàn)已推出了可完全在瀏覽器中運(yùn)行的輕量級(jí) VS Code 網(wǎng)頁(yè)預(yù)覽版，該程序可以允許開(kāi)發(fā)者直接使用瀏覽器中的 VS Code，無(wú)需使用本地安裝版本進(jìn)行開(kāi)發(fā)。

早在 2019 年，微軟就趁著 .dev 頂級(jí)域名開(kāi)放注冊(cè)時(shí)，申請(qǐng)了 vscode.dev、并將之重定向到code.visualstudio.com 。然而直到本周三，微軟才正式發(fā)布了可完全在瀏覽器中運(yùn)行的輕量級(jí) VS Code 。這意味著開(kāi)發(fā)者無(wú)需任何安裝，就可以使用基于瀏覽器的 VS Code打開(kāi)本地機(jī)器上的文件夾并開(kāi)始編程工作。現(xiàn)在，當(dāng)用戶(hù)打開(kāi)https://vscode.dev時(shí)，就會(huì)收到這個(gè)輕量級(jí)版本的 VS Code。

新的體驗(yàn)

基于瀏覽器的VS Code可提供以下體驗(yàn)：

可對(duì)本地文件進(jìn)行查看和編輯。可以快速在Markdown中做筆記（并預(yù)覽）即使您的設(shè)備受限而無(wú)法安裝完整的VS Code，您依然可以使用vscode.dev來(lái)查看和編輯本地文件。
構(gòu)建HTML、JavaScript 和CSS應(yīng)用程序的客戶(hù)端，并可結(jié)合瀏覽器工具進(jìn)行調(diào)試。
可在很難安裝VS Code的低功率機(jī)器（如 Chromebook）上編輯代碼。
可以在iPad上使用。您可以上傳/下載文件（甚至可以將文件存儲(chǔ)在云中），還可以通過(guò)內(nèi)置GitHub Repositories extension遠(yuǎn)程打開(kāi)存儲(chǔ)庫(kù)。

除此之外，基于瀏覽器的 VS Code還內(nèi)置了存儲(chǔ)庫(kù)（GitHub Repositories）、代碼空間（Codespaces）和查詢(xún)請(qǐng)求（Pull Request）擴(kuò)展。

與GitHub.dev的區(qū)別

以下是基于瀏覽器的 VS Code與 GitHub.dev 在線(xiàn)編輯器的區(qū)別：

GitHub.dev 為深度集成到 GitHub 中的 Web 版 VS Code 定制實(shí)例，可以自動(dòng)登錄，URL 格式遵循 github.com 的 /organization/repo 格式，并且它是為 GitHub 定制的，允許用戶(hù)簡(jiǎn)單地改變 .com 或 .dev 域名后綴來(lái)編輯某個(gè) repo，具有亮色和暗色模式。除了 GitHub 上的存儲(chǔ)庫(kù)之外，基于瀏覽器的VS Code還支持 Azure Repos（作為 Azure DevOps 的一部分）。

微軟在其官方博客中表示：“將 VS Code 植入瀏覽器是對(duì)該開(kāi)發(fā)套件最初愿景的實(shí)現(xiàn)。對(duì)于 VS Code 也是一個(gè)全新的開(kāi)始。人們只需要一臺(tái)能聯(lián)網(wǎng)的電腦和一個(gè)瀏覽器就可以在未來(lái)實(shí)現(xiàn)開(kāi)發(fā)，在那種環(huán)境下人們可以隨時(shí)隨地的開(kāi)發(fā)代碼。期待未來(lái)的發(fā)展?！?/span>

參考鏈接：

https://mspoweruser.com/microsoft-vs-code-running-in-browser/
https://code.visualstudio.com/blogs/2021/10/20/vscode-dev


?三大院士、十大數(shù)據(jù)庫(kù)掌門(mén)人，岳麓對(duì)話(huà)開(kāi)啟數(shù)字經(jīng)濟(jì)新時(shí)代！
使用了12個(gè)月的蘋(píng)果M1芯片，我發(fā)現(xiàn)了它的「致命」弱點(diǎn)

紹

code-server 是一個(gè)可以在遠(yuǎn)程服務(wù)器上運(yùn)行 VS Code 的工具，可以說(shuō)是服務(wù)器端的VSCode，你可以部署到遠(yuǎn)程服務(wù)器，然后在瀏覽器進(jìn)行訪問(wèn)，來(lái)達(dá)到近乎本地的體驗(yàn)效果，code-server就是這樣一個(gè)工具，為云端編輯器提供了強(qiáng)大的解決方案，而且是開(kāi)源的！

Github和官網(wǎng)

https://github.com/cdr/code-server/
https://coder.com/

code-server的優(yōu)勢(shì)

1、很明顯，你可以不用下載本地應(yīng)用，直接部署到服務(wù)器之后，在本地瀏覽器就可以打開(kāi)，非常的方便；

2、多端開(kāi)發(fā)環(huán)境統(tǒng)一，已經(jīng)在云端，那么你只需要配置一個(gè)環(huán)境，就全部統(tǒng)一了，不需要在多端同步，未來(lái)很多應(yīng)用可能只是你書(shū)簽中一個(gè)某一個(gè)而已；

3、包括流暢性和功能上，幾乎和原生VSCode擁有一致的體驗(yàn)，當(dāng)然這取決于你的網(wǎng)絡(luò)環(huán)境。

安裝步驟

本篇將在Linux上進(jìn)行演示，由于條件限制，就在本地的Deepin linux上進(jìn)行測(cè)試，執(zhí)行以下命令即可（可能會(huì)有網(wǎng)絡(luò)問(wèn)題，最近Github可能訪問(wèn)效果不佳，稍后會(huì)打包上傳至Gitee附件），除了可以部署在本地，你還可以部署到Docker容器中，因?yàn)楣P者docker用的不多，本文就不在細(xì)說(shuō)。

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

以上命令不在細(xì)說(shuō)，你可以分步執(zhí)行，也可以一起粘貼過(guò)去執(zhí)行，都沒(méi)問(wèn)題，不出意外，應(yīng)該和以下截圖類(lèi)似

此時(shí)你就可以打開(kāi)你的瀏覽器進(jìn)行體驗(yàn)了，訪問(wèn)你的8443端口，如下圖可能會(huì)出現(xiàn)安全提示，我們先不管，因?yàn)槭莌ttp的請(qǐng)求

點(diǎn)擊繼續(xù)訪問(wèn)，然后就會(huì)到一個(gè)登錄界面來(lái)，輸入密碼，密碼在你的終端上

密碼復(fù)制下來(lái)，輸入，驚喜的時(shí)刻到了，看圖

這可不就是VSCode，接下來(lái)可能還夠你折騰一陣子。

體驗(yàn)一下

我這里只以最簡(jiǎn)單的例子來(lái)測(cè)試，如下圖，一個(gè)最簡(jiǎn)單的html

我們?cè)谶@個(gè)地方安裝一個(gè)擴(kuò)展live server，這是我經(jīng)常用的擴(kuò)展，瀏覽器可以實(shí)時(shí)刷新，非常實(shí)用

安裝完成后我們到index.html文件，右擊

不出意外地話(huà)，會(huì)提示啟動(dòng)在本地的5500端口，我們?cè)跒g覽器打開(kāi)測(cè)試，如下圖：

由于是在本地，一切看上去都是那么的美好！

擴(kuò)展安裝

我在本地測(cè)試，很多安全性的工作并沒(méi)有做，在安裝擴(kuò)展的時(shí)候我可以直接安裝，除部分類(lèi)似語(yǔ)言包不支持以外，其他插件，類(lèi)似主題、圖標(biāo)、路徑自動(dòng)完成、智能提示等都是正常安裝，如下圖

主題正常安裝

可能有些小伙伴在安裝擴(kuò)展的時(shí)候會(huì)遇到很多問(wèn)題，在安裝到服務(wù)器的時(shí)候，安裝擴(kuò)展可能沒(méi)那么容易，所以還有一種解決方案就是，你可以到下載離線(xiàn)的擴(kuò)展包，然后通過(guò)離線(xiàn)的方式進(jìn)行安裝，前提是你有一定的權(quán)限。這部分就需要你自己好好把控了，畢竟安全為重！

官方原話(huà)：目前我們無(wú)法使用官方VSCode Marketplace。我們創(chuàng)建了一個(gè)專(zhuān)注于開(kāi)源擴(kuò)展的自定義擴(kuò)展市場(chǎng)。但是，如果您有權(quán)訪問(wèn).vsix文件，則可以手動(dòng)安裝擴(kuò)展。

離線(xiàn)安裝方法：

之前在Windows 10的linux子系統(tǒng)中安裝遇到各種奇葩問(wèn)題，在確定是在浪費(fèi)時(shí)間后，直接轉(zhuǎn)到Linux安裝后，非常的順暢

其它事項(xiàng)

因?yàn)槲沂窃贒eepin的桌面版Linux上進(jìn)行測(cè)試的，每個(gè)人測(cè)試的環(huán)境可能不一樣，遇到的問(wèn)題可能也不一樣，所以感興趣的小伙伴可以自行嘗試，如果你和我一樣也是本地測(cè)試，那么非常容易的事情就是可能一切你都只需要點(diǎn)點(diǎn)鼠標(biāo)，特別是對(duì)Linux不熟的，比如我自己，就不需要那么多命令了。Deepin個(gè)人感覺(jué)對(duì)我們開(kāi)發(fā)人員而言已經(jīng)相當(dāng)?shù)挠押昧耍?/p>

總結(jié)

code-server確實(shí)是一個(gè)非常強(qiáng)大的工具，我相信在將來(lái)，云端編程可能會(huì)是一種趨勢(shì)，這樣能節(jié)省大量的安裝配置工作，一切都在云端共享，code-server不會(huì)是第一個(gè)，也不會(huì)是最后一個(gè)，由于筆者對(duì)Web技術(shù)的熱愛(ài)，真心希望更多優(yōu)秀的Web產(chǎn)品百花齊放，也祝愿所有熱愛(ài)軟件開(kāi)發(fā)和學(xué)習(xí)的朋友能夠?qū)崿F(xiàn)自己的理想！

由于近期Github訪問(wèn)不穩(wěn)定，也有可能是我本地網(wǎng)絡(luò)原因，訪問(wèn)不是很順暢，那么我也將code-server的發(fā)布版?zhèn)浞莸搅宋业囊粋€(gè)碼云倉(cāng)庫(kù)，如下，點(diǎn)擊附件，找到你想要的
https://gitee.com/null_341_5574/chrome_plugin

提：已創(chuàng)建vue項(xiàng)目，未創(chuàng)建請(qǐng)參考 https://www.toutiao.com/article/7398100974524449330/

步驟 1：在項(xiàng)目目錄下，安裝 Element UI（Element UI 是一個(gè)基于 Vue.js 的組件庫(kù)，它提供了一套為開(kāi)發(fā)者設(shè)計(jì)和實(shí)現(xiàn)用戶(hù)界面的解決方案。Element UI 提供了大量預(yù)設(shè)計(jì)的組件，如按鈕、輸入框、選擇器等，這可以幫助開(kāi)發(fā)者快速構(gòu)建應(yīng)用程序界面。

Element ui的手冊(cè)網(wǎng)站： https://element-plus.org/zh-CN/guide/installation.html ）

操作：在vscode中打開(kāi)項(xiàng)目根目錄，按ctrl+~鍵打開(kāi)終端，在終端中輸入npm install element-plus --save

步驟2：在 main.js 中引入 Element Plus 和相關(guān)的樣式（此方式是全局引入即將Element所有的組件引入）：

import { createApp } from 'vue';

import App from './App.vue';

import router from './router'; // 導(dǎo)入路由

import ElementPlus from 'element-plus'; // 導(dǎo)入 Element Plus

import 'element-plus/dist/index.css'; // 導(dǎo)入 Element Plus 的 CSS 樣式

// 創(chuàng)建 Vue 應(yīng)用實(shí)例

const app = createApp(App);

// 使用路由

app.use(router);

// 使用 Element Plus 插件

app.use(ElementPlus);

// 掛載應(yīng)用

app.mount('#app');

步驟3：使用 Element Plus 組件

打開(kāi)網(wǎng)站的“組件”界面，在左側(cè)選擇要添加的組件，如：按鈕；在右側(cè)出現(xiàn)各種樣式的按鈕，點(diǎn)擊樣式右下角的“<>”顯示出源代碼，復(fù)制源代進(jìn)行調(diào)用。

實(shí)操：我們可以在新建一個(gè)dome.vue頁(yè)面，使用一個(gè)按鈕組件：

（1）創(chuàng)建新頁(yè)面，選中views右擊點(diǎn)擊“新建文件”在文件中輸入“dome.vue”

（2）選擇按鈕樣式，這里我選擇success按鈕，復(fù)制相對(duì)應(yīng)的代碼<el-button type="success">Success</el-button>

（3）將代碼添加到頁(yè)面中

<template>

<el-button type="success">Success</el-button>

</template>

<script setup>

</script>

<style>

/* 這里可以添加樣式 */

</style>

在線(xiàn)咨詢(xún)

上一篇：開(kāi)發(fā)技巧分享—教你用拼音首字母快速搜索 & 函數(shù)編寫(xiě)增強(qiáng)
下一篇：js上傳圖片和展示圖片

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

微軟發(fā)布輕量級(jí) VS Code 工具，可完全在瀏覽器中運(yùn)行

紹