微软发布轻量级 VS Code 工具，可完全在浏览器中运行

整理 | 祝涛

出品 | CSDN（ID：CSDNnews）

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 也是一个全新的开始。人们只需要一台能联网的电脑和一个浏览器就可以在未来实现开发，在那种环境下人们可以随时随地的开发代码。期待未来的发展。”

参考链接：

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就是这样一个工具，为云端编辑器提供了强大的解决方案，而且是开源的！

Github和官网

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

code-server的优势

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>

在线咨询

上一篇：开发技巧分享—教你用拼音首字母快速搜索 & 函数编写增强
下一篇：js上传图片和展示图片

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商