前端VSCode常用插件與快捷鍵
- 一、常用插件
- Chinese(Simplified)
- Auto Rename Tag
- One Dark Pro(顏色主題)
- 格式化代碼
- open in browser(瀏覽器預覽)
- Live Server(實時預覽★）
- VSCode-icons(設定檔案圖示主題)
- Easy LESS(生成新的css檔案)
- 會了吧(翻譯英文)
- 二、快捷鍵
- 快速復制一行
- 同時選定多個相同單詞
- 添加多個游標
- 全部替換某些單詞
- 快速跳到某一行
- 選擇某個區塊進行操作
- 單行注釋與多行注釋
- 自定義快捷鍵
- 三、前端輔助工具
- 像素大廚
- 前端代碼編輯器 VSCode
- 截圖軟體Snipaste
- Typora 撰寫MarkDown筆記
- git 版本控制工具
- node★
- MySQL資料庫
- Postman
一、常用插件
關于VSCode的常用插件，
Chinese(Simplified)
安裝Chinese插件，將英文版改為中文版：
- 單擊左側Extensions;
- 將Search Extensions in Marketplace中輸入 Chinese ；
- 單擊右側 install 進行安裝；
Auto Rename Tag
修改開始標簽，結束標簽跟著自動變化，
One Dark Pro(顏色主題)
顏色主題，
格式化代碼
使用VSCode系統自帶，自動保存格式化代碼
- 單擊左下角 管理 按鈕；
- 選擇 設定 命令；
- 右側單擊 用戶 ；
- 選擇 文本編輯器 中的 正在格式化 ；
- 最右側勾選：Format On Paste 與 Format On Save
open in browser(瀏覽器預覽)
瀏覽器預覽頁面，代碼頁面中，右擊選擇瀏覽器打開Open In Default Browser，
注意：打開的檔案要在VSCode的目錄中
Live Server(實時預覽★）
瀏覽器實時預覽頁面推薦
VSCode-icons(設定檔案圖示主題)
左側目錄中的檔案圖示，
Easy LESS(生成新的css檔案)
less檔案不能直接引入到html中，此插件可將less檔案生成一個新的css檔案，
會了吧(翻譯英文)
安裝此插件之后，左側會出現 會 圖示，單機圖示，左側會出現此頁面中的單詞中文意思，
二、快捷鍵
關于VSCode的常用快捷鍵，
快速復制一行
Shift+Alt+下箭頭(上箭頭)/Ctrl+C和Ctrl+V
同時選定多個相同單詞
Ctrl+D
雙擊選定一個單詞，然后按下Ctrl+D往下依次選擇相同的單詞，
添加多個游標
Ctrl+Alt+下箭頭(上箭頭)
全部替換某些單詞
Ctrl+H
右側選擇全部替換即可，
快速跳到某一行
Ctrl+G
輸入想要跳轉到的行數，例如“：40”，跳轉到第40行，
選擇某個區塊進行操作
按住Shift+Alt，然后拖動滑鼠，
單行注釋與多行注釋
Ctrl+/
Shift+Alt+A
自定義快捷鍵
- 單擊左下角，選擇鍵盤快捷方式；
- 輸入快捷鍵；
- 單擊左側小鉛筆，輸入快捷鍵，按下Enter鍵；
三、前端輔助工具
輔助工具可以讓大家更好地學習前端，
像素大廚
測量設計圖中的寬高、邊距、字體大小以及css代碼等，非常方便!!!
官網：像素大廚下載地址
前端代碼編輯器 VSCode
官網：VSCode下載地址
截圖軟體Snipaste
官網：Snipaste下載地址
Typora 撰寫MarkDown筆記
官網：Typora下載地址
git 版本控制工具
提交、合并、分支、回滾等功能，
官網： git官網
node★
JS的運行環境，
各個版本下載官網地址：node
MySQL資料庫
node + mysql 資料庫搭建服務器，
Postman
測驗介面，POST，
官網：Postman下載地址
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/292326.html
標籤：其他