說起編譯工具，其實(shí)在剛開始做前端的時(shí)候圃泡，我還是稍微的對比了一下當(dāng)今主流的幾個(gè)編譯軟件的。webstorm愿险、vscode颇蜡、sublime、atom辆亏。最后我還是選擇使用了webstorm风秤，考慮到大家在剛學(xué)習(xí)前端的時(shí)候都會(huì)在編譯器上面考慮很久，就像幾個(gè)月之前的我一樣扮叨，考慮來考慮去缤弦，時(shí)間過去了，技術(shù)卻沒有提高彻磁。鑒于我有這樣的經(jīng)歷碍沐，我將從webstorm、sublime衷蜓、atom三個(gè)主流的軟件說起累提，分別介紹其安裝方法、優(yōu)劣勢磁浇、以及我在寫前端的時(shí)候一些小技巧與大家分享（其中的部分技巧是在別人的項(xiàng)目/文章中總結(jié)得來）斋陪。由于本文檔是結(jié)合項(xiàng)目做的一些總結(jié)，如果存在疑慮置吓，請?jiān)诹粞詤^(qū)域留下您寶貴的意見和建議鳍贾。
一、 sublime
??首先來說一下sublime交洗，首先為什么要選擇這個(gè)東西呢骑科？是我大學(xué)室友重點(diǎn)推薦的，另外我的啟蒙書籍強(qiáng)烈的推薦构拳。外加上我自己也覺得操控這個(gè)軟件會(huì)讓人感覺自己很高端咆爽，當(dāng)然最最重要的是沒換電腦之前電腦的配置不太夠梁棠，強(qiáng)行運(yùn)行其他軟件會(huì)讓我那臺(tái)老爺機(jī)喘不過氣來??。
??不扯了斗埂，直接開始安裝吧符糊。
1.下載安裝： 點(diǎn)擊sublime官網(wǎng)
![]()
sublime官網(wǎng)
??
2. 安裝Package Control：如圖所示，點(diǎn)擊ctrl+～呛凶，然后復(fù)制下面一串代碼：
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())
??3. command(ctrl)+shift+p選擇 install Package Control,最后根據(jù)需要挑選自己想要的插件男娄，講道理這里的插件還是挺全的。
3. 輸入<html漾稀，就出現(xiàn)html模版了模闲。
4. 注意如果你的電腦配置比較低，我還是建議你使用這個(gè)插件或者使用vscode崭捍，這兩個(gè)對電腦的配置要求不高尸折。并且里面的插件比較豐富，基本都能滿足每一個(gè)前端開發(fā)人員的需求殷蛇。
二实夹、 atom
??關(guān)于atom呢，這個(gè)得追溯到我當(dāng)初學(xué)markdown得時(shí)候粒梦。當(dāng)初在學(xué)markdown的時(shí)候亮航，當(dāng)時(shí)的老大給我推薦的就是這款編譯器，這個(gè)編譯器在外觀匀们，包括編譯的感覺上面完全符合我這種顏值狗的首選塞赂。但是當(dāng)時(shí)只是把這個(gè)編譯器當(dāng)作一個(gè)markdown的工具而已。直到去年很多前端的語言推薦這款產(chǎn)品昼蛀，我才真正探究這款編譯器宴猾。說實(shí)話，要不是我現(xiàn)在使用webstrom習(xí)慣了叼旋，這個(gè)編譯器將會(huì)是我編譯前端的首選仇哆。
1、 安裝
2夫植、安裝插件：打開File(windows)->Settings->Install讹剔，然后在里面搜索vue，然后就會(huì)出現(xiàn)插件然后直接install就行了,另外我還自己安裝了許多樣式效果详民，能在開發(fā)之余帶來一點(diǎn)樂趣
![]()
image.png
![]()
image.png
3延欠、atom這款插件。功能強(qiáng)大沈跨，樣式很好看由捎、如果我不是提前就接觸過idea類的產(chǎn)品的話。這個(gè)將會(huì)是我的首選饿凛。但是前面也說了狞玛，我現(xiàn)在正在同時(shí)開發(fā)Android和前端软驰。為了減少編譯器的耦合性，就還是選擇了webstrom心肪，但是我個(gè)人還是特別推薦這款編譯器的锭亏。畢竟是github出品的。
三硬鞍、 webstrom
??最后談一談webstrom慧瘤，為什么我要使用webstrom呢？看標(biāo)題也知道固该，我以前是做Android的锅减。而Android開發(fā)有一款工具叫Android studio。而webstrom正是和Android studio一個(gè)系列的蹬音。甚至我以前開發(fā)的一些習(xí)慣都可以直接搬到這個(gè)上面來上煤。這也是我拋棄可以裝逼的webstrom和顏值超高的atom的原因休玩。外加上我現(xiàn)在同時(shí)在開發(fā)Android著淆，前端項(xiàng)目。自己又沒有能力達(dá)到一心兩用拴疤，所以盡量減少編寫代碼的一些差異性永部，有利于自己快速的容易各個(gè)領(lǐng)域。
1呐矾、安裝 打開官網(wǎng)
然后打開文件之后按照自己的電腦配置一路next就可以安裝了苔埋。
2、注冊
在激活的時(shí)候選擇 license server蜒犯；
輸入此地址激活：http://idea.imsxm.com
3组橄、選擇es6語法：
四、 關(guān)于在開發(fā)前端的技巧
??其實(shí)編譯器只是你寫代碼的一個(gè)輔助工具罷了罚随，不必為了選擇而去選擇玉工，如果你對一個(gè)語言足夠熟悉的話，甚至用vim淘菩、nodepad++等工具都能進(jìn)行編譯的遵班。學(xué)習(xí)一門語言，基礎(chǔ)是底蘊(yùn)潮改，技巧是捷徑狭郑，今天我就從js的一些技巧講起，結(jié)合自己的所見汇在、所想翰萨，向大家總結(jié)我的一些寫作心得。
-
if ...else簡寫
-
普通寫法
if (window.navigator.userAgent.indexOf('AlipayDefined') >=0) { type = '阿里支付' } else { type = '其他支付' } -
簡寫：
type = window.navigator.userAgent.indexOf('AlipayDefined') >= 0 ? "阿里支付" : "其他支付"
-
-
條件過多：多個(gè)if...else...else if
-
普通寫法
if (type === 1) { // 阿里支付 } else if (type === 2) { // 微信支付 } else if (type === 3) { // 百度支付 }else { //其他支付}
-
簡寫：
switch (type) { case 1: // 阿里支付 break; case 2: // 微信支付 break; case 3: // 百度支付 break; default: // 其他支付 break; }
-
-
縮短求值簡寫: 有時(shí)候在使用某些變量的時(shí)候糕殉，總是要考慮到該變量是否是空缨历，是否未定義等等：
-
普通寫法
let data = this.tabledata if (data !== null && data !== undefined && data !== "") { // dosomething } -
簡寫：
const data = this.tabledata || 'new';
-
-
判斷if里面為真：但是這里會(huì)有點(diǎn)坑
-
普通寫法
if (data !== true) { // dosomething } -
簡寫：
// 但是如果data的值是1的時(shí)候依然會(huì)運(yùn)行里面的以蕴，這是我在開發(fā)的時(shí)候遇到的bug if (data) { // dosomething } if (!data) { // dosomething }
-
-
變量的賦值：
-
普通寫法
var x =0; var y=1; -
簡寫：
var x=0,y=1;
-
-
循環(huán)：
-
普通寫法
for (var i = 0; i < datas.length; i++) -
簡寫：
for (var index of datas)
-
-
縮短求值
-
普通寫法
let host; if (process.env.DB_HOST) { host = process.env.DB_HOST; } else { host = '0.0.0.0'; } -
簡寫
const dbHost = process.env.DB_HOST || '0.0.0.0';
-
-
方法改成箭頭函數(shù)
-
普通寫法
setTimeout(function () { console.log("timeout===>>>") },1000) list.forEach(function (item) { console.log(item); }) // vue test: function () { } function calcCircumference(diameter) { return Math.PI * diameter } -
簡寫
setTimeout(() => { console.log("time out=>>") }, 1000) list.forEach( item => { console.log(item) }) // vue test () { } calcCircumference = diameter => ( Math.PI * diameter; }
-
-
find方法
-
普通寫法
const peoples = [ { type:"student", name: "xiaohong"}, { type:"teacher", name: "laojiang"}, { type: "assitant", name: "xiaozhang"} ] function findStu(name) { for(let i=0;i<peoples.length;i++) { if (peoples[i].type === "student" && peoples[i].name === name) { return peoples[i]; } } } -
簡寫
let people = peoples.find(people=>people.type === "student" && people.name === name)
-
-
清空數(shù)組
-
普通寫法：使用此種做法，只是將一個(gè)變量引用到另外一個(gè)數(shù)組辛孵，其他引用不受影響丛肮。先前的數(shù)據(jù)引用依舊在內(nèi)存中，可能會(huì)造成內(nèi)存泄漏
var list = [1, 2, 3, 4]; function clear() { list = []; } -
技巧：刪除數(shù)組內(nèi)的所有所有東西
var list = [1, 2, 3, 4]; function clear() { list.length = 0; }
-
-
使用更簡單的類似indexOf的包含判斷方式
-
通用做法
var someText = 'JavaScript rules'; if (someText.indexOf('JavaScript') !== -1) { } // 或者 if (someText.indexOf('JavaScript') >= 0) { } -
技巧
// es6 'something'.includes('thing'); // true // 或與操作魄缚，在網(wǎng)上看到的宝与，但是暫時(shí)用的是es6 主要用上面兩種 var someText = 'text'; !!~someText.indexOf('tex'); // someText 包含 "tex" - true !~someText.indexOf('tex'); // someText 不包含 "tex" - false ~someText.indexOf('asd'); // someText 不包含 "asd" - false ~someText.indexOf('ext'); // someText 包含 "ext" - true String.prototype.includes()
-
五、webstrom快捷鍵
??談到快捷鍵冶匹，這真是一個(gè)好東西习劫，因?yàn)檫@個(gè)東西要是用的好能讓你的開發(fā)事半功倍，由于我自己又一些Android studio開發(fā)的經(jīng)驗(yàn)嚼隘，外加上前面的很多語法技巧在webstrom里面都會(huì)有提示（這也是我選擇這個(gè)編譯器的一個(gè)初衷）诽里，然后我就在最后簡單的介紹我常用到的一些快捷鍵：
?——Command ? ——Control ?——alt ?——Shift ?——Caps Lock fn——功能鍵就是fn
Command+alt+T 用 (if..else, try..catch, for, etc.)包住
Command+/ 注釋/取消注釋的行注釋
Command+alt+/ 注釋/取消注釋與塊注釋
alt+↑ 向上選取代碼塊
alt+↓ 向下選取代碼塊
Command+alt+L 格式化代碼
tab,shift+tab 調(diào)整縮進(jìn)
Control+alt+I 快速調(diào)整縮進(jìn)
Command+C 復(fù)制
Command+X 剪切
Command+V 粘貼
Command+shift+V 從剪貼板里選擇粘貼
Command+D 復(fù)制代碼副本
Command+delete 刪除當(dāng)前行
Control+Shift+J 清除縮進(jìn)變成單行
shift+回車 快速換行
Command+回車 換行光標(biāo)還在原先位置
Command+shift+U 大小寫轉(zhuǎn)換
Command+shift+[,Command+shift+] 文件選項(xiàng)卡快速切換
Command+加號(hào),Command+減號(hào) 收縮代碼塊
Command+shift+加號(hào)，Command+shift+減號(hào) 收縮整個(gè)文檔的代碼塊
Command+W 關(guān)閉當(dāng)前文件選項(xiàng)卡
alt+單擊 光標(biāo)在多處定位
Control+shift+J 把下面行的縮進(jìn)收上來
shift + F6 高級修改飞蛹，可快速修改光標(biāo)所在的標(biāo)簽谤狡、變量、函數(shù)等
alt+/ 代碼補(bǔ)全
Command+O 跳轉(zhuǎn)到某個(gè)類
Command+shift+O 跳轉(zhuǎn)到某個(gè)文件
Control+←,Control+→ 轉(zhuǎn)到上/下一個(gè)編輯器選項(xiàng)卡
F12 打開之前打開的工具窗口（TODO卧檐、終端等）
Command+L 跳轉(zhuǎn)行
Command+alt+←,Command+alt+→ 向前向后導(dǎo)航到代碼塊交接處（一般是空行處）
Command+shift+delete 導(dǎo)航到上一個(gè)編輯位置的位置
Command+B 跳轉(zhuǎn)到變量聲明處
Control+J 獲取變量相關(guān)信息（類型墓懂、注釋等，注釋是拿上一行的注釋）
Command+Y 小浮窗顯示變量聲明時(shí)的行
Command+[,Command+] 光標(biāo)現(xiàn)在的位置和之前的位置切換
Command+F12 文件結(jié)構(gòu)彈出式菜單
alt+H 類的層次結(jié)構(gòu)
F2,shift+F2 切換到上\下一個(gè)突出錯(cuò)誤的位置
Command+↑ 跳轉(zhuǎn)到導(dǎo)航欄
alt+shift+C 打開最近修改列表
Command+F 搜索
Command+R 替換
Command+G 查找下一個(gè)
Command+shift+G 查找下一個(gè)
Command+shift+F 按路徑搜索
Command+shift+R 按路徑替換
Command+F7 向聲明的地方搜索并選中
Command+shift+F7 打開搜索框進(jìn)行搜索
Command+alt+F7 打開小浮窗顯示搜索列表
F5 復(fù)制文件到某個(gè)目錄
F6 移動(dòng)文件到某個(gè)目錄
Command+delete 安全刪除
shift+F6 重命名
Command+切換項(xiàng)目 Command+shift+ 反向切換項(xiàng)目
Command+shift+A 整個(gè)工程的查找操作
