-新生指南-

向前

結(jié)尾

的

筆

＞Soth技術(shù)協(xié)會＜

在上一篇文章中，我們討論了前端。 本篇文章將介紹前端所需的工具。

首先sublime text 3 js代碼格式化，我們將介紹一些基本概念。 理解這些概念將對您的 Web 開發(fā)之旅甚至編程之旅有所幫助。

下面就讓我來給大家詳細(xì)解釋一下吧。

環(huán)境變量

設(shè)置環(huán)境變量（路徑）相當(dāng)于在系統(tǒng)中創(chuàng)建一個全局快捷方式。 在桌面上創(chuàng)建可執(zhí)行文件的快捷方式意味著您可以從桌面啟動它，而不管文件的實際路徑如何。 同樣的，如果你在環(huán)境變量中設(shè)置了某個文件的路徑，那么就可以在系統(tǒng)的任意路徑下啟動它。 由于篇幅有限，我就不詳細(xì)說了。 詳細(xì)內(nèi)容可以閱讀這篇博文：環(huán)境變量的作用是什么？ 為什么要設(shè)置環(huán)境變量？

總而言之，環(huán)境變量將會是你以后經(jīng)常會遇到的又愛又恨的朋友。

集成開發(fā)環(huán)境

IDE集成開發(fā)環(huán)境。 它是用于提供程序開發(fā)環(huán)境的應(yīng)用程序，一般包括代碼編輯器、編譯器、調(diào)試器和圖形用戶界面等工具。 是集成了代碼編寫功能、分析功能、編譯功能、調(diào)試功能等的集成開發(fā)軟件服務(wù)套件。如微軟的系列。 適合編寫前端的IDE包括：Code()、text等，本文將重點介紹它們。 為什么？ 因為它的味道太好聞了！ 它不僅可以用來寫前端，而且還有巨大的功能（請閱讀下文）。

其實嚴(yán)格意義上不能稱為IDE，但是很多擴展（）或者插件甚至可以擁有比IDE更強大的功能。 我們來看看編寫前端需要的步驟：

1、安裝。

建議參考最新版安裝教程，不贅述。

2、安裝編寫Html、css、前端所需的三件套插件：

配對（在括號中添加不同的顏色來區(qū)分不同的塊。用戶可以定義不同的括號類型和顏色）

安裝前：

安裝后：

HTML（智能提示HTML標(biāo)簽，以及標(biāo)簽含義），（ES6）代碼（智能提示ES6語法，快速輸入，不僅支持.js，還支持.ts、.jsx、.tsx、.html、. vue，省了配置一下，支持各種含有js代碼的文件）

（格式化html、js、css）

打開方式（允許您右鍵單擊以在應(yīng)用程序內(nèi)打開網(wǎng)頁sublime text 3 js代碼格式化，而無需找到源文件然后將其打開）

什么，你問怎么安裝？我們看一下下面的操作

我還想介紹一下常用快捷鍵的使用，畢竟可以提高效率。

1、注意事項：

a) 單行注釋：[ctrl+k,ctrl+c] 或 ctrl+/

b) 取消單行注釋：[ctrl+k,ctrl+u]（按住ctrl，然后按k + u）

c) 多行注釋：[alt+shift+A]

d) 多行注釋：選擇文本字段后按ctrl+/

2. 移動行：alt+上/下

3.顯示/隱藏左側(cè)目錄欄ctrl + b

4.復(fù)制當(dāng)前行：shift + alt +上/下

5.刪除當(dāng)前行：shift+ctrl+k

6.顯示和隱藏控制臺終端：ctrl + ~

7.查找文件/安裝vs code插件地址：ctrl + p

8.代碼格式：shift + alt +f

注意：代碼格式化并不意味著刪除所有代碼。

9. 創(chuàng)建一個新窗口：ctrl + shift + n

10. 給一行添加縮進：ctrl + [

11.減少行縮進：ctrl + ]

12、剪切尾部空格（去除行尾無用的空格）：ctrl + shift + x

13. 字體放大/縮?。篶trl + ( + 或 - )

14.分割編輯器：ctrl + 1/2/3

這里我將演示如何使用它來編寫最簡單的網(wǎng)頁。

打開，選擇文件夾并輸入

右鍵單擊鼠標(biāo)，選擇創(chuàng)建文件.html（后綴必須為.html，文件會根據(jù)對應(yīng)的后綴進行處理）

在英文輸入法模式下，輸入一個感嘆號，然后按Tab鍵完成，會出現(xiàn)如下界面。

title代表網(wǎng)頁的名稱，body中寫網(wǎng)頁的內(nèi)容，然后Ctrl+S（保存）很重要！

然后右鍵單擊箭頭所指的地方

出現(xiàn)這樣的界面就意味著你的環(huán)境已經(jīng)配置好了，你可以簡單的寫一個前端頁面了。 至于其他有趣實用的功能，建議多探索。 驚喜總是在不遠(yuǎn)處。

好了，寫前端的“筆”已經(jīng)準(zhǔn)備好了。 接下來我們準(zhǔn)備正式進入前端世界，等待下一篇文章。

下一期預(yù)覽：

網(wǎng)頁的“正文”：html

文案| 姜子陽、熊長春

排版|倪曉

封面|陳一公

回顧|劉雨涵劉志強鄭田黃一鳴

如有侵權(quán)請聯(lián)系刪除！