visual studio code插件

原创 已于 2022-10-24 14:06:42 修改 · 1.3k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vscode #1024程序员节

于 2021-12-12 14:49:07 首次发布
这篇博客详细介绍了Visual Studio Code的一系列高效插件，包括用于实时预览的Liveserver、代码格式化工具Prettier和Auto Rename Tag等，涵盖了HTML、CSS、JavaScript等多个方面，旨在提升开发者的工作效率和代码质量。此外，还提到了一些实用工具，如CodeRunner用于运行多种代码，MarkdownAllinOne方便Markdown写作，以及Chinese(Simplified)LanguagePack实现汉化，让开发环境更加友好。
部署运行你感兴趣的模型镜像

visual studio code插件

  1. live server
    为静态和动态页面启动具有实时重新加载功能的开发本地服务器
    配置参考

  2. prettier - code formatter
    代码格式化
    配置参考

  3. Auto Rename Tag
    自动重命名配对

  4. Auto Close Tag
    自动添加HTML / XML关闭标记

  5. Bracket Pair Colorizer 2
    给括号加上不同的颜色

  6. Code Runner
    运行各类的代码
    配置参考

  7. Code Spell Checker
    单词拼写提示

  8. beautify
    美化代码

  9. HTML Snippets

  10. IntelliSense for CSS class names in HTML

  11. JavaScript (ES6) code snippets

  12. Live Sass Compiler

  13. JS JSX Snippets

  14. ES7 React/Redux/GraphQL/React-Native snippets

  15. JSX HTML

  16. React Native Tools

  17. Simple React Snippets

  18. HTML CSS Support

  19. npm

  20. npm Intellisense
    import、require npm模块是自动补全

  21. ejs Snippets

  22. node-snippets

  23. Search node_modules

  24. Markdown All in One

  25. Markdown Preview Enhanced

  26. Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
    汉化

  27. material theme

  28. Material Icon Theme

  29. xml

  30. xml tools

  31. Debugger for Chrome

  32. Image preview

  33. open in browser

  34. indent-rainbow

  35. 翻译（英汉词典）

  36. 别名路径跳转

  37. vetur

  38. vue

  39. Vue 3 Snippets

  40. Vue VSCode Snippets

您可能感兴趣的与本文相关的镜像

Seed-Coder-8B-Base

Seed-Coder-8B-Base

文本生成
Seed-Coder

Seed-Coder是一个功能强大、透明、参数高效的 8B 级开源代码模型系列，包括基础变体、指导变体和推理变体，由字节团队开源

