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

言

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

@xiong，深圳最大夜場高級前端工程師，喜歡鉆研技術與生活上碰到的一些命題，并總結分享。

正文從這開始~~

iPad界有一句流行語叫"買前生產力，買后愛奇藝"，剛入手的我一定要防微杜漸，絕不能讓這件事發生（狗頭）。

說到生產力，一般人會拿平板寫文檔和畫畫。作為程序員的我就當然要拿它來編程了。

遺憾的是，使用arm架構的iPad是不支持使用vscode開發的；幸運的是，vscode現在有網頁版了。

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

方式一：github的vscode網頁版

在github的項目上點一下鍵盤的"."鍵，就會進入vscode編輯器，可以很方便地修改和提交代碼。

github上的vscode網頁版

不過這個vscode是閹割版的，并不提供代碼運行和調試功能，如果想拿來開發是不夠用的。這個工具更多適用于當前電腦沒有開發環境，或者臨時快速修改一下代碼就提交的場景而已了。

github版不能運行和調試

方式二：windows輕量應用服務器

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

windows服務器上的vscode

方式三：code-server

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

答案是能的，使用code-server就可以了。經過一輪摸索，我搭建好并且模擬日常開發工作嘗試了一遍了。總體感覺不錯，能滿足一些簡單的開發工作，例如編碼、運行、調試、安裝插件等，但離筆記本原生體驗還是有一些距離，比如有時候會斷網，反應也沒本地開發靈敏等。

code-server可以運行和調試

至于他的原理，可以理解為code-server就是瀏覽器版的vscode。它是一個中轉站，通過可視化操作在服務器上創建文件，編寫代碼，運行代碼，執行命令等。

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

1、首先需要一臺云服務器。

這里我買了騰訊云的ubuntu服務。

2. 安裝code-server

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

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

但可能是網絡原因，安裝速度十分慢。

此時我只能先把安裝包下載下來，再上傳到服務器上了。

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

獲取公網 IP

登錄云服務器控制臺，在實例列表頁面獲取公網 IP。如下圖所示：

執行scp命令上傳文件，語法為

scp 本地文件地址 云服務器帳號@云服務器實例公網 IP/域名:云服務器文件地址

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

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

接著按向導登錄云服務器及輸入yes確認上傳就行了。上傳速度嗖嗖的。

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

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

啟動code-server

等待安裝完成后，就可以啟動code-server了：

code-server --host "0.0.0.0"

注意后面的參數是需要的，否則服務器外面的機器是連不上的。

運行成功提示

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

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

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

實測是可以調試的 (o)/~

將這個網站添加到主屏幕上，就能像一個app一樣全屏打開vscode了。

讓vscode可以在后臺一直運行

當關掉騰訊云的登陸窗口后，vscode是會停掉的，此時就需要讓他一直后臺運行了。步驟如下：

1、安裝screen

apt-get install screen

2、安裝完成后新建一個窗口,

screen -S codeserver

3、進入窗口后運行code-server，然后 Ctrl+a+d 切換Linux窗口，會發覺它是不會中斷的。

給vscode添加中文支持

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

然后選擇中文就行了。

安裝node

作為前端開發自然少不了node，在ubuntu系統下執行以下命令就能安裝了。

sudo apt install nodejs npm

然后執行node -v ，如果能看到安裝的版本號，說明node已安裝好了。

尾聲

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

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

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

.HTML的骨架

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

<!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>

不要被這一大長串嚇到，在VSCode編譯器中html文件第一行打出“!”便會自動得到這些代碼。我們來認識一下這些標簽都是什么。

<!DOCTYPE html>

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

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

<html></html>標簽對，將<head></head>標簽對和<body></body>標簽對放入其中，lang屬性為網頁語言，英語為en，中文為zh。

注意：head標簽對和body標簽對需要在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>

<head></head>標簽對中是網頁的配置，而并非網頁頭部

head標簽對中<meta charset="UTF-8">為設置字符集，<meta>標簽為元標簽，表示網頁的基礎配置；

UTF-8為制作網頁所使用的字符集，與gb2312的區別可參考下圖。

在<head></head>中的<title></title>中書寫網頁的標題，文字會顯示在瀏覽器的標簽欄上。title也是搜索引擎收錄網站時顯示的標題，所以我們需要合理的設置title以吸引用戶的點擊。

使用meta標簽設置網頁關鍵詞和描述，name屬性非常關鍵，用來設置meta的具體功能。

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

<body></body>標簽對中用來寫網頁的主要內容，包括網頁頭部，內容，頁腳等等。

2、標簽

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

標簽通常成對兒出現；但meta標簽為單標簽，只有起始標簽。

標簽可以給文字設置不同的“語義”。

1.標題標簽

<h1>一級標題</h1><h2>二級標題</h2><h3>三級標題</h3><h4>四級標題</h4><h5>五級標題</h5>    <h6>六級標題</h6>

實際顯示效果如圖。

