「第2479期」如何在iPad上用vscode寫代碼

言

終于找到買iPad的理由了。今日前端早讀課文章由@xiong投稿分享。

@xiong，深圳最大夜場(chǎng)高級(jí)前端工程師，喜歡鉆研技術(shù)與生活上碰到的一些命題，并總結(jié)分享。

正文從這開始~~

iPad界有一句流行語叫"買前生產(chǎn)力，買后愛奇藝"，剛?cè)胧值奈乙欢ㄒ牢⒍艥u，絕不能讓這件事發(fā)生（狗頭）。

說到生產(chǎn)力，一般人會(huì)拿平板寫文檔和畫畫。作為程序員的我就當(dāng)然要拿它來編程了。

遺憾的是，使用arm架構(gòu)的iPad是不支持使用vscode開發(fā)的；幸運(yùn)的是，vscode現(xiàn)在有網(wǎng)頁版了。

趁著這次機(jī)會(huì)，我就來看看vscode網(wǎng)頁版在平板上是否能滿足需求吧。（答案是能的，大家可以把這篇文章甩給那些買了平板后只拿來看愛奇藝的碼農(nóng)朋友們了。）

方式一：github的vscode網(wǎng)頁版

在github的項(xiàng)目上點(diǎn)一下鍵盤的"."鍵，就會(huì)進(jìn)入vscode編輯器，可以很方便地修改和提交代碼。

github上的vscode網(wǎng)頁版

不過這個(gè)vscode是閹割版的，并不提供代碼運(yùn)行和調(diào)試功能，如果想拿來開發(fā)是不夠用的。這個(gè)工具更多適用于當(dāng)前電腦沒有開發(fā)環(huán)境，或者臨時(shí)快速修改一下代碼就提交的場(chǎng)景而已了。

github版不能運(yùn)行和調(diào)試

方式二：windows輕量應(yīng)用服務(wù)器

一開始我想到的是在騰訊云的windows輕量應(yīng)用服務(wù)器上安裝vscode來實(shí)現(xiàn)平板上寫代碼的需求的。但可能這個(gè)是服務(wù)端的windows，不是功能完善的windows，在多個(gè)網(wǎng)站上點(diǎn)擊下載vscode的按鈕都沒反應(yīng)，平板上也登錄不了這個(gè)服務(wù)器，屏幕顯示又是4:3比例的小屏，綜上各種不好體驗(yàn)，就放棄了。

windows服務(wù)器上的vscode

方式三：code-server

既然github提供的是閹割版的vscode，那我能不能自己搭建一個(gè)功能完整的vscode呢？

答案是能的，使用code-server就可以了。經(jīng)過一輪摸索，我搭建好并且模擬日常開發(fā)工作嘗試了一遍了。總體感覺不錯(cuò)，能滿足一些簡(jiǎn)單的開發(fā)工作，例如編碼、運(yùn)行、調(diào)試、安裝插件等，但離筆記本原生體驗(yàn)還是有一些距離，比如有時(shí)候會(huì)斷網(wǎng)，反應(yīng)也沒本地開發(fā)靈敏等。

code-server可以運(yùn)行和調(diào)試

至于他的原理，可以理解為code-server就是瀏覽器版的vscode。它是一個(gè)中轉(zhuǎn)站，通過可視化操作在服務(wù)器上創(chuàng)建文件，編寫代碼，運(yùn)行代碼，執(zhí)行命令等。

接下來介紹一下怎么通過code-server實(shí)現(xiàn)在iPad上寫代碼的美好愿望吧。

1、首先需要一臺(tái)云服務(wù)器。

這里我買了騰訊云的ubuntu服務(wù)。

2. 安裝code-server

登陸上云服務(wù)器后，按code-server的官方文檔，應(yīng)該是可以使用腳本來安裝的：

// code-server 地址：https://github.com/cdr/code-server
// 安裝命令
curl -fsSL https://code-server.dev/install.sh | sh

但可能是網(wǎng)絡(luò)原因，安裝速度十分慢。

此時(shí)我只能先把安裝包下載下來，再上傳到服務(wù)器上了。

上傳到服務(wù)器可以用scp上傳，具體步驟是：

獲取公網(wǎng) IP

登錄云服務(wù)器控制臺(tái)，在實(shí)例列表頁面獲取公網(wǎng) IP。如下圖所示：

執(zhí)行scp命令上傳文件，語法為

