整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
code-server 是一個(gè)可以在遠(yuǎn)程服務(wù)器上運(yùn)行 VS Code 的工具，可以說是服務(wù)器端的VSCode，你可以部署到遠(yuǎn)程服務(wù)器，然后在瀏覽器進(jìn)行訪問，來達(dá)到近乎本地的體驗(yàn)效果，code-server就是這樣一個(gè)工具，為云端編輯器提供了強(qiáng)大的解決方案，而且是開源的！
https://github.com/cdr/code-server/
https://coder.com/
1、很明顯，你可以不用下載本地應(yīng)用，直接部署到服務(wù)器之后，在本地瀏覽器就可以打開，非常的方便；
2、多端開發(fā)環(huán)境統(tǒng)一，已經(jīng)在云端，那么你只需要配置一個(gè)環(huán)境，就全部統(tǒng)一了，不需要在多端同步，未來很多應(yīng)用可能只是你書簽中一個(gè)某一個(gè)而已；
3、包括流暢性和功能上，幾乎和原生VSCode擁有一致的體驗(yàn)，當(dāng)然這取決于你的網(wǎng)絡(luò)環(huán)境。
本篇將在Linux上進(jìn)行演示，由于條件限制，就在本地的Deepin linux上進(jìn)行測試，執(zhí)行以下命令即可（可能會(huì)有網(wǎng)絡(luò)問題，最近Github可能訪問效果不佳，稍后會(huì)打包上傳至Gitee附件），除了可以部署在本地，你還可以部署到Docker容器中，因?yàn)楣P者docker用的不多，本文就不在細(xì)說。
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ì)說，你可以分步執(zhí)行，也可以一起粘貼過去執(zhí)行，都沒問題，不出意外，應(yīng)該和以下截圖類似
此時(shí)你就可以打開你的瀏覽器進(jìn)行體驗(yàn)了，訪問你的8443端口，如下圖可能會(huì)出現(xiàn)安全提示，我們先不管，因?yàn)槭莌ttp的請求
點(diǎn)擊繼續(xù)訪問，然后就會(huì)到一個(gè)登錄界面來，輸入密碼，密碼在你的終端上
密碼復(fù)制下來，輸入，驚喜的時(shí)刻到了，看圖
這可不就是VSCode，接下來可能還夠你折騰一陣子。
我這里只以最簡單的例子來測試，如下圖，一個(gè)最簡單的html
我們在這個(gè)地方安裝一個(gè)擴(kuò)展live server，這是我經(jīng)常用的擴(kuò)展，瀏覽器可以實(shí)時(shí)刷新，非常實(shí)用
安裝完成后我們到index.html文件，右擊
不出意外地話，會(huì)提示啟動(dòng)在本地的5500端口，我們在瀏覽器打開測試，如下圖：
由于是在本地，一切看上去都是那么的美好！
我在本地測試，很多安全性的工作并沒有做，在安裝擴(kuò)展的時(shí)候我可以直接安裝，除部分類似語言包不支持以外，其他插件，類似主題、圖標(biāo)、路徑自動(dòng)完成、智能提示等都是正常安裝，如下圖
主題正常安裝
可能有些小伙伴在安裝擴(kuò)展的時(shí)候會(huì)遇到很多問題，在安裝到服務(wù)器的時(shí)候，安裝擴(kuò)展可能沒那么容易，所以還有一種解決方案就是，你可以到下載離線的擴(kuò)展包，然后通過離線的方式進(jìn)行安裝，前提是你有一定的權(quán)限。這部分就需要你自己好好把控了，畢竟安全為重！
官方原話：目前我們無法使用官方VSCode Marketplace。我們創(chuàng)建了一個(gè)專注于開源擴(kuò)展的自定義擴(kuò)展市場。但是，如果您有權(quán)訪問.vsix文件，則可以手動(dòng)安裝擴(kuò)展。
離線安裝方法：
之前在Windows 10的linux子系統(tǒng)中安裝遇到各種奇葩問題，在確定是在浪費(fèi)時(shí)間后，直接轉(zhuǎn)到Linux安裝后，非常的順暢
因?yàn)槲沂窃贒eepin的桌面版Linux上進(jìn)行測試的，每個(gè)人測試的環(huán)境可能不一樣，遇到的問題可能也不一樣，所以感興趣的小伙伴可以自行嘗試，如果你和我一樣也是本地測試，那么非常容易的事情就是可能一切你都只需要點(diǎn)點(diǎn)鼠標(biāo)，特別是對Linux不熟的，比如我自己，就不需要那么多命令了。Deepin個(gè)人感覺對我們開發(fā)人員而言已經(jīng)相當(dāng)?shù)挠押昧耍?/p>
code-server確實(shí)是一個(gè)非常強(qiáng)大的工具，我相信在將來，云端編程可能會(huì)是一種趨勢，這樣能節(jié)省大量的安裝配置工作，一切都在云端共享，code-server不會(huì)是第一個(gè)，也不會(huì)是最后一個(gè)，由于筆者對Web技術(shù)的熱愛，真心希望更多優(yōu)秀的Web產(chǎn)品百花齊放，也祝愿所有熱愛軟件開發(fā)和學(xué)習(xí)的朋友能夠?qū)崿F(xiàn)自己的理想！
由于近期Github訪問不穩(wěn)定，也有可能是我本地網(wǎng)絡(luò)原因，訪問不是很順暢，那么我也將code-server的發(fā)布版?zhèn)浞莸搅宋业囊粋€(gè)碼云倉庫，如下，點(diǎn)擊附件，找到你想要的
https://gitee.com/null_341_5574/chrome_plugin
.簡介：
Visual Studio Code 是一款輕量級(jí)但功能強(qiáng)大的源代碼編輯器，可在您的桌面上運(yùn)行。它內(nèi)置了對 JavaScript和 Node.js 的支持，并為其他語言（例如： Python、PHP、Go）提供了豐富的擴(kuò)展生態(tài)系統(tǒng)。
2.具體使用過程：
1.將軟件下載和解壓
2.在解壓的文件夾中找到code.exe,雙擊運(yùn)行。
3.在電腦上建立保存源代碼的一個(gè)文件夾,例：js-test
4.在vscdoe的主界面安裝中文插件。
5.文件->打開文件夾（你自己建立的文件夾例如：js-test）
6.主界面最左側(cè)（資源管理器）-選中我們打開的文件夾
7.選擇新建文件按鈕-輸入文件名（注意擴(kuò)展名為.html）
8.輸入html：5并回車，自動(dòng)產(chǎn)生html文檔結(jié)構(gòu)，或自己輸入。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>提示：請使用代碼提示功能，代碼輸入，除了漢字之外，所有的字符都是在英文狀態(tài)下輸入。
9. 主界面->運(yùn)行->調(diào)試（選擇自己安裝的瀏覽器）
.效果圖1
2.準(zhǔn)備
2.1 瀏覽器，簡單，絕大多數(shù)瀏覽器都支持
2.2 下載echarts庫js文件
官網(wǎng)上下載：
https://www.echartsjs.com/zh/index.html
2.3 有3個(gè)js庫文件下載好放在同一個(gè)目錄下，如下導(dǎo)入：
<script src="jquery.min.js"></script>
<script src="echarts.js"></script>
<script src="china.js"></script>3.用txt復(fù)制如下代碼，當(dāng)然也可以直接復(fù)制到代碼編輯器中，我用的是微軟vsc
4.取個(gè)名字，建議先后綴為js，然后復(fù)制一個(gè)，再取名為html，這是本地操作
圖2
5.代碼：（js和html的代碼）
<!DOCTYPE html>
<html>
<head>
<!--代碼聲明，否則容易亂碼-->
<meta charset="utf-8">
<title>全國各省市支援湖北武漢抗擊新冠疫情圖</title>
<!-- .centerItem(展示圖片的畫布大小、邊緣設(shè)置) -->
<style>
.centerItem {width:800px;height:500px;background-color: #003077;margin:10px auto 0 auto;}
</style>
</head>
<body>
<!--設(shè)置div容器，定義id名字，類=畫布=centerItem-->
<div id="mapBox" class="centerItem"></div>
<!-- 引入相關(guān)js文件或庫，這個(gè)是有點(diǎn)難，尤其是從官網(wǎng)上復(fù)制相關(guān)代碼時(shí)，未指定js文件或庫或插件-->
<script src="jquery.min.js"></script>
<script src="echarts.js"></script>
<script src="china.js"></script>
<script>
// 新版已經(jīng)不要求加script type="text/javascript"放在里面了
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var mapBoxEchart=echarts.init(document.getElementById('mapBox'));
// 以下可以從官網(wǎng)上復(fù)制相關(guān)代碼---
var chinaGeoCoordMap={
// 這些地理坐標(biāo)可以網(wǎng)上查找，也可以放在json中，然后引用
'黑龍江': [127.9688, 45.368],
'內(nèi)蒙古': [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],
'臺(tái)灣': [121.30, 25.03],
};
// 我把格式整理一下，感覺js代碼格式看著很多括號(hào)占一行，很難受
var chinaDatas=[
[{name: '黑龍江',value: 0}],
[{name: '內(nèi)蒙古',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: '臺(tái)灣',value: 0}],
// 我是舟山人，當(dāng)然支援湖北武漢要用紅色，與眾不同些
[{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];
// 設(shè)置湖北坐標(biāo)點(diǎn)為終止點(diǎn)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', //箭頭圖標(biāo)
symbolSize: 5, //圖標(biāo)大小
},
lineStyle: {normal: {
width: 1, //尾跡線條寬度
opacity: 1, //尾跡線條透明度
curveness: .3 //尾跡線條曲直度
}
},
data: convertData(item[1])
},
{type: 'effectScatter',coordinateSystem: 'geo',zlevel: 2,
rippleEffect: { //漣漪特效
period: 4, //動(dòng)畫時(shí)間，值越小速度越快
brushType: 'stroke', //波紋繪制方式 stroke, fill
scale: 4 //波紋圓環(huán)最大限制，值越大波紋越大
},
label: {normal: {show: true,position: 'right', //顯示位置
offset: [5, 0], //偏移設(shè)置
formatter: function(params){return params.data.name}, //圓環(huán)顯示文字
fontSize: 13
},
emphasis: {show: true}
},
symbol: 'circle',symbolSize: function(val) {return 5+ val[2] * 5}, //圓環(huán)大小
itemStyle: {normal: {show: false,color: '#f00'}},
// item[1]代表舟山到湖北是紅色單獨(dú)的，注意上面舟山的values值
data: item[1].map(function(dataItem)
{return {
name: dataItem[0].name,
value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
};
}
), //這個(gè)小括號(hào)是map后面的一對，括號(hào)太多，看的頭暈，還是python好
}, //type后面的大括號(hào)
//被支援點(diǎn)的設(shè)置：湖北武漢
{type: 'scatter',coordinateSystem: 'geo',zlevel: 2,
rippleEffect: {period: 4,brushType: 'stroke',scale: 4},
label: {normal: {show: true,position: 'right',color: '#0f0',formatter: '',
textStyle: {color: "#0f0"}
},
emphasis: {show: true,color: "#f60"}
},
symbol: 'pin',symbolSize: 50,
data: [{name: item[0],value: chinaGeoCoordMap[item[0]].concat([10]),
}],
} //type后面的大括號(hào)
); // push后面的小括號(hào)是一對
} //和湖北下面的大括號(hào)是一對
); // 是forEach(function的小括號(hào)是一對，看暈了
// 有時(shí)間前面加var，再空一格，注意單復(fù)數(shù)，與后面setOption括號(hào)里保持一致
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)
{
//根據(jù)業(yè)務(wù)自己拓展要顯示的內(nèi)容
var res="";
var name=params.name;
var value=params.value[params.seriesIndex + 1];
res="<span style='color:#fff;'>" + name + "</span><br/>數(shù)據(jù)：" + 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的后面的大括號(hào)是一對
// 使用制定的配置項(xiàng)和數(shù)據(jù)顯示圖表
mapBoxEchart.setOption(option);
// echart圖表自適應(yīng)
window.addEventListener("resize", function() {mapBoxEchart.resize()});
</script>
</body>
</html>6.說明一下：這不是python，代碼繁瑣，括號(hào)太多，注釋還不一樣。
6.1 注意小括號(hào)（），大括號(hào){}對應(yīng)
6.2 注釋說明：
html中注釋采用：
<!--xxx-->
在js代碼中：
即<script>......</script>中，
采用：//,這個(gè)和python的#一樣，是單行注釋。
7.祝福：
武漢加油、湖北加油、中國加油！
武漢必勝、湖北必勝、中國必勝！
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
