整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
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
.简介：
Visual Studio Code 是一款轻量级但功能强大的源代码编辑器，可在您的桌面上运行。它内置了对 JavaScript和 Node.js 的支持，并为其他语言（例如： Python、PHP、Go）提供了丰富的扩展生态系统。
2.具体使用过程：
1.将软件下载和解压
2.在解压的文件夹中找到code.exe,双击运行。
3.在电脑上建立保存源代码的一个文件夹,例：js-test
4.在vscdoe的主界面安装中文插件。
5.文件->打开文件夹（你自己建立的文件夹例如：js-test）
6.主界面最左侧（资源管理器）-选中我们打开的文件夹
7.选择新建文件按钮-输入文件名（注意扩展名为.html）
8.输入html：5并回车，自动产生html文档结构，或自己输入。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>提示：请使用代码提示功能，代码输入，除了汉字之外，所有的字符都是在英文状态下输入。
9. 主界面->运行->调试（选择自己安装的浏览器）
.效果图1
2.准备
2.1 浏览器，简单，绝大多数浏览器都支持
2.2 下载echarts库js文件
官网上下载：
https://www.echartsjs.com/zh/index.html
2.3 有3个js库文件下载好放在同一个目录下，如下导入：
<script src="jquery.min.js"></script>
<script src="echarts.js"></script>
<script src="china.js"></script>3.用txt复制如下代码，当然也可以直接复制到代码编辑器中，我用的是微软vsc
4.取个名字，建议先后缀为js，然后复制一个，再取名为html，这是本地操作
图2
5.代码：（js和html的代码）
<!DOCTYPE html>
<html>
<head>
<!--代码声明，否则容易乱码-->
<meta charset="utf-8">
<title>全国各省市支援湖北武汉抗击新冠疫情图</title>
<!-- .centerItem(展示图片的画布大小、边缘设置) -->
<style>
.centerItem {width:800px;height:500px;background-color: #003077;margin:10px auto 0 auto;}
</style>
</head>
<body>
<!--设置div容器，定义id名字，类=画布=centerItem-->
<div id="mapBox" class="centerItem"></div>
<!-- 引入相关js文件或库，这个是有点难，尤其是从官网上复制相关代码时，未指定js文件或库或插件-->
<script src="jquery.min.js"></script>
<script src="echarts.js"></script>
<script src="china.js"></script>
<script>
// 新版已经不要求加script type="text/javascript"放在里面了
// 基于准备好的dom，初始化echarts实例
var mapBoxEchart=echarts.init(document.getElementById('mapBox'));
// 以下可以从官网上复制相关代码---
var chinaGeoCoordMap={
// 这些地理坐标可以网上查找，也可以放在json中，然后引用
'黑龙江': [127.9688, 45.368],
'内蒙古': [110.3467, 41.4899],
"吉林": [125.8154, 44.2584],
'北京市': [116.4551, 40.2539],
"辽宁": [123.1238, 42.1216],
"河北": [114.4995, 38.1006],
"天津": [117.4219, 39.4189],
"山西": [112.3352, 37.9413],
"陕西": [109.1162, 34.2004],
"甘肃": [103.5901, 36.3043],
"宁夏": [106.3586, 38.1775],
"青海": [101.4038, 36.8207],
"新疆": [87.9236, 43.5883],
"西藏": [91.11, 29.97],
"四川": [103.9526, 30.7617],
"重庆": [108.384366, 30.439702],
"山东": [117.1582, 36.8701],
"河南": [113.4668, 34.6234],
"江苏": [118.8062, 31.9208],
"安徽": [117.29, 32.0581],
"湖北": [114.3896, 30.6628],
"浙江": [119.5313, 29.8773],
"福建": [119.4543, 25.9222],
"江西": [116.0046, 28.6633],
"湖南": [113.0823, 28.2568],
"贵州": [106.6992, 26.7682],
"云南": [102.9199, 25.4663],
"广东": [113.12244, 23.009505],
"广西": [108.479, 23.1152],
"海南": [110.3893, 19.8516],
'上海': [121.4648, 31.2891],
'舟山': [122.207216, 29.985295],
'昆明': [102.9199, 25.4663],
'香港': [114.1, 22.2],
'澳门': [113.33, 22.13],
'北京': [116.4551, 40.2539],
'台湾': [121.30, 25.03],
};
// 我把格式整理一下，感觉js代码格式看着很多括号占一行，很难受
var chinaDatas=[
[{name: '黑龙江',value: 0}],
[{name: '内蒙古',value: 0}],
[{name: '吉林',value: 0}],
[{name: '辽宁',value: 0}],
[{name: '河北',value: 0}],
[{name: '天津',value: 0}],
[{name: '山西',value: 0}],
[{name: '陕西',value: 0}],
[{name: '甘肃',value: 0}],
[{name: '宁夏',value: 0}],
[{name: '青海',value: 0}],
[{name: '新疆',value: 0}],
[{name: '西藏',value: 0}],
[{name: '四川',value: 0}],
[{name: '重庆',value: 0}],
[{name: '山东',value: 0}],
[{name: '河南',value: 0}],
[{name: '江苏',value: 0}],
[{name: '安徽',value: 0}],
[{name: '湖北',value: 0}],
[{name: '浙江',value: 0}],
[{name: '福建',value: 0}],
[{name: '江西',value: 0}],
[{name: '湖南',value: 0}],
[{name: '贵州',value: 0}],
[{name: '广西',value: 0}],
[{name: '海南',value: 0}],
[{name: '上海',value: 0}],
[{name: '昆明',value: 0}],
[{name: '广东',value: 0}],
[{name: '香港',value: 0}],
[{name: '澳门',value: 0}],
[{name: '北京',value: 0}],
[{name: '台湾',value: 0}],
// 我是舟山人，当然支援湖北武汉要用红色，与众不同些
[{name: '舟山',value: 1}],
];
var convertData=function(data)
{
var res=[];
for(var i=0; i < data.length; i++)
{
var dataItem=data[i];
var fromCoord=chinaGeoCoordMap[dataItem[0].name];
// 设置湖北坐标点为终止点tocoord
var toCoord=[114.3896, 30.6628];
if(fromCoord && toCoord)
{res.push([{coord: fromCoord,value: dataItem[0].value}, {coord: toCoord}])}
}
return res;
};
var series=[];
[['湖北', chinaDatas]].forEach(function(item, i)
{
console.log(item)
series.push(
{type: 'lines',zlevel: 2,effect: {show: true,
period: 4, //箭头指向速度，值越小速度越快
trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'arrow', //箭头图标
symbolSize: 5, //图标大小
},
lineStyle: {normal: {
width: 1, //尾迹线条宽度
opacity: 1, //尾迹线条透明度
curveness: .3 //尾迹线条曲直度
}
},
data: convertData(item[1])
},
{type: 'effectScatter',coordinateSystem: 'geo',zlevel: 2,
rippleEffect: { //涟漪特效
period: 4, //动画时间，值越小速度越快
brushType: 'stroke', //波纹绘制方式 stroke, fill
scale: 4 //波纹圆环最大限制，值越大波纹越大
},
label: {normal: {show: true,position: 'right', //显示位置
offset: [5, 0], //偏移设置
formatter: function(params){return params.data.name}, //圆环显示文字
fontSize: 13
},
emphasis: {show: true}
},
symbol: 'circle',symbolSize: function(val) {return 5+ val[2] * 5}, //圆环大小
itemStyle: {normal: {show: false,color: '#f00'}},
// item[1]代表舟山到湖北是红色单独的，注意上面舟山的values值
data: item[1].map(function(dataItem)
{return {
name: dataItem[0].name,
value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
};
}
), //这个小括号是map后面的一对，括号太多，看的头晕，还是python好
}, //type后面的大括号
//被支援点的设置：湖北武汉
{type: 'scatter',coordinateSystem: 'geo',zlevel: 2,
rippleEffect: {period: 4,brushType: 'stroke',scale: 4},
label: {normal: {show: true,position: 'right',color: '#0f0',formatter: '{b}',
textStyle: {color: "#0f0"}
},
emphasis: {show: true,color: "#f60"}
},
symbol: 'pin',symbolSize: 50,
data: [{name: item[0],value: chinaGeoCoordMap[item[0]].concat([10]),
}],
} //type后面的大括号
); // push后面的小括号是一对
} //和湖北下面的大括号是一对
); // 是forEach(function的小括号是一对，看晕了
// 有时间前面加var，再空一格，注意单复数，与后面setOption括号里保持一致
option={
tooltip:
{
trigger: 'item',backgroundColor: 'rgba(166, 200, 76, 0.82)',borderColor: '#FFFFCC',
showDelay: 0,hideDelay: 0,enterable: true,transitionDuration: 0,
extraCssText: 'z-index:100',
formatter: function(params, ticket, callback)
{
//根据业务自己拓展要显示的内容
var res="";
var name=params.name;
var value=params.value[params.seriesIndex + 1];
res="<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
return res;
}
},
backgroundColor:"#013954",
//图例值控制
visualMap: { min: 0,max: 1,calculable: true,show: true,
color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
textStyle: {color: '#fff'}
},
geo: {map: 'china',zoom: 1.2,label: {emphasis: {show: false}},
roam: true, //是否允许缩放
itemStyle: {normal: {
color: 'rgba(51, 69, 89, .5)', //地图背景色
borderColor: '#516a89', //省市边界线00fcff 516a89
borderWidth: 1
},
emphasis: {color: 'rgba(37, 43, 61, .5)' } //悬浮背景
}
},
series: series
}; // 是option的后面的大括号是一对
// 使用制定的配置项和数据显示图表
mapBoxEchart.setOption(option);
// echart图表自适应
window.addEventListener("resize", function() {mapBoxEchart.resize()});
</script>
</body>
</html>6.说明一下：这不是python，代码繁琐，括号太多，注释还不一样。
6.1 注意小括号（），大括号{}对应
6.2 注释说明：
html中注释采用：
<!--xxx-->
在js代码中：
即<script>......</script>中，
采用：//,这个和python的#一样，是单行注释。
7.祝福：
武汉加油、湖北加油、中国加油！
武汉必胜、湖北必胜、中国必胜！
*请认真填写需求信息，我们会在24小时内与您取得联系。