scp 本地文件地址 云服務(wù)器帳號(hào)@云服務(wù)器實(shí)例公網(wǎng) IP/域名:云服務(wù)器文件地址

例如，您需要將本地文件 /Downloads/code-server_3.12.0_amd64.deb 上傳至 IP 地址為 129.20.0.2 的云服務(wù)器的/home/ubuntu目錄下，則執(zhí)行的命令如下：

scp /Downloads/code-server_3.12.0_amd64.deb root@129.20.0.2:/home/ubuntu/code-server_3.12.0_amd64.deb

接著按向?qū)У卿浽品?wù)器及輸入yes確認(rèn)上傳就行了。上傳速度嗖嗖的。

上傳完后，就是安裝code-server了。安裝命令為

sudo dpkg -i code-server_3.12.0_amd64.deb

啟動(dòng)code-server

等待安裝完成后，就可以啟動(dòng)code-server了：

code-server --host "0.0.0.0"

注意后面的參數(shù)是需要的，否則服務(wù)器外面的機(jī)器是連不上的。

運(yùn)行成功提示

除了設(shè)置這個(gè)參數(shù)外，還需要在服務(wù)器的安全組上設(shè)置允許8080端口訪問。

配置好了后，就可以在瀏覽器上使用"公網(wǎng)ip：8080"來訪問這個(gè)網(wǎng)頁版vscode了。

第一次打開會(huì)詢問密碼，密碼在~/.config/code-server/config.yaml文件中。

實(shí)測(cè)是可以調(diào)試的 (o)/~

將這個(gè)網(wǎng)站添加到主屏幕上，就能像一個(gè)app一樣全屏打開vscode了。

讓vscode可以在后臺(tái)一直運(yùn)行

當(dāng)關(guān)掉騰訊云的登陸窗口后，vscode是會(huì)停掉的，此時(shí)就需要讓他一直后臺(tái)運(yùn)行了。步驟如下：

1、安裝screen

apt-get install screen

2、安裝完成后新建一個(gè)窗口,

screen -S codeserver

3、進(jìn)入窗口后運(yùn)行code-server，然后 Ctrl+a+d 切換Linux窗口，會(huì)發(fā)覺它是不會(huì)中斷的。

給vscode添加中文支持

使用快捷鍵Ctrl+shift+p，輸入configure display language，

然后選擇中文就行了。

安裝node

作為前端開發(fā)自然少不了node，在ubuntu系統(tǒng)下執(zhí)行以下命令就能安裝了。

sudo apt install nodejs npm

然后執(zhí)行node -v ，如果能看到安裝的版本號(hào)，說明node已安裝好了。

尾聲

至此，你的iPad也能使用vscode來愉快地寫代碼了。實(shí)際上，只要有瀏覽器的地方，無論是用電腦、平板還是手機(jī)，你都可以使用它來寫代碼了，而且開發(fā)環(huán)境是一致的，也省了很多配置環(huán)境的麻煩事了。

很久很久以前，我就覺得背著沉重的電腦回家是件很痛苦的事，于是除了多買一部電腦外做過很多嘗試，例如把舊的老臺(tái)式機(jī)搬出來、給小米平板2刷windows系統(tǒng)等，但效果都不太好，這次給平板添加寫代碼功能也算是其中一個(gè)嘗試吧。雖然現(xiàn)在可以帶輕的筆記本，但假若能帶更輕的平板出門又能滿足日常需求，豈不是更美滋滋嗎？

本文發(fā)布于前端早讀課
作者：@熊金寶
來源：https://mp.weixin.qq.com/s/e_S03Y2OrYVZkgt3eB3ejg

.HTML的骨架

在編寫html時(shí)我們們首先要寫出以下代碼。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

</body>
</html>

不要被這一大長(zhǎng)串嚇到，在VSCode編譯器中html文件第一行打出“!”便會(huì)自動(dòng)得到這些代碼。我們來認(rèn)識(shí)一下這些標(biāo)簽都是什么。

<!DOCTYPE html>

html文件第一行必須是DTD（Document Type Definition，文檔類型聲明），不寫DTD會(huì)引發(fā)瀏覽器的一些兼容問題。

<html lang="en">
.
.
.
</html>

<html></html>標(biāo)簽對(duì)，將<head></head>標(biāo)簽對(duì)和<body></body>標(biāo)簽對(duì)放入其中，lang屬性為網(wǎng)頁語言，英語為en，中文為zh。

