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)系。