1. Chinese (Simplified) Language Pack for Visual Studio Code
此中文(簡體)語言包爲 VS Code 提供本地化界面。
插件地址
https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hans
2. ESLint
將ESLint集成到VS代碼中,JS代碼語法校驗
插件地址
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
3. 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
自動重命名成對的HTML/XML標記
插件地址
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
8. Debugger for Chrome
Debugger for Chrome這個插件是直接在vscode裏面進行調試js文件,跟谷歌的控制檯是一樣的功能,下載了它就不用打開瀏覽器的控制檯就能進行打斷點。
首先在左側擴展欄找到這個插件下載好了後重啓編輯器之後配置
當你配置完成後直接打開你要調試的js,進入調試界面選好調試的工具(就是剛纔配置的名字)
插件地址
https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
9. Open-In-Browser
方便在編輯器中直接點擊去瀏覽器預覽html
MAC快捷鍵Cmd+Alt+O
插件地址
https://marketplace.visualstudio.com/items?itemName=coderfee.open-html-in-browser
10. Faker
在代碼中插入虛擬假數據
數據種類
- address
- commerce
- company
- database
- date
- finance
- hacker
- image
- internet
- lorem
- name
- phone
- random
- system
使用步驟
- Type cmd+shift+p
- Choose fake data category
- 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圖
- Press Ctrl+P and type ext install SVG Viewer with a trailing space.
- Press Enter and restart VSCode.
- Open a SVG File.
- Choose process from Command Palette or Shortcut.
13. Todo Tree
這個擴展可以(使用ripgrep)快速搜索您的工作區,查找TODO和FIXME之類的註釋標記,並將它們顯示在explorer窗格中的樹視圖中。單擊樹中的TODO將打開文件並將光標放在包含TODO的行上。
已找到的待辦事項也可以在打開的文件中高亮顯示。
插件地址
https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree
14. Regex Previewer
這是一個用於實時測試正則表達式的實用工具。它可以將正則表達式模式應用在任何打開的文件上,並高亮所有的匹配項。
插件地址
https://marketplace.visualstudio.com/items?itemName=chrmarti.regex