VSCode前端开发自用插件推荐 #150

Anuluca     Date : 2024-08-22   Tags : 1

*排序不分先后

1. 翻译(英汉词典)

ID: CodeInChinese.EnglishChineseDictionary
说明: 本地 77 万词条英汉词典，不依赖任何在线翻译 API，无查询次数限制。可翻译驼峰和下划线命名，及对整个文件中的标识符批量翻译。Translate a selected identifier, or all the recognized identifiers in one source file.
版本: 1.1.1
发布者: 中文编程
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=CodeInChinese.EnglishChineseDictionary

2. 名称: Auto Close Tag

ID: formulahendry.auto-close-tag
说明: 自动添加 HTML/XML 关闭标签，与 Sublime Text 相同
版本: 0.5.15
发布者: Jun Han
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

3. 名称: Auto Rename Tag

ID: formulahendry.auto-rename-tag
说明: 自动重命名配对的 HTML/XML 标签
版本: 0.1.10
发布者: Jun Han
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

4. 名称: Auto Complete Tag

ID: formulahendry.auto-complete-tag
说明: 自动为 HTML/XML 添加关闭标签并重命名配对标签
版本: 0.1.0
发布者: Jun Han
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-complete-tag

5. 名称: Auto Import

ID: steoates.autoimport
说明: 自动查找、解析并提供所有可用导入的代码操作和代码完成。适用于 Typescript 和 TSX
版本: 1.5.4
发布者: steoates
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=steoates.autoimport

6. 名称: Class autocomplete for HTML

ID: AESSoft.aessoft-class-autocomplete
说明: HTML 的 class 自动完成功能
版本: 0.1.0
发布者: AES Soft
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=AESSoft.aessoft-class-autocomplete

7. 名称: CodeSnap

ID: adpyke.codesnap
说明: 📷 给你的代码拍张好的照片吧
版本: 1.3.4
发布者: adpyke
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap

8. 名称: 名称: Highlight Matching Tag

ID: vincaslt.highlight-matching-tag
说明: 高亮显示匹配的结束和开始标签
版本: 0.11.0
发布者: vincaslt
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag

9. 名称: CSS Peek

ID: pranaygp.vscode-css-peek
说明: 允许从 html 文件查看 css ID 和类字符串作为相应 CSS 的定义。允许查看和转到定义。
版本: 4.4.1
发布者: Pranay Prakash
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

10. 名称: Git History

ID: donjayamanne.githistory
说明: 查看 git 日志、文件历史记录、比较分支或提交
版本: 0.6.20
发布者: Don Jayamanne
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

11. 名称: GitLens — Git supercharged

ID: eamodio.gitlens
说明: 一目了然地可视化代码作者身份，无缝导航和探索 Git 存储库
版本: 13.5.0
发布者: GitKraken
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

12. 名称: HTML/CSS/JavaScript Snippets

ID: Wscats.html-snippets
说明: HTML/CSS/JavaScript/Jade/Pug/Less/Sass/Stylus/ES6 片段支持
版本: 1.0.6
发布者: Eno Yao
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=Wscats.html-snippets

13. 名称: Image Hover Preview

ID: ltaoo.vscode-plugin-image-hover-preview
说明: 图片预览插件
版本: 0.5.0
发布者: ltaoo
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=ltaoo.vscode-plugin-image-hover-preview

14. 名称: IntelliSense for CSS class names in HTML

ID: Zignd.html-css-class-completion
说明: 根据工作区中的定义完成 HTML 类属性的 CSS 类名。
版本: 1.20.0
发布者: Zignd
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

15. 名称: Tailwind CSS IntelliSense

ID: bradlc.vscode-tailwindcss
说明: 智能 Tailwind CSS 工具
版本: 0.12.6
发布者: Tailwind Labs
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

16. 名称: JavaScript (ES6) code snippets

ID: xabikos.JavaScriptSnippets
说明: ES6 语法的 JavaScript 代码片段
版本: 1.8.0
发布者: charalampos karypidis
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

17. 名称: JavaScript and TypeScript Nightly

ID: ms-vscode.vscode-typescript-next
说明: 启用 typescript@next 来增强 VS Code 的内置 JavaScript 和 TypeScript 支持
版本: 5.7.20240821
发布者: Microsoft
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-next

18. 名称: jQuery Code Snippets

ID: donjayamanne.jquerysnippets
说明: 超过 130 个 jQuery 代码片段
版本: 0.0.1
发布者: Don Jayamanne
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=donjayamanne.jquerysnippets

19. 名称: JS JSX Snippets

ID: skyran.js-jsx-snippets
说明: 使用 Babel 和 ES7 语法在 JS 中扩展 React、Redux
版本: 11.1.3
发布者: Nai You Ran
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=skyran.js-jsx-snippets

20. 名称: JSON to TS

ID: MariusAlchimavicius.json-to-ts
说明: 将 JSON 对象转换为 TypeScript 接口
版本: 1.8.0
发布者: MariusAlchimavicius
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=MariusAlchimavicius.json-to-ts

21. 名称: Live Server

ID: ritwickdey.LiveServer
说明: 启动具有静态和动态页面实时重新加载功能的开发本地服务器
版本: 5.7.9
发布者: Ritwick Dey
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

22. 名称: Markdown All in One

ID: yzhang.markdown-all-in-one
说明: 编写 Markdown 所需的一切（键盘快捷键、目录、自动预览等）
版本: 3.5.1
发布者: Yu Zhang
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one

23. 名称: Material Icon Theme

ID: PKief.material-icon-theme
说明: Visual Studio Code 的 Material Design 图标
版本: 5.9.0
发布者: Philipp Kief
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

24. 名称: Material Theme Icons — Free

ID: equinusocio.vsc-material-theme-icons
说明: Visual Studio Code 和 Material Theme 最精彩的图标主题。
版本: 3.8.7
发布者: Equinusocio
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme-icons

25. 名称: open in browser

ID: techer.open-in-browser
说明: 在默认浏览器或应用程序中打开当前文件。
版本: 2.0.0
发布者: TechER
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser

26. 名称: Output Colorizer

ID: IBM.output-colorizer
说明: 日志文件的语法突出显示
版本: 0.1.2
发布者: IBM
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=IBM.output-colorizer

27. 名称: Parameter Hints

ID: DominicVonk.parameter-hints
说明: 自动参数提示
版本: 0.2.7
发布者: Dominic Vonk
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=DominicVonk.parameter-hints

28. 名称: Partial Diff

ID: ryu1kn.partial-diff
说明: 比较文件内、文件间或剪贴板中的（差异）文本选择
版本: 1.4.3
发布者: Ryuichi Inagaki
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=ryu1kn.partial-diff

29. 名称: Path Intellisense

ID: christian-kohler.path-intellisense
说明: 自动完成文件名的 Visual Studio Code 插件
版本: 2.9.0
发布者: Christian Kohler
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

30. 名称: path-alias

ID: IWANABETHATGUY.path-alias
说明: 一个可以解决路径别名提示，跳转的 vscode 插件
版本: 0.12.3
发布者: victor
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=IWANABETHATGUY.path-alias

31. 名称: Peacock

ID: johnpapa.vscode-peacock
说明: 巧妙地改变工作区的颜色。当您有多个 VS Code 实例并且想要快速识别哪个是哪个时，这是理想的选择。
版本: 4.2.2
发布者: John Papa
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock

32. 名称: Prettier - Code formatter

ID: esbenp.prettier-vscode
说明: 无须多言
版本: 10.4.0
发布者: Prettier
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

33. 名称: Project Manager

ID: alefragnani.project-manager
说明: 轻松在项目之间切换
版本: 12.8.0
发布者: Alessandro Fragnani
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager

34. 名称: React Native Snippet

ID: jundat95.react-native-snippet
说明: React Native、Typescript React Native、StyleSheet、Redux 代码片段
版本: 0.5.6
发布者: jundat95
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=jundat95.react-native-snippet

35. 名称: React Redux ES6 Snippets

ID: timothymclane.react-redux-es6-snippets
说明: 带有 React-Redux 箭头函数的 ES6 代码片段
版本: 2.1.0
发布者: Timothy McLane
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=timothymclane.react-redux-es6-snippets

36. 名称: sneak mark

ID: wangzy.sneak-mark
说明: 检测英文语句中的中文符号
版本: 0.0.6
发布者: wangzy
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=wangzy.sneak-mark

37. 名称: Stylelint

ID: stylelint.vscode-stylelint
说明: Stylelint
版本: 1.3.0
发布者: Stylelint
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint

38. 名称: vscode-pets

ID: tonybaloney.vscode-pets
说明: 养宠物
版本: 1.27.0
发布者: Anthony Shaw
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=tonybaloney.vscode-pets

39. 名称: background

ID: shalldie.background
说明: 增加自定义背景图片
版本: 1.2.13
发布者: shalldie

40. 名称: Color Manager

ID: royaction.color-manager
说明: 侧边栏快捷颜色选择器和调色板
版本: 0.7.5
发布者: Roy Action

41. 名称: colorize

ID: kamikillerto.vscode-colorize
说明: vscode 扩展有助于可视化文件中的 css 颜色。
版本: 0.11.1
发布者: kamikillerto

42. 名称: Error Lens

ID: usernamehw.errorlens
说明: 改进错误、警告和其他语言诊断的突出显示。
版本: 3.8.0
发布者: Alexander