以下彙整常見 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

(1). Terminal App：iTerm2
網站：https://iterm2.com

(2). Shell：zsh（macOS 預設就是 zsh）
macOS Catalina 之後預設就是 zsh，不用特別安裝
比 bash 現代，有 plugin & theme 支援

(3). 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. 中文亂數假文產生器 Chinese Lorem Ipsum
2. 英文 Lorem Ipsum

假圖

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

icon

1. lucide

影片

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'],
]);

Related Posts