VSCode插件推薦(前端)

1.Mithril Emmet(代碼快速編寫工具)

Emmet前身是zen-coding

A.快速編寫HTML代碼

初始化.gif
內容.gif

分組.gif
id/class.gif
嵌套.gif

B.快速生成CSS樣式

css.gif

2.HTML Snippets

html提示.png

3.Debugger for Chrome

斷點調試工具

4.Path Intellisense

自動路由補全

路由補全.gif

5.beautify

格式化代碼的工具

6.vscode-fileheader

快捷鍵:ctrl+alt+i
頂部注釋,可定義作者、時間等信息,保存文件時自動更新最后修改時間。

7.Vue 2 Snippets

vue2 高亮 補全

8.Atom One Dark Theme

喜歡atom主題的可以下載,安裝過后,設置一下

設置.png

9.vscode-icon

圖標樣式,必備插件
安裝后,ctrl+shift+p調出命令行,輸入theme,選擇vscode-icon

theme.png
icon.png

10.特別好用的 Vue 插件 - vetur

代碼補全功能,綜合比較應該是目前 VSCode 上面最好用的 Vue 插件。

能夠實現在 .vue 文件中:

  • 語法錯誤檢查,包括 CSS/SCSS/LESS/Javascript/TypeScript
  • 語法高亮,包括 html/jade/pug css/sass/scss/less/stylus js/ts
  • emmet 支持
  • 代碼自動補全(目前還是初級階段),包括 HTML/CSS/SCSS/LESS/JavaScript/TypeScript

配合 ESLint(代碼規范和錯誤檢查工具)插件效果更佳。

11.CSS Auto Prefix(css兼容性前綴補全插件)

既可以用于縮進樣式,也可以用于單行CSS樣式。要激活它,只需在工作臺命令窗口中使用Ctrl + Shift + p,鍵入“Auto Prefix”。

demonstration.gif
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Swift版本點擊這里歡迎加入QQ群交流: 594119878最新更新日期:18-09-17 About A cu...
    ylgwhyh閱讀 25,567評論 7 249
  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,251評論 4 61
  • 有時候我會有一種恐懼的想法,那就是我回想起自己曾經被一本書所禁錮,也就是說被那本書所控制,他說什么我都信,那是一種...
    張俊豪閱讀 472評論 0 2
  • 眼看著第二期彩鉛課程開始了,我的作業還沒做完,得抓緊了! 《郁金香》,看著老師的成品圖覺得還是有些難度的,所以遲遲...
    Lyndsey_325閱讀 362評論 2 2
  • 創建時間:20161223 本章小目標 創建django項目 在django中使用react頁面 實現django...
    比特陽閱讀 12,012評論 2 5