注意：head標(biāo)簽對(duì)和body標(biāo)簽對(duì)需要在html標(biāo)簽對(duì)中縮進(jìn)

<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

</body>
</html>

<head></head>標(biāo)簽對(duì)中是網(wǎng)頁的配置，而并非網(wǎng)頁頭部

head標(biāo)簽對(duì)中<meta charset="UTF-8">為設(shè)置字符集，<meta>標(biāo)簽為元標(biāo)簽，表示網(wǎng)頁的基礎(chǔ)配置；

UTF-8為制作網(wǎng)頁所使用的字符集，與gb2312的區(qū)別可參考下圖。

在<head></head>中的<title></title>中書寫網(wǎng)頁的標(biāo)題，文字會(huì)顯示在瀏覽器的標(biāo)簽欄上。title也是搜索引擎收錄網(wǎng)站時(shí)顯示的標(biāo)題，所以我們需要合理的設(shè)置title以吸引用戶的點(diǎn)擊。

使用meta標(biāo)簽設(shè)置網(wǎng)頁關(guān)鍵詞和描述，name屬性非常關(guān)鍵，用來設(shè)置meta的具體功能。

<meta name="Keywords" content="關(guān)鍵詞1，關(guān)鍵詞2，關(guān)鍵詞3">
<meta name="Description" content="頁面描述是搜索引擎顯示的簡(jiǎn)介詞語">

<body></body>標(biāo)簽對(duì)中用來寫網(wǎng)頁的主要內(nèi)容，包括網(wǎng)頁頭部，內(nèi)容，頁腳等等。

2、標(biāo)簽

html叫做“超文本標(biāo)記語言”，超文本標(biāo)記就是標(biāo)簽，這些標(biāo)簽擁有不同的功能。

標(biāo)簽通常成對(duì)兒出現(xiàn)；但meta標(biāo)簽為單標(biāo)簽，只有起始標(biāo)簽。

標(biāo)簽可以給文字設(shè)置不同的“語義”。

1.標(biāo)題標(biāo)簽

<h1>一級(jí)標(biāo)題</h1><h2>二級(jí)標(biāo)題</h2><h3>三級(jí)標(biāo)題</h3><h4>四級(jí)標(biāo)題</h4><h5>五級(jí)標(biāo)題</h5>    <h6>六級(jí)標(biāo)題</h6>

實(shí)際顯示效果如圖。

搜索引擎非常看重<h1></h1>標(biāo)簽的內(nèi)容，應(yīng)該將重點(diǎn)內(nèi)容比如網(wǎng)頁的logo等放到<h1></h1>中以加大其權(quán)重。<h1></h1>標(biāo)簽一般只能放置一個(gè)，否則會(huì)被搜索引擎視為作弊。

六級(jí)標(biāo)題雖然很像普通文本進(jìn)行了加粗，但不應(yīng)該僅僅為了加粗而使用<h6></h6>標(biāo)簽對(duì)。

2.段落標(biāo)簽——p標(biāo)簽對(duì)

<p>段落標(biāo)簽，p是英語paragraph的意思</p><p>在HTML文件中即使代碼換行了，頁面顯示效果也不會(huì)換行</p><p>所以必須要把任何段落都放入段落標(biāo)簽中</p>    <p>段落標(biāo)簽中不能嵌套標(biāo)題標(biāo)簽和其他段落標(biāo)簽</p>

在網(wǎng)頁中顯示的效果如圖。

3.div標(biāo)簽

div是英語division“分割”的縮寫，<div></div>標(biāo)簽對(duì)用來將相關(guān)的內(nèi)容組合到一起，以和其

他內(nèi)容分割，使文檔結(jié)構(gòu)更清晰。最重要的一點(diǎn)是，它可以結(jié)合CSS使用，實(shí)現(xiàn)網(wǎng)頁的布局，這種布局形式叫做“DIV+CSS”。

div標(biāo)簽對(duì)的應(yīng)用是html中非常重要的知識(shí)點(diǎn)。

<div>
<h3>標(biāo)題三</h3>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
    </div>

4.注釋與轉(zhuǎn)義字符

書寫代碼時(shí)，我們需要寫好注釋使日后再閱讀代碼或者他人閱讀代碼提供提示。

為了在書寫“<”“>”等符號(hào)時(shí)不被當(dāng)作標(biāo)簽，我們需要使用轉(zhuǎn)義字符來表示它們。

