[指南] 從頭開始 – 前端網頁工程師之開發環境架設

近期因轉換新工作的關係,順道體驗了在新電腦上架起原有的習慣的開發環境所需的軟體和設定。這邊筆記下相關的細節,以及用 Windows 和 Mac 的些許區別。

guide-frontend-development-environment-setup-1


內容

VS Code 延伸套件 Extensions

– AutoFileName
– Babel JavaScript
– Code Runner
– Code Spell Checker
– Color Highlight
– CSS Peek
– ES7+ React/Redux/React-Native snippets
– ESLint
– Git Graph
– Github Copilot
– Github Copilot Chat
– JavaScript (ES6) code snippets
– Live Sass Compiler
– Markdown Preview Enhanced
– Preview on Web Server
– SCSS Formatter
– Stylelint
– SVG
– UnoCSS
– Vetur
– vscode-icons
– Tailwind CSS IntelliSense
– Vue – Official
– Vue VSCode Snippets

VS Code User settings

這點請依照個人的情況作調整

NPM & Git

Windows 用 nvm-windowsGit for Windows

Mac 用 Homebrew 安裝 git 和 nvm 即可


Docker

Windows 用 Docker-Desktop
Mac 用 OrbStack 更為快速


Terminal & SSH Key

Windows

1. 用 oh-my-posh 美化 Git bash
2. Create SSH key in Windows 11

Mac

1. 讓 macOS 的 Terminal 又潮又實用:手把手設定教學 iTerm2 + oh-my-zsh + Powerlevel10k
2. [筆記] 管理 Mac 上的 SSH 設定檔,並用其抓取 Github 專案

按讚加入粉絲團

延伸閱讀