iT邦幫忙

2022 iThome 鐵人賽

DAY 2
1
Modern Web

從零轉生第一天先學前端系列 第 2

Day2|前端開發環境の前置作業

  • 分享至 

  • xImage
  •  

VS Code

官網github擴充元件

Visual Studio Code(簡稱 VS Code)是一個使用 Monaco Editor 作為其底層的免費原始碼程式碼編輯器,會選擇作為開發用軟體,有以下幾個優點

  • 程式碼重構
  • 內建命令列工具
  • 內建Git版本控制系統
  • 支援Emmt
  • 豐富的擴充元件等...

安裝流程可以依照官方文件


快捷鍵

列幾個特別、好用的快捷鍵 詳細請見官方文件
Ctrl + D 快速選取下一個同名變數
Ctrl + H 取代
Ctrl + P 選取檔案
Ctrl+ Shift+ L 一次選取檔案內所有相同文字
Ctrl + Shift + K 整行刪除
Ctrl + Alt + ↑/↓ 垂直選取
Alt + 左鍵 多重選取
Alt + ↑/↓ 程式碼整行搬動
F2 重新命名變數名稱


擴充元件 Extensions

  • Chinese (Traditional) 中文化
  • Live Server 啟動本機端伺服器,每次存檔後,會自動更新瀏覽器畫面
  • Code Spell Checker 幫你抓錯字呀
  • GitLins Git版本控制系統工具 官方影片
  • Material Icon Theme 美美的icon
  • indent-rainbow 縮排給你一道彩虹
  • prettier 幫你整理程式碼 還能客製化
  • ESLint 幫你整理JaveScript程式碼 還能客製化

    但prettier、ESLint不相容,同時啟用會有問題,解決問題請看卡斯伯老師這樣做

Emmt

學習可以增加開發速度,以下列一些基本的應用官方文件

子元素 Child : >舉例 div>ul>li+tab ,會變成 ↓

<div>
    <ul>
        <li></li>
    </ul>
</div>

同一層 Sibling : +舉例 div+p+bq+tab ,會變成 ↓

<div></div>
<p></p>
<blockquote></blockquote>

重複 Multiplication : *舉例 ul>li*5+tab ,會變成 ↓

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

群組 Grouping : ()舉例 (div>dl>(dt+dd)*3)+footer>p+tab ,會變成 ↓

<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

Class : .ID : #舉例 div#header+div.page+div#footer.class1.class2.class3+tab ,會變成 ↓

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

Class加變數 Item numbering : $舉例 ul>li.item$*5+tab ,會變成 ↓

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

標籤內文字 Text : {}舉例 a{Click me}+tab ,會變成 ↓

<a href="">Click me</a>

推薦Google Chrome插件

  • Dark Reader 網頁啟用黑夜模式 愛護你的眼睛

  • JSON Formatter 看API不再眼花

  • Wappalyzer - Technology profiler可以看網頁使用什麼樣的語言、技術

    使用情況 ↓

  • Wappalyzer - Technology profiler 漂亮的截圖整個頁面


疑難雜症


上一篇
Day1|網頁基礎の讀書筆記
下一篇
Day3|HTML介紹、布局元素の筆記
系列文
從零轉生第一天先學前端16
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
ddyme
iT邦新手 4 級 ‧ 2022-09-06 22:29:59

非常期待,請持續更新

我要留言

立即登入留言