<!-- 注釋內(nèi)容 -->
<p><為小于號(hào)</p>
<p>>為大于號(hào)</p>
<p> 為不會(huì)被折疊的空格</p>
    <p>?為版權(quán)符號(hào)</p>

在網(wǎng)頁中顯示的效果如圖。

總結(jié)

通過此次的學(xué)習(xí)，我們認(rèn)識(shí)了html骨架，標(biāo)題標(biāo)簽，段落標(biāo)簽，div標(biāo)簽，注釋寫法與部分轉(zhuǎn)義字符寫法。下次的學(xué)習(xí)內(nèi)容將會(huì)是列表標(biāo)簽和多媒體語義化標(biāo)簽。

/一、html

//a、HTML語法規(guī)范

//a.1基本語法概述

1、HTML標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵字，例如,

2、HTML標(biāo)簽通常是成對(duì)出現(xiàn)的，例如和,我們成為雙標(biāo)簽，標(biāo)簽對(duì)中的第一個(gè)標(biāo)簽是開始標(biāo)簽，第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽。

3、有些特殊的標(biāo)簽是單個(gè)標(biāo)簽（極少情況），例如

，我們稱為單標(biāo)簽

//a.2標(biāo)簽關(guān)系

雙標(biāo)簽關(guān)系可以分為兩類：包含關(guān)系和并列關(guān)系。

//b、HTML基本結(jié)構(gòu)標(biāo)簽

//b.1第一個(gè)HTML網(wǎng)頁

每個(gè)網(wǎng)頁都會(huì)有一個(gè)基本的結(jié)構(gòu)標(biāo)簽（也稱為骨架標(biāo)簽），頁面內(nèi)容也是在這些基本標(biāo)簽上寫的。

HTML頁面也稱為HTML文檔

標(biāo)簽名	定義	說明
<html></html>	HTML標(biāo)簽	頁面中最大的標(biāo)簽，我們稱為根標(biāo)簽
<head></head>	文檔的頭部	注意在head標(biāo)簽中我們必須要設(shè)置的標(biāo)簽是title
<title></title>	文檔的標(biāo)題	讓頁面擁有一個(gè)屬于自己的網(wǎng)頁標(biāo)題
<body></body>	文檔的主體	元素包含文檔的所有內(nèi)容，頁面內(nèi)容，基本都是放到body里面的

必須是.html或.htm,瀏覽器的作用是讀取HTML文檔，并以網(wǎng)頁的形式顯示出它們。

此時(shí)，用瀏覽器打開這個(gè)網(wǎng)頁，我們就可以預(yù)覽我們寫的第一個(gè)HTML文件了。

//c、開發(fā)工具vscode

1、<!DOCTYPE>標(biāo)簽
文檔類型聲明，作用就是告訴瀏覽器使用哪種HTML版本來顯示網(wǎng)頁

<!DOCTYPE html>這句代碼的意思是：當(dāng)前頁面采用的是HTML5來顯示頁面。

2、lang語言

用來定義當(dāng)前文檔顯示的語言：

a、en定義語言為英語

b、zh-CN定義語言為中文

簡(jiǎn)單來說定義為en就是英文網(wǎng)頁，定義為zh-CN就是中文網(wǎng)頁

其實(shí)對(duì)于文檔顯示來說，定義成en的文檔也可以顯示中文，定義zh-CN的文檔也可以顯示英文

這個(gè)屬性對(duì)于瀏覽器和搜索引擎（百度、谷歌等）還是有作用的

3、charset字符集

字符集是多個(gè)字符的集合，以便計(jì)算機(jī)能夠識(shí)別和存儲(chǔ)各種文字

在標(biāo)簽內(nèi)，通過標(biāo)簽的charset屬性來規(guī)定HTML文檔應(yīng)該使用哪種字符編碼。

charset常用的值：GB2312、BIG5、GBK和UTF-8,其中UTF-8也稱為萬國(guó)碼，基本包含了全世界所有國(guó)家需要用到的字符。

注意：上面語法是必須寫的代碼，否則可能引起亂碼的情況，一般情況下，統(tǒng)一使用"UTF-8"編碼，盡量統(tǒng)一寫成標(biāo)準(zhǔn)的"UTF-8",不要寫成"utf-8"或"UTF8"。

//d、HTML常用標(biāo)簽

//d.1標(biāo)簽語義