搜索引擎非常看重<h1></h1>標簽的內容，應該將重點內容比如網頁的logo等放到<h1></h1>中以加大其權重。<h1></h1>標簽一般只能放置一個，否則會被搜索引擎視為作弊。

六級標題雖然很像普通文本進行了加粗，但不應該僅僅為了加粗而使用<h6></h6>標簽對。

2.段落標簽——p標簽對

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

在網頁中顯示的效果如圖。

3.div標簽

div是英語division“分割”的縮寫，<div></div>標簽對用來將相關的內容組合到一起，以和其

他內容分割，使文檔結構更清晰。最重要的一點是，它可以結合CSS使用，實現網頁的布局，這種布局形式叫做“DIV+CSS”。

div標簽對的應用是html中非常重要的知識點。

<div>
<h3>標題三</h3>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
    </div>

4.注釋與轉義字符

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

為了在書寫“<”“>”等符號時不被當作標簽，我們需要使用轉義字符來表示它們。

<!-- 注釋內容 -->
<p><為小于號</p>
<p>>為大于號</p>
<p> 為不會被折疊的空格</p>
    <p>?為版權符號</p>

在網頁中顯示的效果如圖。

總結

通過此次的學習，我們認識了html骨架，標題標簽，段落標簽，div標簽，注釋寫法與部分轉義字符寫法。下次的學習內容將會是列表標簽和多媒體語義化標簽。

/一、html

//a、HTML語法規范

//a.1基本語法概述

1、HTML標簽是由尖括號包圍的關鍵字，例如,

2、HTML標簽通常是成對出現的，例如和,我們成為雙標簽，標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽。

3、有些特殊的標簽是單個標簽（極少情況），例如

，我們稱為單標簽

//a.2標簽關系

雙標簽關系可以分為兩類：包含關系和并列關系。

//b、HTML基本結構標簽

//b.1第一個HTML網頁

每個網頁都會有一個基本的結構標簽（也稱為骨架標簽），頁面內容也是在這些基本標簽上寫的。

HTML頁面也稱為HTML文檔

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

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

此時，用瀏覽器打開這個網頁，我們就可以預覽我們寫的第一個HTML文件了。

//c、開發工具vscode

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

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

2、lang語言

用來定義當前文檔顯示的語言：

a、en定義語言為英語

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

簡單來說定義為en就是英文網頁，定義為zh-CN就是中文網頁

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

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

3、charset字符集

字符集是多個字符的集合，以便計算機能夠識別和存儲各種文字

在標簽內，通過標簽的charset屬性來規定HTML文檔應該使用哪種字符編碼。

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

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

//d、HTML常用標簽

//d.1標簽語義

學習標簽是有技巧的，重點是記住每個標簽的語義，簡單理解就是指標簽的含義，即這個標簽是用來干嘛的

根據標簽的語義，在合適的地方給一個最為合理的標簽，可以讓頁面結構更清晰。

//d.2標題標簽

(重要)

為了使網頁更具有語義，我們經常會在頁面中用到標題標簽，HTML提供了6個等級的網頁標題集

特點：

1、加了標題的文字會變得更加粗，字號也會依次變大。

2、一個標題獨占一行。

//d.3段落和換行標簽（重要）

在網頁中，要把文字有條理地顯示出來，就需要將這些文字分段顯示，在HTML標簽中，

標簽用于定義段落，它可以將整個網頁分為若干段落。

<p>我是一個段落標簽</p>標簽語義：可以把HTML文檔分割為若干段落。

特點：
1、文本在一個段落中會根據瀏覽器窗口的大小自動換行。
2、段落和段落之間保有一個較大的空隙。

在HTML中，一個段落中的文字從左到右依次排列，直到瀏覽器的右端，然后自動換行，如果希望某段文本強制換行顯示，就需要使用換行標簽

<br />

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

特點：

1、單標簽

2、

標簽只是簡單地開始新的一行，跟段落不一樣，段落之間會插入一些垂直的間距。

//d.4文本格式標簽

在網頁中，有時需要為文字設置粗體，斜體或下劃線等效果，這時就需要用到HTML中的文本格式標簽，使文字以特殊的方式顯示

標簽語義：突出重要性，比普通文字更重要。

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

//d.5<div>和<span>標簽
<div>和<span>是沒有語義的，它們就是一個盒子，用來裝內容。

<div>這是頭部</div>
<span>今日價格</span>

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

特點：

1、<div>標簽用來布局，但是現在一行只能放一個<div>，大盒子。

2、<span>標簽用來布局，一行上可以有多個<span>,小盒子

//d.6圖像標簽和路徑（重點）

1、圖像標簽

在HTML標簽中，<img>標簽用于定義HTML頁面中的圖像。

<img src="圖像url"/>

單詞image的縮寫，意為圖像

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

所謂屬性：簡單理解就是屬于這個圖像標簽的特性。

圖像標簽的其他屬性：

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