iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 2
0
自我挑戰組

蛻變事實-UI設計師勇闖前端城系列 第 2

[蛻變事實/D02] 設計師勇闖前端城-(必備工具1:編輯器)

在網頁設計開發的歲月裡,我共用了以下幾項編輯器(舊-新)

Dreamweaver

資深者最懂 XD ,雖然沒有再用它,但它的影像地圖功能還是無人能敵,
還是好用丫~~丫~~~

Sublime

幾年前開始想朝"前端"技術學習時,周圍的工程師朋友們都用這款開發工具,
當初自己也用過一陣子,但對於安裝外掛擴充工具,一個習慣中文介面DW開發的我,
不管快速鍵、語系、擴充工具設置,等等....一下子很難接受。
對我而言就像一下子面對一個很陌生的「程式領域」
對從設計角度轉向"程式"而言,除了要轉個腦袋外,連工具都要完全不同,
當時摸索好一陣子,也覺得一直有個門檻!太過工程的介面,我過不去 =..=/images/emoticon/emoticon06.gif
(就當我視覺動物,看到美美介面才不害怕吧)

Brackets

官網:http://brackets.io/index.html

這也是一款adobe出的免費、開放原始碼的純文字網頁編輯器。
當它還是Beta版時就開始試玩。
它的介面及優勢對我來說介於DW、sublime中間,而且利於設計師碰程式的適應。
Brackets一樣可以安裝外掛、可所見即所得、貼近網頁設計轉前端的學習路,
所以在還沒習慣sublime前就轉至跳至Brackets使用。
對我而它還是很好的開發工具,但市場上討論及使用的朋友真的不多啊~
而且2015-2016年那時的文章介紹都很基本(也沒有什麼新文)

我想另一個原因sublime後來的擴充很多也可以達到Brackets優勢。
但還沒遇見VSCode前我真心是愛它的!
也或許更是因為有B的適應才讓我面對VSCode,才這麼快上手!
而二年前推薦B給設計的朋友使用,她後來也都用B做一些基本網頁
因為介面太帥氣,讓鄰坐的工程師朋友還來問:妳不是設計師嗎?怎麼也要寫程式?XD
這就是工慾善其事,必先利其器.....就是把別人先嚇倒(哈哈哈)

Visual Studio Code (簡稱 VSCode )

官網:https://code.visualstudio.com/

這款是由微軟開發的編輯器。
在經歷過前面各不同的編輯器,直到我荒廢前端學習數月後,
某一天振作又捨起「前端」這條學習路!
為了撰寫 SCSS 來開發,但它需要"編譯"轉為CSS。
因此只好憑著一絲絲好友以前教過的,sublime & compass 設定,
就開始了摸索MAC安裝環境,但經過數日後~
發現.....這對我而言是花星文+滿頭星星
/images/emoticon/emoticon02.gif

心想:難道要放棄自己DIY的堅持? 正在準備放棄投奔至好友家求救時,突然.....

在最後爭札的某夜裡爬著網路文發現很多大大的教學影片是用VSCode的介面,
還更多大大在做分享推坑文!!!??
因此產生了好奇,就連續幾天就把所有的相關 VSCode、SASS/SCSS 影片翻出來看!
做好筆記、開始安裝、習慣快速鍵、開始翻找每種適合我的VSCode擴充工具!
只要透過這編輯器的按鈕+搜尋就可以簡簡單單安裝好工作環境!
再加上剛好遇見一個前端大大要開SCSS的線上教學課程,就剛好一起報名下去~

接著這一個多月,我就愛上了**VSCode **
對於一個不熟程式又害怕英文的設計師而言,這就像一盞明燈啊!
在這裡還是不得說一聲,如果你是單純平面設計轉網頁設計或前端,
真心推 **VSCode ** 編輯器!

以下就來分享一下,那一夜到底是誰點醒了我這夢中人,
讓我現在每天都播出時間用 VSCode 編寫 SASS/SCSS

*六角學院 VSCode 介紹 - 編譯 Sass、除錯、插件介紹
*Alex宅幹嘛 [ Alex 宅幹嘛 ] ?‍?開掛囉!!! VSCode 工作學習效率加倍術
*Alex宅幹嘛 [ Alex 宅幹嘛 ] ?‍? Visual Studio Code 大哉聊

如果也喜歡他們的影片,歡迎訂閱加分享,還有固定注意有技術分享討論的直播喔!
(純粹個人熱愛的好物、好站分享)


上一篇
[蛻變事實/D01] 設計師勇闖前端城-(開闖前言)
下一篇
[蛻變事實/D03] 設計師勇闖前端城-(必備工具1-1:VSCode 擴充品收集)
系列文
蛻變事實-UI設計師勇闖前端城35

尚未有邦友留言

立即登入留言