例簡介

Sublime Text是一個代碼編輯器，也是HTML和散文先進的文本編輯器。

本文通過實例來介紹項目中常用快捷鍵和插件的用法，熟悉快捷鍵和引用插件可以極大地提高我們的開發(fā)效率。

常用快捷

輸入“html:5”后點擊Tab鍵或輸入“!”后點擊Ctrl+E都能轉換為html5的骨架結構，轉換為的代碼如下圖：

Tips：需安裝Emmet插件；

右下角的文本類型要選為“html”。

輸入“div.wrapper>div.header>span.title{標題}”或“ul.lis>li*5>p.title+p.content”后點擊Tab可以快速生成相應的代碼，轉換為的代碼如下圖：

Tips：上面兩種寫法只是其中的一部分，大家可以自己練習多種組合；

img[src="face/bd/$.gif"] ＋Tab，bd目錄下自動從1開始到最后，適合于一次性增加從1--多個的圖片。

“Ctrl+Shift+P”用于快速更改文件類型（js/css）（第一圖）、安裝插件（第二圖）等，如下圖：

“Ctrl+G”用于快速定位到行數(shù)，比如審查元素知道修改的樣式在那一行，就可以點擊快捷鍵，然后輸入行數(shù)，就能定位到相應的位置進行修改；

“Ctrl+C”用于撤回信息，而“Ctrl+Y”用于恢復信息，都可多次操作；

“Ctrl+/”用于注釋信息，可單行也可以多行；

“Ctrl+F”用于查找輸入的內容，可往前、往后或全部查找；

“Ctrl+Shirt+D”用于復制游標所在行；

“Ctrl+D”用于選擇游標所在單詞，連續(xù)“Ctrl+D”實現(xiàn)多個選擇（選擇與第一次選擇相同的單詞）；如果中間有要跳過的相同單詞，可以先點擊“Ctrl+K”再點擊“Ctrl+D”；

“Alt+F3”用于選擇所有與游標所在單詞相同的單詞，跟上面一個快捷鍵對于批量修改非常方便。

“Alt+Shift+1/2/3”，后面數(shù)字表示要顯示多少列，如下圖，對于參照html編寫css和js有很大的便利。

Tips：從標題到這塊是最經(jīng)常用到的快捷鍵，一定熟悉記住。

“Ctrl+] ”增加縮進，“Ctrl+] ” 減小縮進，好的排版有利于查看；

“Ctrl+Shift+V”保持縮進粘貼，直接用“Ctrl+V”有時會導致顯示排版亂了，使用該快捷鍵可以保持原來的排版；

“Ctrl+PgUp”往前切換Tab欄的文件，“Ctrl+PgDn”往后切換Tab欄的文件；