记录VS Code插件开发过程——补全颜色代码的插件。
Falwyuki的博客
06-06 3365
记录我学习开发VS Code插件的过程，实现一个能自动补全颜色代码的插件。
Visual Studio Code插件整理大全
qq_42843557的博客
08-24 7679
ESLint(格式化程序和规范代码) 如果你需要格式化程序和规范代码，那么这个插件适合你。 它可以自动格式化你的代码并查找代码中的错误。 此外，它允许你在书签代码之间选择代码区域，这对于日志文件分析等非常有用。 Git History(可视化获取git 日志,方便对比) 与 GitLens 类似，Git History是一个 VSCode 插件，它提供了 git 日志的可视化。你不需要再终端中查看 git log。 插件也非常全面。它允许你跨提交比较分支、提交和文件。也可以查 Gi..
VS Code必备插件神器（2026）
前端必备小窝
07-28 1万+
VSCode能够如此强大还源自于它的插件市场，一款好的插件能够较为明显的提升大家的开发效率，废话不多说，直接上插件！
VS code代码颜色插件
weixin_44766633的博客
05-18 3万+
VS code代码颜色插件 插件名称 使用这个插件可以让代码函数的每个括号的颜色都对应起来，方便寻找函数体
VS code代码中RGB颜色的自动显示插件
robert_cjy的博客
03-22 1万+
VS code代码中RGB颜色的自动显示插件
23款常用Visual StudioCode插件离线安装包 (VSIX格式)
09-23
23款常用Visual Studio Code 的插件离线安装包 (VSIX格式)，适用于一些无法连接互联网的电脑。 离线包安装方法：从VScode的扩展 '...' 选择'从VSIX安装即可' 离线包目录如下： autoOpenMarkdown-preview beautify ...
吐血推荐珍藏的Visual Studio Code插件(推荐)
10-15
Visual Studio Code（VSC）是一款深受开发者喜爱的轻量级代码编辑器，它拥有丰富的插件生态，能够极大地提升开发者的生产力。以下是一些被高度推荐的VSC插件及其功能详解： 1. **Material Theme**：这款插件提供了...
Visual Studio Code 插件同步教程
03-28
### Visual Studio Code 插件同步教程 #### 一、Visual Studio Code 插件同步适用情况 Visual Studio Code (简称 VSCode) 是一款非常流行的轻量级代码编辑器，支持多种编程语言并拥有丰富的插件生态系统。然而，在...
精选资源
Visual Studio Code 插件 GitHub Copilot 离线资源 1.100.0.0
11-13
安装GitHub Copilot的离线资源文件"GitHub.Copilot.Vsix.1.10.0.3.vsix"是一个VSIX（Visual Studio Extension）文件，这是VS Code插件的标准分发格式。用户可以通过VS Code的扩展管理器手动安装此文件，或者在命令行...
(源码)基于 Visual Studio Code 插件开发框架的 YiYiMark 书签管理工具.zip
04-15
# 基于 Visual Studio Code 插件开发框架的 YiYiMark 书签管理工具 ## 项目简介 YiYiMark 是一款为 Visual Studio Code 量身打造的插件，其主要目的是助力开发者高效管理和标记代码行。借助简单的右键操作与直观的...
详解vscode中vue代码颜色插件
10-17
vscode的确是前端开发中很好的工具，安装颜色插件，从视觉上是美的享受。这篇文章主要介绍了vscode中vue代码颜色插件 ,需要的朋友可以参考下
Vs2013 插件，可以给文本编辑器添加很多有用的颜色
08-29
Viasfora是一款Visual Studio插件,通过安装这个插件,可以给文本编辑器添加很多有用的颜色，特别是括号颜色
VisualStudio 2008 深色主题 （包含Visual Assist X 颜色设置）
11-05
因最近开发需要，要使用VS2008，但是习惯了VS2017的深色主题，于是根据Visual Studio 2017深色主题默认颜色设置和Resharper2018代码着色调校了Visual Studio 2008深色背景颜色设置（包含了Visual Assist X 10.9.2283版本导出的语法着色颜色设置）。 与网上搜索出的大部分VS2008深色背景设置不同，该颜色设置是亲自调校，配合Visual Assist X颜色设置使用，基本可以还原 VS2017深色主题 + Resharper2018的开发环境。可惜无法上传截图，不然就能明显看出效果。
PowerMode Visual Studio 写代码酷炫插件
09-25
此插件是在写代码是出现酷炫效果。安装方法：直接安装即可。这是楼猪找了很久很喜欢的工具。在Visual Studio可配置效果
vs必备工具-vs彩虹括号插件
12-15
viasfora是一款Visual Studio插件，通过安装这个插件，可以给文本编辑器添加很多有用的颜色。五颜六色的括号使代码清晰，看上去一目了然
visual studio code 好用的插件
嵌入式软硬件叶玄
12-09 1246
该插件对不同类型的注释会附加了不同的颜色，更加方便区分，帮助我们在代码中创建更人性化的注释。这个VS Code插件支持多种语言，可以通过鼠标选中部分代码进行运行。
VSCode代码颜色设置与常用插件
热门推荐
小绿的博客
10-09 4万+
VSCode代码颜色设置与常用插件
VSC（Visual Studio Code）好用插件推荐
火山的博客
12-20 1015
VSC常用拓展推荐
visual studio code插件制作
最新发布
11-06
<think>首先，用户的问题是关于在Visual Studio Code中制作插件的相关信息。用户想知道Visual Studio Code插件制作方法和教程。 在我的系统级指令中，我需要： - 所有行内数学表达式使用$...$格式（但这里可能不涉及数学表达式）。 - 独立公式使用$$...$$格式（同样，可能不适用）。 - LaTeX语法正确（如果不涉及数学，可能不需要）。 - 使用中文回答。 - 生成相关问题。 - 回答中引用的段落末尾自然地添加引用标识。 用户提供了三个引用： - 引用[1]：关于VS Code汉化的。 - 引用[2]：关于Markdown Notes插件的使用教程。 - 引用[3]：关于VS Code插件的整理，提到Peacock和Bracket Pair Colorizer插件。 用户说这些引用仅供参考，并不是用户真正的需求，我应该参考用户上一次的问题和我的回答。但在这个对话中，用户的上一次问题是“我想获取在Visual Studio Code中制作插件的相关信息 请问Visual Studio Code插件制作方法和教程”，这是第一条消息。之前的上下文是系统级指令的示例，没有用户历史对话。 所以，我需要基于用户当前的问题来回答：获取VS Code插件制作方法和教程。 关键点： - 回答结构清晰，帮助用户逐步解决问题。 - 保证回答真实可靠（基于一般知识）。 - 引用提供的参考，但用户说这些仅供参考，不是真正需求，所以要谨慎使用。引用[3]提到插件如Peacock和Bracket Pair Colorizer，这可以间接相关，因为插件制作可能涉及类似插件。 如何回答： 1. **介绍VS Code插件制作**：解释插件是什么，如何开始。 2. **方法和教程**：提供步骤、资源。 3. **参考引用**：自然地添加引用标识到相关部分末尾。 4. **生成相关问题**：在最后添加相关问题。 结构化回答： - 开头：简要介绍VS Code插件。 - 主体：逐步指导如何制作插件。 - 安装必要工具（如Node.js, Yeoman, VS Code Extension Generator）。 - 创建一个新插件。 - 开发插件功能。 - 测试和发布。 - 结尾：鼓励用户实践。 - 生成相关问题。 引用集成： - 引用[3]提到插件如Peacock，我可以提到学习现有插件作为参考。 - 引用[2]关于Markdown Notes，但不太相关。 - 自然地添加引用标识，例如，在讨论现有插件时。 确保使用中文。 最终，添加相关问题。 相关问题生成（基于用户查询）： 1. 如何测试VS Code插件？ 2. 制作VS Code插件需要哪些前置知识？ 3. VS Code插件的发布流程是怎样的？ 现在，构建回答。 </think>### Visual Studio Code插件制作方法和教程 Visual Studio Code（简称VS Code）是一款流行的代码编辑器，支持通过插件扩展功能。制作VS Code插件主要涉及使用TypeScript或JavaScript，并遵循官方提供的开发框架。插件开发的核心是利用VS Code的API来添加新功能或修改编辑器行为。下面，我将一步步介绍插件制作的基本方法和教程资源，确保内容清晰易懂，基于可靠的开源知识和最佳实践。 #### 1. **准备工作** - **安装必要工具**： - 下载并安装Node.js（建议版本14.x或更高），这是运行JavaScript环境的基础[^1]。 - 安装Visual Studio Code编辑器（确保是最新版本）。 - 通过Node.js包管理器npm安装Yeoman和VS Code Extension Generator： ```bash npm install -g yo generator-code ``` 这将帮助你快速搭建插件骨架。 - **设置开发环境**： - 在VS Code中安装“TypeScript”和“Debugger for Chrome”扩展，便于调试插件。 - 参考现有插件（如Bracket Pair Colorizer）的源码学习结构设计[^3]，这有助于理解实际开发模式。 #### 2. **创建新插件** - **生成插件项目**： - 在命令行中运行以下命令，启动Yeoman生成器： ```bash yo code ``` - 根据提示选择插件类型（如“New Extension (TypeScript)”），填写插件名称、描述等基本信息。生成器会自动创建项目目录，包含核心文件如`package.json`（定义插件元数据）和`src/extension.ts`（主入口文件）。 - **项目结构简介**： - `package.json`：配置插件的激活事件、命令和依赖。 - `src/extension.ts`：编写插件逻辑的入口文件。 - `.vscode/launch.json`：调试配置，方便在VS Code中测试插件。 示例目录结构通常包括配置文件、源代码和测试文件夹。 #### 3. **开发插件功能** - **核心开发步骤**： - **实现功能**：在`extension.ts`中使用VS Code API。例如，添加一个简单命令来弹出消息： ```typescript import * as vscode from 'vscode'; export function activate(context: vscode.ExtensionContext) { let disposable = vscode.commands.registerCommand('myplugin.sayHello', () => { vscode.window.showInformationMessage('Hello, VS Code Plugin!'); }); context.subscriptions.push(disposable); } ``` - **扩展API的使用**：VS Code提供了丰富的API，如`vscode.languages`（语言支持）、`vscode.window`（UI交互）。参考官方文档学习如何添加代码提示或主题定制（类似Peacock插件的颜色修改功能）[^3]。 - **测试与调试**： - 在VS Code中按`F5`启动调试，这会打开一个扩展开发宿主实例，允许你实时测试插件。 - 编写单元测试：使用Mocha或Jest框架，确保代码健壮性。 - 调试技巧：利用VS Code的集成调试器查看日志和断点。 #### 4. **打包与发布** - **本地打包**： - 安装vsce（VS Code扩展管理器）： ```bash npm install -g vsce ``` - 运行`vsce package`生成.vsix安装文件，可在本地分享测试。 - **发布到市场**： - 注册Microsoft账号并登录Visual Studio Marketplace发布门户。 - 使用`vsce publish`命令上传插件，自动处理版本和元数据。 - 审核通过后，插件将在Marketplace公开。 #### 推荐教程资源 - **官方文档**：[VS Code Extension API](https://code.visualstudio.com/api) 是最权威的教程，涵盖从入门到高级主题。 - **社区教程**：搜索YouTube或GitHub上的实例项目（如“vscode-extension-samples”），许多开源插件提供完整源码。 - **参考书籍**：电子书如《Developing Visual Studio Code Extensions》提供实操指南。 在开发过程中，多参考成功插件（如Markdown Notes的组织方式）[^2]，能提升设计效率。记住，插件开发需要JavaScript/TypeScript基础，但对新手友好，官方示例丰富。 通过以上步骤，你可以高效创建自定义插件。如果遇到问题，建议从简单功能开始迭代。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值