學(xué)習(xí)標(biāo)簽是有技巧的，重點(diǎn)是記住每個(gè)標(biāo)簽的語義，簡(jiǎn)單理解就是指標(biāo)簽的含義，即這個(gè)標(biāo)簽是用來干嘛的

根據(jù)標(biāo)簽的語義，在合適的地方給一個(gè)最為合理的標(biāo)簽，可以讓頁面結(jié)構(gòu)更清晰。

//d.2標(biāo)題標(biāo)簽

(重要)

為了使網(wǎng)頁更具有語義，我們經(jīng)常會(huì)在頁面中用到標(biāo)題標(biāo)簽，HTML提供了6個(gè)等級(jí)的網(wǎng)頁標(biāo)題集

特點(diǎn)：

1、加了標(biāo)題的文字會(huì)變得更加粗，字號(hào)也會(huì)依次變大。

2、一個(gè)標(biāo)題獨(dú)占一行。

//d.3段落和換行標(biāo)簽（重要）

在網(wǎng)頁中，要把文字有條理地顯示出來，就需要將這些文字分段顯示，在HTML標(biāo)簽中，

標(biāo)簽用于定義段落，它可以將整個(gè)網(wǎng)頁分為若干段落。

<p>我是一個(gè)段落標(biāo)簽</p>標(biāo)簽語義：可以把HTML文檔分割為若干段落。

特點(diǎn)：
1、文本在一個(gè)段落中會(huì)根據(jù)瀏覽器窗口的大小自動(dòng)換行。
2、段落和段落之間保有一個(gè)較大的空隙。

在HTML中，一個(gè)段落中的文字從左到右依次排列，直到瀏覽器的右端，然后自動(dòng)換行，如果希望某段文本強(qiáng)制換行顯示，就需要使用換行標(biāo)簽

<br />

單詞break的縮寫，意為打斷，換行。

特點(diǎn)：

1、單標(biāo)簽

2、

標(biāo)簽只是簡(jiǎn)單地開始新的一行，跟段落不一樣，段落之間會(huì)插入一些垂直的間距。

//d.4文本格式標(biāo)簽

在網(wǎng)頁中，有時(shí)需要為文字設(shè)置粗體，斜體或下劃線等效果，這時(shí)就需要用到HTML中的文本格式標(biāo)簽，使文字以特殊的方式顯示

標(biāo)簽語義：突出重要性，比普通文字更重要。

語義	標(biāo)簽	說明
加粗	<strong></strong>或者<b></b>	更推薦使用<strong></strong>標(biāo)簽加粗，語義更強(qiáng)烈
傾斜	<em><em> 或者<i><i>	更加推薦使用<em><em>標(biāo)簽，語義更加強(qiáng)烈
刪除線	<del><del>或者<s><s>	更加推薦使用<del><del>標(biāo)簽，語義更加強(qiáng)烈
下劃線	<ins><ins>或者<u><u>	更加推薦<ins><ins>標(biāo)簽，語義更加強(qiáng)烈

//d.5<div>和<span>標(biāo)簽
<div>和<span>是沒有語義的，它們就是一個(gè)盒子，用來裝內(nèi)容。

<div>這是頭部</div>
<span>今日價(jià)格</span>

div是division的縮寫，表示分割，分區(qū)，span意為跨度，跨距。

特點(diǎn)：

1、<div>標(biāo)簽用來布局，但是現(xiàn)在一行只能放一個(gè)<div>，大盒子。

2、<span>標(biāo)簽用來布局，一行上可以有多個(gè)<span>,小盒子

//d.6圖像標(biāo)簽和路徑（重點(diǎn)）

1、圖像標(biāo)簽

在HTML標(biāo)簽中，<img>標(biāo)簽用于定義HTML頁面中的圖像。

<img src="圖像url"/>

單詞image的縮寫，意為圖像

src是<img>標(biāo)簽的必須屬性，它用于指定圖像文件的路徑和文件名。

所謂屬性：簡(jiǎn)單理解就是屬于這個(gè)圖像標(biāo)簽的特性。

圖像標(biāo)簽的其他屬性：

屬性	屬性值	說明
src	圖片路徑	必須屬性
alt	文本	替換文本，圖像不能顯示的文字
title	文本	提示文本，鼠標(biāo)放到圖像上，顯示文字
width	像素	設(shè)置圖像的寬度
height	像素	設(shè)置圖像的高度
border	像素	設(shè)置圖像的邊框粗細(xì)