VSCode自選插件

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

VSCode漢化後的菜單
此中文(簡體)語言包爲 VS Code 提供本地化界面。

插件地址
https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hans

2. ESLint

ESLint
將ESLint集成到VS代碼中,JS代碼語法校驗

插件地址
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

3. Babel ES6/ES7

Babel ES6/ES7
ES6/ES7語法檢查

插件地址
https://marketplace.visualstudio.com/items?itemName=dzannotti.vscode-babel-coloring

4. JavaScript (ES6) code snippets

ES6語法中的JavaScript代碼片段(支持JavaScript和TypeScript)。
支持的文件類型:

  • JavaScript (.js)
  • TypeScript (.ts)
  • JavaScript React (.jsx)
  • TypeScript React (.tsx)
  • Html (.html)
  • Vue (.vue)

插件地址
https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

5. Beautify

美化javascript, JSON, CSS, Sass,和HTML在Visual Studio代碼。

插件地址
https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify

6. Auto Close Tag

自動添加HTML/XML關閉標籤

插件地址
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

7. Auto Rename Tag

Auto Rename Tag
自動重命名成對的HTML/XML標記

插件地址
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

8. Debugger for Chrome

Debugger for Chrome這個插件是直接在vscode裏面進行調試js文件,跟谷歌的控制檯是一樣的功能,下載了它就不用打開瀏覽器的控制檯就能進行打斷點。

首先在左側擴展欄找到這個插件下載好了後重啓編輯器之後配置
配置Debugger for Chrome
當你配置完成後直接打開你要調試的js,進入調試界面選好調試的工具(就是剛纔配置的名字)
Debugger for Chrome調試腳本

插件地址
https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

9. Open-In-Browser

open-In-Browser
方便在編輯器中直接點擊去瀏覽器預覽html
MAC快捷鍵Cmd+Alt+O

插件地址
https://marketplace.visualstudio.com/items?itemName=coderfee.open-html-in-browser

10. Faker

Faker
在代碼中插入虛擬假數據

數據種類

  • address
  • commerce
  • company
  • database
  • date
  • finance
  • hacker
  • image
  • internet
  • lorem
  • name
  • phone
  • random
  • system

使用步驟

  1. Type cmd+shift+p
  2. Choose fake data category
  3. Choose sub category

插件地址
https://marketplace.visualstudio.com/items?itemName=deerawan.vscode-faker

11. Color Highlight

這個擴展樣式可以在你的文檔中找到css/web顏色。

插件地址
https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight

12. SVG Viewer

SVG Viewer
方便預覽svg圖

  1. Press Ctrl+P and type ext install SVG Viewer with a trailing space.
  2. Press Enter and restart VSCode.
  3. Open a SVG File.
  4. Choose process from Command Palette or Shortcut.

13. Todo Tree

Todo Tree
這個擴展可以(使用ripgrep)快速搜索您的工作區,查找TODO和FIXME之類的註釋標記,並將它們顯示在explorer窗格中的樹視圖中。單擊樹中的TODO將打開文件並將光標放在包含TODO的行上。

已找到的待辦事項也可以在打開的文件中高亮顯示。

插件地址
https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree

14. Regex Previewer

Regex Previewer
這是一個用於實時測試正則表達式的實用工具。它可以將正則表達式模式應用在任何打開的文件上,並高亮所有的匹配項。

插件地址
https://marketplace.visualstudio.com/items?itemName=chrmarti.regex

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章