visual studio code前端插件及常用快捷鍵

轉載，原文位址：                       https://blog.csdn.net/q1056843325/article/details/52928390                    </div>
                                                <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-3019150162.css" target="_blank" rel="external nofollow" >
                                    <div id="content_views" class="markdown_views">
                <!-- flowchart 箭頭圖示 勿删 -->
                <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
                    <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
                </svg>
                                        <p>給大家推薦編寫前端代碼非常舒服的編輯器</p>
           

visual stdio code

這是15年微軟随Edge一并釋出的輕量級編輯器，用起來感覺比sublime舒服

它還是開源的，簡直是微軟的良心之作

傳送門–>vs code 下載下傳位址拿走不謝(＾－＾)V

改用它的原因是非常喜歡它的UI (其實是懷念以前用vs編C++的時光)

功能非常強大，誰用誰知道

vs code 插件

點選vscode左側擴充就可以搜尋插件了

首先給大家推薦幾個我常用的插件

• HTML Snippets 包含html标簽,很全
• HTML CSS Support 縮短樣式表編寫時間
• Path Intellisense 可以查找檔案路徑
• Auto Rename Tag 改變開始标簽自動修改結尾标簽
• Emoji 可以添加特殊字元等 娛樂插件
• View In Browser 可以使用快捷鍵ctrl+F1用浏覽器打開檔案
• vscode-icons 資料總管中改變檔案圖示(其實新版本也增加圖示了,但是感覺好low)
• background 改變背景圖檔,也是娛樂插件
• debugger for chrome 其實不用也行, 這個插件配置還挺複雜的

vs code 常用快捷鍵

• 列選擇：ALT＋左鍵
• 指令面闆：F1
• 切出新編輯器：Ctrl + 左鍵檔案
• 代碼行縮進：Ctrl + [ 、Ctrl + ]
• 檔案切換：Ctrl + Tab
• 轉到行首/行尾：Home / End
• 轉到檔案頭/檔案尾：Ctrl + Home / Ctrl + End
• 重命名：F2
• 轉定義：F12 or Ctrl + click
• 轉定義（切出新編輯器）： Ctrl + Alt + click
• 檢視定義：Alt + F12
• 檢視引用：Shift + F12
• 上下移動一行：Alt + Up / Alt + Down
• 代碼格式化：Shift＋Alt + F

Emmet

vscode内置的Emmet插件确實是web前端開發利器

簡單地說, 就是用縮寫文法生成HTML标簽

比方我在空白html文檔中輸入一個 “!”或者”html:5”

再按下tab

它會自動把整個html的基本結構标簽給你寫好

emmet縮寫文法比較多

這裡簡單說幾個常用的吧

<!-- div -->
<div></div>
<!-- div.className -->
<div class="className"></div>
<!-- div#IDname -->
<div id="IDname"></div>
<!--ul>li*2 -->
<ul>
    <li></li>
    <li></li>
</ul>           

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

了解更多

可以看看Emmet文法

==首頁傳送門==