“/**+Tab”常用于js的自動補全注釋信息和內容；

“Ctrl+P”用于快速查找并打開文件，點擊快捷鍵后打開命令面板，直接點擊就可以打開文件，也可以進行搜索操作；

“Ctrl+L”用于選擇單行；

“Ctrl+H”用于查找替換，可替換單個或全部替換；

“Ctrl+Shift+Enter”在當前上方添加一行；

右鍵點擊“Open Containing Folder”可以打開該文件的本地目錄。

“Ctrl+Shift+P”打開命令面板，輸入range點擊第一條就會出現(xiàn)了，然后輸入開始和結束數(shù)字，可以批量修改序號，需安裝插件Text Pastry。

“跟蹤函數(shù)ctags”在使用函數(shù)調轉功能前，需要先生成.tags文件，只需在項目文件管理器的項目文件上右鍵點擊Ctags:Rebuild Tags即可（注意，在改動文件之后會重新生成.tags）；所有工作都準備充分之后，就可以在函數(shù)名上右鍵點擊navigate 頭definition跳轉到指定函數(shù)了，返回用jump back，需安裝插件ctags。

常用插件

直接安裝：直接下載安裝包解壓縮到Packages目錄（菜單->preferences->Browse Packages）；　

使用Package Control組件安裝（在線安裝）：點擊“Ctrl+`”，然后輸入“import urllib.request,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())（）”回車，下載完畢后，重啟Sublime Text程序；如果在Perferences->中看到package control這一項，則安裝成功。

Tips：輸入代碼為3版本，其他版本代碼可以百度搜索。

用Package Control安裝插件的方法，按下“Ctrl+Shift+P”調出命令面板，輸入install 調出 Install Package 選項并回車，然后在列表中選中要安裝的插件。

比如“Emmet”，在搜索框輸入“Emmet”，列表就會顯示插件“Emmet”，然后點擊該條數(shù)據(jù)，就會開始安裝該插件，安裝信息可查看左下角。

Tips：安裝插件時保持網(wǎng)絡暢通，避免插件由于網(wǎng)絡原因奔潰。

常用插件的用法說明：

Emmet（原名 Zen Coding）：一種快速編寫html/css的方法；

Autoprefixer：CSS3私有前綴自動補全插件；

AutoFileName：顯示路徑下文件名；

SyncedSidebarBg：自動同步側邊欄底色為編輯窗口底色；

HTML-CSS-JS Prettify：html/css/js格式化工具，依賴node.js，格式化的HTML不能有中文和中文符號等，HTMLPrettify.sublime-settings路徑對應node安裝目錄，使用快捷鍵“Ctrl+Shift+H”；

sublimelinter：檢查js語法；

jQuery：補全JQ代碼；

Text Pastry：可以一次性改批量序號，用法快捷鍵里面有介紹；

ctags：跟蹤函數(shù)，用法快捷鍵里面有介紹；

Less2Css：保存less文件時候自動生成css文件，windows下，Less2CSS對lessc.cmd有依賴，請下載：https://github.com/duncansmart/less.js-windows/releases后并將其路徑（ E:/Less）添加至系統(tǒng)環(huán)境變量中；一般建議生產環(huán)境不使用less，所以這個還是蠻方便的；

SideBarEnhancements：設置瀏覽器，如下圖。

這里是云端源想IT，幫你輕松學IT”

嗨~ 今天的你過得還好嗎？

生命是什么呢，

生命是時時刻刻不知如何是好。

- 2024.03.06 -

工欲善其事必先利其器，一款好的開發(fā)工具可以讓我們事半功倍。前面我們對HTML的相關概念和基本結構已經(jīng)有了基本的了解，下面我們就來安裝在前端開發(fā)中的需要使用的開發(fā)工具及環(huán)境。

在眾多HTML編輯器中，選擇一個適合自己的工具至關重要。今天我們就來認識一下前端開發(fā)工作中使用的最廣泛的工具 “VS Code” , 并在本地搭建好開發(fā)環(huán)境。

一、前端開發(fā)工具簡介

在介紹 “VS Code” 之前，我們先來了解一下什么是 “IDE”。

什么是 “IDE”

IDE 是集成開發(fā)環(huán)境的英文縮寫 （Integrated Development Environment)，集成開發(fā)環(huán)境就是將在開發(fā)過程中所需要的工具或功能集成到了一起，比如：代碼編寫、分析、編譯、調試等功能，從而最大化地提高開發(fā)者的工作效率。

IDE 通用特點：

• 提供圖形用戶界面，在 IDE 中可以完成開發(fā)過程中所有工作；
• 支持代碼補全與檢查，并提供快速修復選項；
• 內置解釋器與編譯器；
• 功能強大的調試器，支持設置斷點與單步執(zhí)行等功能。

前端開發(fā)IDE

而在前端開發(fā)中我們需要安裝一個“趁手”的IDE，幫助我們更快更高效的開發(fā)，一個好的IDE是每個程序員的必備武器。前端開發(fā)IDE有很多種，例如 Visual Studio Code、HBuilder、WebStorm、Atom 或 Sublime Text 等。

我們可以任選一種使用。這幾種IDE的對比如下：

這么多IDE該怎么選呢？對于我們初學者來說，選擇Visual Studio Code，（簡稱VS Code）就可以了。VS code具備內置功能非常豐富、插件很全且安裝簡單、輕量、對電腦的配置要求不算很高，且有MAC版本，應用廣泛等優(yōu)點，很適合新手。

下面就和我一起下載并安裝VS code吧！

二、VS Code下載與安裝

1、進入VScode官網(wǎng)

官網(wǎng)地址：https://code.visualstudio.com/

點擊【Download】進入下載，不要點擊【Download for Windows Stable Build】，否則它會自動幫你下載User Installer用戶版本。

• 【Stable】：穩(wěn)定版本，比較穩(wěn)定。
• 【Insiders】：測試版本，添加了一些新東西，還在測試中，可能會存在一些Bug，不怎么穩(wěn)定。

2、然后你會看見Windows，Linux，蘋果三個版本，我們選擇Windows版本，選擇System Installer 點擊【x64】進行下載，不要點擊【↓ Windows windows8,10,11】，否則它也會自動默認下載User Installer用戶版本。

• 【User Installer】：用戶安裝程序，VScode安裝在你電腦當前賬戶的目錄上，如果你換了一個其他賬戶登錄你的電腦，那么你就用不了之前那個賬戶下載的VScode了。
• 
  

• 【System Installer】：系統(tǒng)安裝程序，VScode不會安裝在你電腦的當前賬戶上，而是直接安裝在系統(tǒng)上，所有賬戶都可以使用。

其實選哪個版本都無傷大雅，就算你下載了【User Installer】版本也沒事，因為沒人會沒事把自己電腦上的賬戶換成其他人的賬戶登錄，就算換了也可以換回來，只是有時候特殊情況換了個賬戶登錄不能使用就有一點麻煩，所以還是推薦盡量下載【System Installer】版本。

【x86】：32位操作系統(tǒng)。【x64】:64位操作系統(tǒng)，如果想知道自己是什么系統(tǒng)，可以敲擊Win鍵找到“設置”→“系統(tǒng)”→“關于”→“系統(tǒng)類型”。

3、正在下載

這個下載會比較慢，如果不想等可直接去找個別人下好的安裝包哦！也可找小編領取。

4、下載完后打開文件，會彈出許可協(xié)議彈窗，勾選我同意此協(xié)議，單擊【下一步】。

5、先去D盤里創(chuàng)建一個新文件夾取名叫“VScode”，點擊【瀏覽】按鈕修改安裝路徑，把路徑改到剛剛在D盤里創(chuàng)建的VScode文件夾里。如果覺得麻煩也可以直接默認安裝在C盤，然后單擊【下一步】，但還是建議安裝在D盤里。

6、修改完路徑后，單擊【下一步】。（安裝路徑是這個樣子D:\VScode\Microsoft VS Code）

7、選擇開始菜單文件夾，默認"Visual Studio Code",單擊【下一步】。

8、根據(jù)自己的需求進行勾選，勾選完單擊【下一步】。

【創(chuàng)建桌面快捷方式】：在桌面創(chuàng)建VScode快捷方式。

【將“通過Code打開”操作添加到Windows資源管理器文件上下文菜單】：選中一個文件鼠標右鍵可以通過VScode打開文件。

【將“通過Code打開”操作添加到Windows資源管理器目錄上下文菜單】：選中一個文件夾鼠標右鍵可以通過VScode打開文件夾。

【將Code注冊為受支持的文件類型的編輯器】：對于受支持的文件類型的文件，鼠標右鍵選擇“打開方式”，可以通過“Vscode”打開。

【添加到PATH】：添加VScode文件夾里的bin目錄到PATH環(huán)境變量里，添加完以后可通過系統(tǒng)命令輸入code直接啟動VScode。

9、單擊【安裝】進行安裝。

10、安裝完成后單擊【完成】啟動。

三、VS code配置插件

下載完之后，大家可以根據(jù)自己的需求下載插件，這里推薦我用的比較順手的幾個。

1、下載漢化包

點擊擴展，在搜索欄搜索Chinese，選擇Chinese中文簡體點擊【Install】進行安裝。（建議少用，多看英文，這是一位優(yōu)秀的程序員走向成功的標志性成長。）

安裝完后單擊【Change Language and Restart】重啟VScode軟件，刷新一下就變成中文簡體了。

2、下載【會了吧】插件

在搜索欄里搜索【會了吧】，這個是在你敲代碼時會自動識別你敲的單詞進行翻譯，如果你有一個單詞不認識，可以點進“會了吧”看看翻譯，對英語基礎差的人很友好。

3、下載【Open in browser】插件

這個是用來運行代碼，并且在瀏覽器打開，查看運行效果的，這個插件必須下，否則當你寫完HTML網(wǎng)頁時你無法運行，無法預覽頁面，不信你可以先試試能不能運行再回來下載。

4、下載【Live Server】插件

這個是用于實時預覽運行效果，當你使用open in browser運行代碼時，只要你的代碼有改變，你就需要手動刷新重新預覽頁面運行結果，而Live Server是自動刷新運行結果，非常方便，非常滴銀性！

四、用VScode編寫HTML代碼

1、先去D盤里創(chuàng)建一個新文件夾取名叫“Workspace”（名字隨便取名）。

2、進入VScode找到左上角的文件選擇點擊打開文件夾。

3、找到剛剛創(chuàng)建的“workspace”文件夾，單擊【選擇文件夾】。

4、找到WORKSPACRE，點擊新建文件，名字輸入“01.html”,然后點擊回車鍵創(chuàng)建。

5、在剛剛創(chuàng)建的01.html文件下輸入以下代碼。

<!DOCTYPE html>
<html>
    <head>
        <meta charest="utf-8">
        <title>HTML</title>
    </head>
    <body>
        <h1>這是我的第一個網(wǎng)頁</h1>
    </body></html>

6、鼠標右擊空白處單擊【Open In Default Browser】查看運行結果。

7、運行結果如下 。

以上就是常用的前端開發(fā)工具VS Code的下載和安裝教程了，你的第一個HTML網(wǎng)頁運行成功了嗎？

一個高效的HTML開發(fā)工具和環(huán)境是每個前端開發(fā)者的得力助手。通過合理選擇工具、配置環(huán)境、使用框架和庫、以及不斷的調試和測試，你可以將創(chuàng)意轉化為現(xiàn)實，構建出令人驚嘆的網(wǎng)頁。記住，技術永遠在變，唯有不斷學習和實踐，才能讓你在這個數(shù)字世界中游刃有余。

今天就先講到這里了，

更多前端開發(fā)基礎知識點擊文末閱讀原文查看哦！

記得關注【云端源想IT】一起學編程！

我們下期再見！

END

文案編輯|云端學長

文案配圖|云端學長

內容由：云端源想分享

<!DOCTYPE html>
<html lang="en">
 <head> 
 <meta charset="UTF-8">
 <title>網(wǎng)頁標題</title>
 </head>
 <body>
 網(wǎng)頁顯示內容
 </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title> xhtml 1.0 文檔類型 </title>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title> html5文檔類型 </title>
</head>
<body>
</body>
</html>

<!-- 這是一段注釋 -->

<h1>這是一級標題</h1>
<h2>這是二級標題</h2>
<h3>這是三級標題</h3>

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>段落</title>
</head>
<body>
 <p>HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，超
 文本指的是超鏈接，標記指的是標簽，是一種用來制作網(wǎng)頁的語言，這種語言由一個個的
 標簽組成，用這種語言制作的文件保存的是一個文本文件，文件的擴展名為html或者htm。
 </p>
 <p>一個html文件就是一個網(wǎng)頁，html文件用編輯器打開顯示的是文本，可以用文本的方
 式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件渲染成網(wǎng)頁，顯示的網(wǎng)
 頁可以從一個網(wǎng)頁鏈接跳轉到另外一個網(wǎng)頁。</p>
</body>
</html>

<p>
一個html文件就是一個網(wǎng)頁，html文件用編輯器打開顯示的是文本，可以用<br />
文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件<br />
渲染成網(wǎng)頁，顯示的網(wǎng)頁可以從一個網(wǎng)頁鏈接跳轉到另外一個網(wǎng)頁。
</p>

<!-- 在段落前想縮進兩個文字的空格，使用空格的字符實體： -->
<p>
 一個html文件就是一個網(wǎng)頁，html文件用編輯器打開顯示的是文本，可以用<br />
文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件<br />
渲染成網(wǎng)頁，顯示的網(wǎng)頁可以從一個網(wǎng)頁鏈接跳轉到另外一個網(wǎng)頁。</p>

<!-- “<” 和 “>” 的字符實體為 < 和 > -->
<p>
 3 < 5 <br>
 10 > 5
</p>

<img src="images/pic.jpg" alt="產品圖片" />