VSCode 前端常用插件集合


Visual Studio Code 是由微軟開發的一款免費、跨平台的文本編輯器。由於其卓越的性能和豐富的功能,它很快就受到了大家的喜愛。

但工欲善其事必先利其器,以下是本人為前端開發收集的常用的vscode插件,有需要的話趕緊mark起來吧~

一、下載

vscode官網:https://code.visualstudio.com/

解決vscode下載很慢的問題

  1. 在官網根據自己電腦 點擊下載
    在這里插入圖片描述

2.下載時可以去瀏覽器的下載內容里面,看到正在下載的vscode,然后點擊上面的鏈接,會發生跳轉
在這里插入圖片描述
2. 然后在瀏覽器上的地址上會發現這個鏈接,這個時候直接復制 vscode.cdn.azure.cn 替換地址上面的

在這里插入圖片描述
會發現速度起飛,這里用vscode.cdn.azure.cn 是采用的國內鏡像,直接起飛

二、安裝插件的方法

  1. 使用 ctrl + shift + x
  2. 使用 Ctrl+P , 輸入 ext install xxxx ,搜索要安裝的插件,點擊安裝按鈕即可
  3. 點擊擴展圖標,如下圖

在這里插入圖片描述

三、常用插件

(1)Chinese (Simplified) Language Pack for Visual Studio Code

軟件漢化

在這里插入圖片描述

(2)Auto Close Tag

自動閉合HTML/XML標簽

在這里插入圖片描述
效果:

在這里插入圖片描述

(3)Auto Rename Tag

自動完成另一側標簽的同步修改

在這里插入圖片描述
效果:

在這里插入圖片描述

(4)Bracket Pair Colorizer

給嵌套的各種括號加上不同的顏色

在這里插入圖片描述
效果:

在這里插入圖片描述

(5)Path Intellisense

智能路徑提示,可以在你輸入文件路徑時智能提示

在這里插入圖片描述
效果:

在這里插入圖片描述

(6)HTML Snippets

HTML代碼片段,該插件可為你提供html標簽的代碼提示,不用鍵入尖括號了

在這里插入圖片描述
效果:
在這里插入圖片描述

(7)filesize

在這里插入圖片描述
效果:

在這里插入圖片描述

(8)Prettier - Code formatter

保存的時候自動格式化代碼
在這里插入圖片描述

(9)JavaScript(ES6) code snippets

ES6語法智能提示以及快速輸入,除js外還支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各種包含js代碼文件的時間

在這里插入圖片描述

四、VUE插件

(1)Vetur

Vue多功能集成插件,包括:語法高亮,智能提示,emmet,錯誤提示,格式化,自動補全,debugger。vscode官方欽定Vue插件,Vue開發者必備

在這里插入圖片描述
效果:

在這里插入圖片描述

(2)EsLint

語法糾錯

在這里插入圖片描述

效果:

在這里插入圖片描述

五、微信小程序插件

(1)wechat-snippet

微信小程序代碼輔助,代碼片段自動完成

(2)minapp

  • 微信小程序標簽、屬性的智能補全(同時支持原生小程序、mpvue 和 wepy 框架,並提供 snippets)
  • 需要輸入<才會觸發標簽補全
  • 輸入空格會觸發對應標簽的屬性補全

(3) wxapp-helper

選擇創建wx組件,自動生成配套的文件,簡直不要太爽


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM