iT邦幫忙

2022 iThome 鐵人賽

DAY 3
0
Modern Web

用Node.js建立專屬於你的API吧系列 第 3

Day3 - 開發工具和其擴充套件介紹

  • 分享至 

  • xImage
  •  

前情提要

在開始使用程式語言前,一定都要有開發工具才可以開始,因此今天會介紹本次會使用到的開發工具還有分享一些我自己有用到擴充套件。

介紹開發工具

1.下載:
我們今天要來介紹我們建立 API 的開發工具和一些好用的擴充套件囉!我這邊使用的是 Visual Studio Code 來進行開發。你只要搜尋 VSCode 就可以找到此頁面,這邊 VSCode 網站非常貼心,他會幫你顯示你這台電腦是 Windows 系統的還是 Mac 系統的,所以直接點擊下載就好。
https://ithelp.ithome.com.tw/upload/images/20220829/20151565BsrJM9d8Wu.png

2.進入專案:
首先先在你的桌面上建立一個資料夾,取名字盡量以英文為主,因為往後在工作上基本上開發取名都是以英文為主,所以從一開始就養成習慣,我這邊是叫做 api 。之後打開你剛下載後的 VSCode 會長這樣。
https://ithelp.ithome.com.tw/upload/images/20220829/201515650LDGem0KBk.png
接下來點擊左邊的『 Open Folder 』,選擇你剛剛在桌面建立的資料夾你就會成功進入你的專案當中,這時你左上角就不在是『 NO FOLDER OPENED 』,而是你剛剛資料夾的取名,像我這邊是『 API 』。
https://ithelp.ithome.com.tw/upload/images/20220830/201515653m1i7urCv0.png

3.環境設定:
這邊我介紹幾個簡單的環境設定。你進入 VSCode 後,最上面會有一條橫線,而裡面會有很多英文字,每個英文字裡面都會有不同的功能,而我們現在要進入的是『設定』中,所以我們點選『 Code 』後,移動到『 Perference 』中,裡面會有『 Settings 』,點選後即可進入。以下為示意圖:
https://ithelp.ithome.com.tw/upload/images/20220829/20151565aNVbfMiO6z.png
『 Settings 』裡面中有各種的設定可以調整,以下舉例兩種:

  • 字體大小(User -> Text Editor -> Font -> Font Size)
  • VSCode整體畫面顏色(User -> Workbench -> Appearance)

4.擴充套件推薦:
擴充套件和你設計的程式毫無關聯,他最重要的功能是可以讓你在開發的過程中更舒服、更便利。只要點擊最左邊最下面的圖示即可進入其頁面。以下為示意圖:
https://ithelp.ithome.com.tw/upload/images/20220830/20151565Q5RuirYap3.png
以下推薦兩個我有用到的擴充套件:

  • Better Comments:
    一般的註解顏色是灰色的,如果你今天選擇的背景也是暗暗的話,註解會變得很不明顯,而這個套件就可以很好的解決這個問題,你可以自定義你註解的顏色,讓你的註解顏色變得清楚又漂亮,至於詳細設定的問題如果有需要我再細講。他的效果如下:
    https://ithelp.ithome.com.tw/upload/images/20220829/20151565cX4m78iH0R.png
  • Material Icon Theme:
    如果你今天看膩了你各種程式的小圖示,那不妨使用這個擴充套件來變換一下口味 XD。

以上圖皆取自於 VSCode 網頁:https://code.visualstudio.com/


上一篇
Day2 - 一般API和RESTful API 的差別
下一篇
Day4 - Node.js下載和 NPM 介紹
系列文
用Node.js建立專屬於你的API吧30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言