前端入門編輯器
背景介紹
大家好！我是H少白，一名應(yīng)屆畢業(yè)生，2018年6月份就是結(jié)束我學(xué)業(yè)生涯的時候。其實剛進入大四我就對找工作充滿了恐懼和不知所措，尤其是我的野心想在上海擁有自己的一片天，讓我更加的焦灼。我開始思考自己的不足，思考如何面對面試官和如何在工作中干的漂亮讓老板賞識。是的，我現(xiàn)在知道那時的我是多幼稚。因為我那時連一份簡歷都沒做過，何談下面的事。在今年10月份，我在前程無憂網(wǎng)投出了第一份簡歷，接下來就是第二份、第三份，一直到我投出了第50份，我覺得夠了，應(yīng)該會有很多公司來找我（投的簡歷都是關(guān)于機械和電氣方面的）。然而我收到了5份面試通知，最后，只有一家電氣公司給我發(fā)了offer。我應(yīng)該高興對不對，至少我有了一次工作的機會。但是我更加失落，不是因為薪資不好，而是我在這一個月內(nèi)，跑遍了上海幾所高校的招聘會，面試來了5家公司，我明白了公司與公司之間的差距，我不想在車間里“擰螺絲”或者在工廠里“接電線”，不想在上海過著一眼看到底的生活。我到上海有我對自己的要求和底線，如果就這么的過幾年，那我不如回家在自家的一畝三分地里過一輩子。我打電話給正在復(fù)習(xí)考研的發(fā)小和已經(jīng)工作的老同學(xué)。在和他們聊天的時候，他們告訴我：在沒有畢業(yè)前找工作不要著急，如果轉(zhuǎn)行可以試試互聯(lián)網(wǎng)，反正我還有幾個月的時間能去集中地學(xué)習(xí)。
自己決定學(xué)習(xí)前端是因為一家培訓(xùn)機構(gòu)。當時我不知道自己學(xué)什么又對互聯(lián)網(wǎng)行業(yè)一竅不通，才去了培訓(xùn)機構(gòu)咨詢。他們給我介紹了JAVA、C++、前端開發(fā)，也不知道為什么就覺得前端適合我，當時我就覺得跟隨自己內(nèi)心的選擇會沒錯。就這么我決定學(xué)習(xí)前端開發(fā)。有了選擇之后，就瘋狂地網(wǎng)上找教程，大概找了一周左右的時間之后，有一個大概的方向了：決定先從最基礎(chǔ)的html、css入手，然后在學(xué)習(xí)javascript相關(guān)的知識。
學(xué)習(xí)html、css得有一個編輯器，所以今天跟大家一起學(xué)習(xí)一下如何使用編輯器。
雖然剛從機械轉(zhuǎn)到前端僅僅一周的時間，是名副其實的前端小白，但對于我從“擰螺絲”轉(zhuǎn)行到“敲代碼”這件事，其實我也是從剛開始的迷茫到最后的堅定。今天想要給大家分享的就是我的這段“如何打開前端大門”的經(jīng)歷，以及這一周來我學(xué)到的“前端入門編輯器”的知識（重點在知識）。
開始
我通過網(wǎng)上各種網(wǎng)頁和大牛們的博客，選擇了Sublime Text和Visual Studio Code兩個編輯器。也是通過大牛的博客中開始學(xué)習(xí)對這兩個編輯器初步的了解和簡單的運行。希望和我一樣剛剛踏入前端的同行們看到我寫的文章會了解到編輯器。
一、了解sublime text:
對SublimeText的初步了解：sublime是一款跨平臺編輯器，可經(jīng)常切換系統(tǒng)使用。sublime是可擴展的（包含大量實用插件，可安裝插件來提高效率）。
1、下載和安裝sublime text:
直接上官網(wǎng)搜sublim text,點擊下載。安裝是傻瓜式安裝，一直往下就ok了。對于我們小白來說很簡單對吧。
? 官網(wǎng)：http://www.sublimetext.com/
2、添加Sublime Text到環(huán)境變量
我的電腦”右鍵‘屬性’----點擊高級系統(tǒng)設(shè)置----環(huán)境變量---編輯系統(tǒng)變量path---增加系統(tǒng)變量SublimeText的安裝目錄(例如E:\Sublime Text\Sublime Text3)。
注意：變量名和變量值跟圖片中的一致。
? 接下來你就可以在命令行里面利用sub1命令直接使用Sublime Text了：
? sub1 file? ? :: 使用Sublime Text打開file文件
? sub1 folder? :: 使用Sublime Text打開folder文件夾
? sub1 .? ? ? :: 使用Sublime Text當前文件夾
3、安裝Package Control
? 我安裝的是Sublime Text3英文版，下面都是以這個版本為主。如果想下載中文版網(wǎng)上也有。推薦英文版。
? 使用Ctrl+`打開控制臺? 粘貼下面的代碼到控制臺:
? ? ? import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)? ?
等待PC下載完成，打開命令板ctrl+shift+p,輸入PC應(yīng)出現(xiàn)Package Control
4、基本概念
? 標簽（Tab）：無需介紹。
? 編輯區(qū)（Editing Area）：無需介紹。
? 側(cè)欄（Side Bar）：包含當前打開的文件以及文件夾視圖。
? 縮略圖（Minimap）：如其名。
? 命令板（Command Palette）：Sublime Text的操作中心，它使得我們基本可以脫離鼠標和菜單欄進行操作。
? 控制臺（Console）：使用Ctrl + `調(diào)出，它既是一個標準的Python REPL，也可以直接對Sublime Text進行配置。
? 狀態(tài)欄（Status Bar）：顯示當前行號、當前語言和Tab格式等信息。
5、編輯（Editing）
基本編輯（Basic Editing）
? Ctrl + Enter在當前行下面新增一行然后跳至該行；Ctrl + Shift + Enter在當前行上面增加一行并跳至該行。
? Ctrl + ←/→進行逐詞移動，相應(yīng)的，Ctrl + Shift + ←/→進行逐詞選擇。
? Ctrl + ↑/↓移動當前顯示區(qū)域，Ctrl + Shift + ↑/↓移動當前行。
選擇 （Selecting）
? Sublime Text的一大亮點是支持多重選擇——同時選擇多個區(qū)域，然后同時進行編輯。
? Ctrl + D選擇當前光標所在的詞并高亮該詞所有出現(xiàn)的位置，再次Ctrl + D選擇該詞出現(xiàn)的下一個位置，在多重選詞的過程中，使用Ctrl + K進行跳過，使用Ctrl + U進行回退，使用Esc退出多重編輯。
? 多重選詞的一大應(yīng)用場景就是重命名——從而使得代碼更加整潔。盡管Sublime Text無法像IDE（例如Eclipse）那樣進行自動重命名，但我們可以通過多重選詞+多重編輯進行直觀且便捷的重命名：
? 有時我們需要對一片區(qū)域的所有行進行同時編輯，Ctrl + Shift + L可以將當前選中區(qū)域打散，然后進行同時編輯：
有打散自然就有合并，Ctrl + J可以把當前選中區(qū)域合并為一行：
新建文件&保存預(yù)覽
學(xué)習(xí)了上面的一些基礎(chǔ)操作，我們可以簡單的學(xué)習(xí)一下編寫基礎(chǔ)的html。
先在本地新建一個文件夾“FrontEnd”，然后在sublim text打開FronEnd，新建一個file編寫代碼。
ctrl + s保存,使用chrome、firefox預(yù)覽
二、了解Visual Studio Code
安裝
下載：https://code.visualstudio.com/
安裝：傻瓜式直接安裝
界面概述
插件
Ctrl + Shift + P或 F1 打開擴展面板，輸入 install 后按回車打開擴展安裝面板；或點擊側(cè)邊欄的最后一個按鈕；或使用ctrl + shift + x命令打開；或使用 查看->擴展打開擴展面板。
在對話框中輸入[string ]@sort:installs可以根據(jù)下載量排序查看，選擇所需插件，單擊安裝即可。
@sort:installs：根據(jù)下載量排序查看所有插件，asc 升序排列，desc 降序排列。
推薦插件：
C/C++：添加C/C++支持，包括但不限于自動補全
Python：自動縮進，補全，查錯，debug，代碼格式化等等
beautify：格式化html，css，js
vscode-icons：一款很火的圖標主題
HTML Snippets：可以在不輸入 < 的情況下提示
View In Browser：在瀏覽器中打開 HTML 文件
Crane - PHP Intellisense：PHP代碼的自動補全插件
jQuery Code Snippets：一款jQuery重度患者的插件
Debugger for Chrome：調(diào)試JavaScript
Git History：顯示git log和line history
配置
Ctrl + Shift + P或 F1 打開命令面板(也可以使用 查看->命令面板打開)；
輸入user set后按回車打開用戶配置；
使用"editor.fontFamily":"Consolas, 'Courier New', monospace"選擇字體樣式，默認為"Consolas, 'Courier New', monospace"；使用 editor.fontSize":14控制字體大小，默認為14；使用 "editor.wrappingColumn":0使文本自動換行，默認為300；在左側(cè)的默認配置中會有詳細的中文描述，配置文件是json格式的文本文檔。
主題更換
[圖標主題：Ctrl+shift +p打開命令面板，輸入 icon theme 后回車，選擇一個即可。
顏色主題：Ctrl+shift +p打開命令面板，輸入 color theme 后回車，選擇一個即可。
跳轉(zhuǎn)
跳轉(zhuǎn)到文件：Ctrl+P。
跳轉(zhuǎn)到符號：Ctrl+shift+o，可以跳轉(zhuǎn)到文件中的方括號、大括號等等。
跳轉(zhuǎn)到行：Ctrl+G，可以跳轉(zhuǎn)到指定行。
Debug
使用ctrl+d打開debug面板。
可以根據(jù)需要配置launch.json
常用功能
Emmet：使用 Tab 自動補全HTML標簽
Markdown Preview：使用 Ctrl + shift + v預(yù)覽markdown文件
使用shift + alt + up/down可以向上/下復(fù)制選中內(nèi)容或者當前行
新建文件&保存預(yù)覽
vscode和sublime一樣，學(xué)習(xí)了基礎(chǔ)操作，我們就開始練習(xí)基礎(chǔ)的html。
在新建文件（".html"擴展名）中編輯代碼，ctrl+s保存，使用chrome、firebox預(yù)覽。
結(jié)束
以上是我四天內(nèi)學(xué)習(xí)的知識，我知道這只是一點皮毛，連入門都不算。我還要學(xué)習(xí)很多的知識，安裝了編輯器就該使用編輯器了，可以多多練習(xí)基礎(chǔ)的html，還有很多比如HTML XHTML、HTML5、HTML圖形、HTML媒體等等的知識等著我去學(xué)習(xí)。希望我能夠和更多的同學(xué)們共同學(xué)習(xí)，共同進步。
