跳至主要内容

常見軟體工程師/網頁開發工具和學習資源整理

· 閱讀時間約 3 分鐘
kdchang

以下彙整常見 Web 網頁開發工具和資源整理：

VS Code 套件​

  1. emmet
  2. Live Server
  3. Material Icon Theme
  4. Babel JavaScript
  5. Prettier
  6. CodeSnap
  7. JavaScript code snippets
  8. Peacock
  9. TODO Highlight
  10. Code Runner
  11. Live Share
  12. Color Highlight

Chrome 瀏覽器擴充套件​

  1. Responsive Viewer
  2. HTML5 Outliner
  3. ColorZilla
  4. Fonts Ninja
  5. Check My Links

終端機工具​

  1. ohmyzsh Themes
  2. ohmyzsh

Terminal App：iTerm2​

網站：https://iterm2.com

Shell：zsh（macOS 預設就是 zsh）​

macOS Catalina 之後預設就是 zsh，不用特別安裝 比 bash 現代，有 plugin & theme 支援

Framework：Oh My Zsh​

網站：https://ohmyz.sh

優點：

  • 超多好用 plugin（git、docker、npm、自動補齊等）
  • 主題選擇豐富（powerlevel10k、agnoster...）
  • 安裝簡單，社群活躍

安裝指令：

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
brew install romkatv/powerlevel10k/powerlevel10k
# vim ~/.zshrc 修改主題樣式
ZSH_THEME="powerlevel10k/powerlevel10k"
source ~/.zshrc

流行技術文件​

  1. Up-to-date documentation for LLMs and AI code editors

假文字​

  1. 中文亂數假文產生器 Chinese Lorem Ipsum
  2. 英文 Lorem Ipsum

假圖​

  1. Fake images please?
  2. Picsum photos
  3. placehold

Icon​

  1. lucide

投影片​

  1. Slidev - Presentation Slides for Developers

文件​

  1. Docusaurus

影片​

  1. Free Creative Commons Zero Videos

前端學習資源​

  1. 前端開發大全手冊：The Front End Developer/Engineer Handbook 2024
  2. 100 天 CSS 練習挑戰
  3. javascript30
  4. greatfrontend
  5. 零基礎一年轉職前端工程師：完整路徑、心得、資源全公開

CSS​

  1. daisyui
  2. TailwindCSS
  3. 新手入門：TailwindCSS 與 DaisyUI 的整合指南
  4. 重新認識 Flex 和 Grid 系列

CSS 文件​

  1. css-tricks

CSS Reset​

  1. A Modern CSS Reset
  2. CSS Tools: Reset CSS

Git​

  1. Learn Git Branching

CSS 選擇器練習​

  1. CSS Dinner

CSS 排版練習​

  1. Flexbox Froggy
  2. CSS Grid Garden

API​

  1. JSON Placeholder Free fake and reliable API for testing and prototyping

設計​

  1. s5-style
  2. cssdesignawards

CSS 動畫​

  1. CSS 貝茲曲線

文件工具​

  1. docusaurus

線上編輯器​

  1. codesandbox
  2. codepen
  3. jsbin

VS Code 排版工具​

安裝 Prettier 外掛

  1. 打開 VS Code → Extensions → 搜尋 Prettier - Code formatter → 安裝

  2. 在你的 VS Code 設定檔 .vscode/settings.json（或直接設定 → 搜尋「prettier」）加入：

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "prettier.semi": true
}

prettier.semi: true 就是每行最後自動加分號 以後每次存檔（Ctrl+S）會自動補分號、排版！

ESLint​

eslint.config.js

import js from '@eslint/js';
import globals from 'globals';
import pluginVue from 'eslint-plugin-vue';
import { defineConfig } from 'eslint/config';

export default defineConfig([
  {
    files: ['**/*.{js,mjs,cjs,vue}'],
    ignores: ['dist/**', 'node_modules/**'],
    plugins: { js },
    extends: ['js/recommended'],
    rules: {},
  },
  {
    files: ['**/*.{js,mjs,cjs,vue}'],
    languageOptions: { globals: globals.browser },
  },
  pluginVue.configs['flat/essential'],
]);