iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 8
1
Modern Web

前端工程師-從新手都中手系列 第 8

DAY8- 工欲善其事,必先利其器。弄個舒服的VS Code

前端工程師可以使用的編輯器有很多選擇,像是sublime、Atom、webstorm等等好用的編輯器。

編輯器是工作中最重要的軟體,一天工作當中,使用最長的時間非編輯器莫屬,因此選個喜歡的編輯器,然後把它弄得舒舒服服地樣子,是一件非常重要的事情

編輯器要選就選喜歡的,在這邊推薦我用起來最舒服的VS Code

VS Code下載與安裝

直接到官網下載安裝即可,沒有什麼特別的步驟,一直按下一步就安裝完成了如果使用Mac的話,也可以使用 brew cask的方式安裝

VS Code下載

快速打開VS Code的技巧

在windows中,只要檔案總管在 code . 就可以快速在這個目錄打開VS Code

https://ithelp.ithome.com.tw/upload/images/20200923/20120107YDriRLFEAW.png

在Terminal也可以中,也可以到目錄下輸入 code . ,在該目錄打開VS Code
https://ithelp.ithome.com.tw/upload/images/20200923/2012010766ZvesFJ7Y.png

VS Code Insider

VS Code還有insider版本,就是預覽版本的意思,可以先使用到未來的版本,可能可以搶先體驗到新功能。Insider版本和正式版本的icon不一樣,是綠色的。

雖然說預覽版本可能存在不穩或是有問題的狀態,但是依筆者使用好幾年的經驗,幾乎沒有遇過有問題的情形,還可以故作神秘跟周遭的人預言未來新功能?

有興趣的話可以玩玩看

VS Code Insider下載

實用的快速鍵

裡面有很多實用的快速鍵,以下列出我常常用到覺得很方便的快速鍵。甚至很多快速鍵不只有VS Code可以使用,在作業系統或瀏覽器上同樣適用

畢竟記住一些常用方便的快速鍵,是有助於提升開發效率的,也可以一直將手放在鍵盤上,不必一直移動到滑鼠。

註:在這邊寫的快速鍵為windows的,如果使用mac,將ctrl換成command即可

  • ctrl+p: 搜尋專案內的檔案
  • ctrl+tab:切換頁籤(在chrome同樣可以切換頁籤)
  • ctrl+l:選取一整行
  • ctrl+enter:插入新的一行
  • ctrl+shift+K: 直接刪除整行
  • alt + 上或下:將目前這行或區塊往上或往下
  • ctrl+D :選取這份檔案裡面相同的文字
  • alt+shift+F:自動格式化程式碼,將程式碼變成漂漂亮亮的樣子

F2-修改function命名

在Javascript或Typescript中,對function按 F2,可以重新命名,並且會自動將所有用到的也一併重新命名。

https://ithelp.ithome.com.tw/upload/images/20200923/20120107nGDGqnpOnO.png

F12-尋找使用function的地方

在Javascript或Typescript中,對function點 F12 可以找到使用這個方法的function

https://ithelp.ithome.com.tw/upload/images/20200923/20120107hs8wYVUZbB.png

實用的套件

Chinese (Traditional) Language Pack for Visual Studio Code

如果英文版本的VS Code看不習慣,這裡有中文套件,可以將VS Code改成中文版的。

vs code 中文套件

Live Share

微軟官方推出的即時分享程式碼的神器。現在越來越流程遠端工作,無法面對面看程式碼。當遇到問題的時候,最快的方法就是開程式碼給別人看,這時候就可以使用這個套件。它可以將你的vs code分享給別人看,也可以讓別人直接編輯你的程式碼,非常方便

live share連結

Tech Debt Metrics

https://ithelp.ithome.com.tw/upload/images/20200923/20120107si5eyLBQ4p.png!

這個套件可以告訴你的程式碼哪裡有壞味道,安裝完之後,在每個函式上面就會有關於這個函式的評分,會分別給予A、B、C、D等分數,點下去之後,就可以看到評分的細節,它會告訴你他基於什麼理由給予這樣的評分。雖然說不是絕對的標準,但是可以讓自己心裡有個底,這裡可能有些壞味道

TODO Highlight

寫程式的時候總有一些還未完成的事項要提醒自己未完成。就可以加上TODO,提醒自己要做,這個套件會加上螢光色,讓你更好找到

https://ithelp.ithome.com.tw/upload/images/20200923/20120107GWGbalBlrT.png

TODO Highlight連結

indent-rainbow

將程式碼的縮排加上不同顏色,除了美觀外,更是為了可以清楚看見結構的層次

https://ithelp.ithome.com.tw/upload/images/20200923/20120107dl2LUee8vg.png

GitLens — Git supercharged

Gitlens是一套強大的git工具,可以追蹤這段程式碼最後誰修改過,總共有多少人修改過。這樣發生問題的時候,會更容易知道發生什麼問題,這個問題要問誰等等。
https://ithelp.ithome.com.tw/upload/images/20200923/20120107JwdzWu3c0w.png


上一篇
DAY7-CSS結構化與命名技巧
下一篇
DAY9-git在commit的時候,到底commit了什麼(原理篇)
系列文
前端工程師-從新手都中手30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
alexvan
iT邦新手 5 級 ‧ 2022-04-23 07:33:11

寫code的人連有沒's'都不注意?

https://ithelp.ithome.com.tw/upload/images/20220423/201484851261aPPaiS.png

我就新手沒有騙你吧

我要留言

立即登入留言