簡介

首先第一邊當然是介紹我們的生財工具 VS Code 啦~相信大家都有自己習慣的環境和模式，今天來分享我的 VS Code 相關的開發設定。

VS Code 概述

VS Code 是一個功能豐富的程式碼編輯器，支援多種程式語言，例如 JavaScript、HTML/CSS 等等。對於軟體開發者來說，它是一個非常靈活且易於使用的工具。

除了強大的基本功能外，VS Code 還可以透過安裝套件來擴展其功能。這些套件提供了各種方便的功能，幫助我們更有效率地開發。

背景知識

• VS Code

內容

(一) VS Code 常用基本設置

1. 自動換行

   • 設置方法:
     • 點擊左下角小齒輪進入設定選單
       
     • 搜尋欄搜尋 “Wrap”
     • 在 “Word Wrap” 設置中設定成 “On”
       
   • 效果:
     Before
     
     After
     

2. 括弧顏色:可以協助整理巢狀結構

   • 設置方法:
     • 在設定中找到 “Colorized Bracket Pairs”，進入 setting.json，貼上下列程式碼
       

       "editor.bracketPairColorization.enabled": true, //Bracket Pair Colorizer 協助大中小括號（{}、[]、()）一的獨立補上不同色彩(不用可以刪掉)
       "editor.guides.bracketPairs": "active", //Bracket Pair Colorizer 協助大中小括號（{}、[]、()）一一(不用可以刪掉)
       

   • 效果:
     

3. 自動儲存格式化(自動排版):可以幫忙整理排的散亂的程式碼

   • 設置方法:
     • 找到下列選項設置 “Format On Save” 打勾，就完成了。
       
   • 效果:
     Before
     
     After
     

(二) 常用套件

• Auto Close Tag
  HTML 自動封閉的套件

• Auto Rename Tag
  HTML 可以一起更改頭尾標籤的套件

• Chinese (Traditional) Language
  中文化套件

• Code Spell Checker
  檢查拼字錯誤的套件，debug 的好幫手，效果有點像 Word 拼字檢查那樣
  

• Git Graph
  對於 Git 有漂亮的 GUI 可以看，方便查閱分支以及版本紀錄
  

• Indent-rainbow
  縮排好幫手，下圖彩虹就是它的效果
  

• Live Server
  好用的網頁預覽套件，不過有時候要注意一下路徑位置，有時候會預覽不出來，這時候就要檢查一下路徑位置了

結論

總結而言，VS Code 擁有強大的功能和豐富的套件生態系統，適合各種程式開發需求。透過介紹常用的基本設置，如自動換行、括弧顏色設置以及自動儲存格式化，我們可以提高程式碼的可讀性和整潔性。此外，常用的套件如 Auto Close Tag、Auto Rename Tag、Chinese (Traditional) Language、Code Spell Checker、Git Graph、Indent-rainbow 以及 Live Server 更進一步提升了開發效率，讓我們能更專注於寫程式，而不用花費太多時間處理繁瑣的細節。

參賽動機

一開始想對於學習前端時間有一些得自己留下些什麼，所以題目本來是要分享一些些網頁鐵三角的一些心得，但後來發現我要在一邊學框架的時間一邊寫鐵人賽，可能會有超出我的一些負荷，所以與其蠟燭兩頭燒，那不如就合在一起寫吧!

為什麼選擇 React 作為主題

最近開始學習框架，想以初學者的心態，分享自己由新手的觀點來理解 React 的想法，一方面記錄學習的過程，另一方面變成是自己學習框架的推力，至於這個題目”那些年我轉生成前端貓咪踏入 React 地獄的那些事”，是剛好我在看 React 的時候一隻貓咪跳上來壓到我的鍵盤，不知道按到什麼畫面跳轉到某部轉生動畫，所以這個題目就出來了。

文章內容定位

其實版上有關 React 的教學文蠻多了，而且 React 官方文件其實寫的蠻清楚的，但其實我覺得最難的是從 js 到 React 這段過程中，我以為的 js 跟實際上的 js 差距其實蠻大的，所以這段的系列文章會著墨在踏入 React 之前的這段過程，或許也許能在學 React 的時候少了一點痛苦。

大綱

大致上會分為兩部分介紹，第一部分會介紹 React 會用到的 JavaScript 的語法或觀念，第二部分，才會是 React

第一部分 JS

Day 1. 參賽動機以及題目選擇和預計大綱
Day 2. My VS Code Tour
Day 3. 查詢陣列的方法-forEach & map
Day 4. 操作陣列的方法 Part.1-push & pop
Day 5. 操作陣列的方法 Part.2-shift & unshift
Day 6. 其他的陣列方法 slice & splice
Day 7. 搜尋陣列的方法-find,findIndex & filter
Day 8. 字串陣列互相變化的方法 split & join
Day 9. 函式與箭頭函式
Day 10.物件(Object)
Day 11.解構賦值(Destructuring assignment)
Day 12.其餘運算子 & 展開運算子(Spread Operator & Rest Operator)
Day 13.JavaScript 模組(Modules)
Day 14.處理同步非同步的方法(Asynchronous & Synchronous)

第二部分 Rreact

這部分不會帶到太多太難的 hook，最多可能就寫到 useEffect，至於詳細的大綱，等 JS 結束之後會再公布。

最後熱血開賽~~希望一切順利

預計參考資料

1. React 官網
2. Odin Project
3. freeCodeCamp
4. MDN