软萌小姐姐居家直播,讲解 IDE 插件以及VS Code新版本发布,开发部署提速8倍

本文涉及的产品
服务治理 MSE Sentinel/OpenSergo,Agent数量 不受限
简介: 软萌小姐姐居家直播——前端新突破,IDE 插件发布 Visual Studio Code 新版本,一键打包部署,开发提速 8 倍

软萌音中间件小姐姐,居家直播,连麦互动,手把手教你开发部署提速8倍,2月10日晚上8点,钉钉扫码加群看直播。

去年,阿里云发布了本地 IDE 插件 Cloud Toolkit,仅 IntelliJ IDEA 一个平台,就有 15 万以上的开发者进行了下载,体验了一键部署带来的开发便利。时隔一年的今天,阿里云正式发布了 Visual Studio Code 版本,全面覆盖前端开发者,帮助前端实现一键打包部署,让开发提速 8 倍。

Cloud Toolkit 是免费的本地 IDE 插件,帮助开发者更高效地开发、测试、诊断并部署应用。通过插件,可以将本地应用一键部署到任意服务器,甚至云端(ECS、EDAS、ACK、ACR 和 小程序云 等);并且还内置了 Arthas 诊断、Dubbo工具、Terminal 终端、文件上传、函数计算 和 MySQL 执行器等工具。获查看详情:https://cn.aliyun.com/product/cloudtoolkit

VSCode 版本的插件,目前能做到什么?

安装插件之后,开发者可以立即体验以下任何一个功能:

  • 将本地 Visual Studio Code 中的代码,一键打包、部署到任意的阿里云 ECS 服务器;
  • 将本地 Visual Studio Code 中的代码,一键打包、部署到任意的远程服务器;
  • 向任意的阿里云 ECS 或者 任意远程服务器 发送并执行指定的命令(即将发布);

VSCode 版本的插件正不断更新迭代中,不久将会有更多强大的功能上线,请期待!或向我们提出需求!

如何下载插件?

开发者可以通过在线安装或离线安装方式来下载插件:

阿里云 Cloud Toolkit 和其他任何插件安装方式一致,因此不做赘述,下面为大家详细介绍插件功能。

一键打包部署

一、添加服务器

如下图所示,在 Visual Studio Code 左侧,点击阿里云图标,在出现的菜单中,点击Alibaba Cloud Toolkit - Host View打开机器视图界面。

然后点击右上角Add Host按钮,出现添加机器界面,如下图。按照表单提示,填入对应的机器 IP,端口、用户名和密码即可。

二、部署

点击 Run Configurations - Deployments - Deploy to Host 创建一个新的部署配置,配置界面如下:

在 Deploy to Host 对话框设置部署参数,然后单击 Apply,即可保存。

部署参数说明:

  • Name:未配置定义一个名字,以便更容易区分多个配置;
  • File:选择打包方式;
  • Project:选择待部署工程的根目录;
  • Build Output Directory:打包之后的 Output 目录;
  • Webpack Configuration:Webpack 配置;
  • Target Host:部署的远程目标服务器;
  • Target Directory:远程目标服务器上的指定部署目录;
  • After deploy:输入应用启动命令,如 sh /root/restart.sh,表示在完成应用包的部署后,需要执行的命令 —— 对于 Java 程序而言,通常是一句 Tomcat 的启动命令。

关于 Cloud Toolkit 团队

欢迎加入我们 Cloud Toolkit 社群,随时向我们产品经理、研发团队提出新需求、优化建议、提出 Bug 等等,我们解决你的疑惑、满足你的需求、提升你的体验。现在,诚邀您一起创造一款真正属于开发者的插件,让开发部署不再繁琐。

钉钉扫码加群

微信扫码,产品经理拉你进群
相关文章
|
25天前
sublime和vscode 推荐安装的插件
sublime和vscode 推荐安装的插件
9 0
|
26天前
|
敏捷开发 人工智能 前端开发
让你爽到飞起的【懒人插件AutoScssStruct4Vue】VSCode根据template的标签目录自动一键生成CSS/SCSS/LESS结构,敏捷开发必备插件!!!
让你爽到飞起的【懒人插件AutoScssStruct4Vue】VSCode根据template的标签目录自动一键生成CSS/SCSS/LESS结构,敏捷开发必备插件!!!
|
7天前
|
IDE 测试技术 项目管理
集成开发环境(IDE)的使用:提升Visual Basic开发效率的工具和技巧
【4月更文挑战第27天】本文探讨了如何使用Visual Basic IDE提升开发效率,包括理解IDE组件、利用代码编辑器的智能功能、通过界面设计器设计GUI、使用调试和测试工具、有效管理项目与版本控制、掌握快捷键和宏、定制IDE以及利用学习资源。通过充分利用这些工具和技巧,开发者能更快地编写高质量代码,高效管理项目,从而提升整体开发效率。随着IDE的持续发展,开发者应不断学习新特性以适应进步。
|
26天前
|
前端开发
解决适配375像素宽度667像素高度移动端方法:推荐一款非常好用的px转rem单位的VSCode插件px to rem & rpx (cssrem)
解决适配375像素宽度667像素高度移动端方法:推荐一款非常好用的px转rem单位的VSCode插件px to rem & rpx (cssrem)
|
3天前
|
API 开发工具 C++
【专栏:工具与技巧篇】使用代码编辑器(VS Code/Sublime Text)提升开发效率
【4月更文挑战第30天】在VS Code与Sublime Text两大流行代码编辑器中,开发者可借助其高效特性提升编程效率。VS Code拥有丰富的插件生态、内置Git集成、强大的调试工具、智能提示和多文件导航功能。Sublime Text则以其轻量级、快速响应、多光标编辑及自定义构建系统见长。学习编辑器的键盘快捷键、自定义配置、使用内置终端以及键绑定和宏,将助开发者进一步提高开发效率。选择适合自己的编辑器并不断适应新技术是提升开发工作流的关键。
|
11天前
|
数据可视化 网络安全 开发工具
【新人必会】远程开发可视化 - VSCode篇
【新人必会】远程开发可视化 - VSCode篇
30 0
|
11天前
|
Web App开发 XML 传感器
VSCode 开发Vue必备插件
VSCode 开发Vue必备插件
11 0
|
18天前
VSCode插件分享--免费的ER工具
VSCode插件分享--免费的ER工具
15 0
|
22天前
|
JavaScript 开发工具 git
【Vscode】 Vscode常用插件
【Vscode】 Vscode常用插件
38 0
|
27天前
|
JavaScript
VSCode 开发 Vue 语法提示
VSCode 开发 Vue 语法提示