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

2022 iThome 鐵人賽

DAY 2

Modern Web

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

14th鐵人賽 vscode

Aliang

團隊來啊!打摳啊!

2022-09-06 21:29:38

983 瀏覽

分享至

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 ，會變成 ↓