VS Code 插件system and 推荐插件

深入UnderstandVS Code 插件生态, Learningsuch as何installation, management插件, 并推荐常用 Development插件

首页 > VS Code tutorial > tutoriallist > VS Code 插件system and 推荐插件

1. VS Code 插件systemoverview

VS Code 强 big 之处 in 于其丰富 插件ecosystem. 插件 (也称 for scale) 可以scaleVS Code functions, 添加 new languagesupport, debug器, 主题, tool集成etc..

VS Code插件具 has 以 under 特点:

  • 基于TypeScript and Node.jsDevelopment
  • support many 种scale点, such ascommands, 视graph, languageserveretc.
  • throughVS Codescale市场分发 and update
  • support自动update and versionmanagement
  • 可以自定义VS Code 几乎所 has 方面

2. 访问scale市场

您可以through以 under 方式访问VS Codescale市场:

  1. 点击 left 侧活动栏in scalegraph标 (方块形状)
  2. using fast 捷键 Ctrl+Shift+X (Windows/Linux) or Cmd+Shift+X (macOS)
  3. in commands面板in输入 Extensions: Open Extensions View

2.1 scale市场界面

scale市场界面package含以 under 主要部分:

  • 搜索框: 用于搜索scale
  • filter选项: 可以按已installation, 推荐, 热门, 评分etc.filter
  • scalelist: 显示匹配 scale
  • scale详情: 显示选inscale 详细information, includingdescribes, version, 评分, 评论etc.

3. installation and management插件

3.1 installation插件

installationVS Code插件非常 simple :

  1. in scale市场in搜索您需要 插件
  2. in scalelistin找 to 目标插件
  3. 点击插件卡片 on "installation"按钮
  4. installationcompletion after , 插件会自动启用

3.2 management已installation 插件

您可以through以 under 方式management已installation 插件:

  • 启用/禁用插件: 点击插件卡片 on "禁用" or "启用"按钮
  • 卸载插件: 点击插件卡片 on 齿轮graph标, 选择"卸载"
  • update插件: VS Code会自动check插件update, 并 in 插件名称旁显示updategraph标
  • 查看插件详情: 点击插件卡片, 查看详细information and 设置

3.3 from VSIXfileinstallation插件

such as果您需要installation离线插件 or specificversion 插件, 可以usingVSIXfile:

  1. under 载插件 VSIXfile
  2. in VS Codein, 点击scale市场 right on 角 三个点graph标
  3. 选择" from VSIXinstallation"
  4. 选择 under 载 VSIXfile, 点击"installation"

3.4 插件设置

许 many 插件providing自定义设置选项:

  1. 点击插件卡片 on 齿轮graph标
  2. 选择"scale设置"
  3. in 设置页面in调整插件 configuration选项

4. 推荐插件classification

VS Code插件可以分 for many 个class别, 以 under is 一些常用 插件class别 and 推荐插件:

4.1 languagesupport插件

for 各种programminglanguageproviding语法highlight, intellisense, codeformatetc.support:

Python

providingPythonlanguagesupport, includingintellisense, codeformat, debug, Lintingetc..

Development者: Microsoft

JavaScript (ES6) code snippets

providing big 量JavaScript ES6+code片段, improving编码efficiency.

Development者: Charalampos Karypidis

HTML CSS Support

for HTMLfileprovidingCSSclass名 and ID intellisense.

Development者: ecmel

4.2 主题 and out 观插件

自定义VS Code out 观, including颜色主题, graph标主题etc.:

One Dark Pro

Atom One Dark主题, 简洁美观, 深受Development者喜爱.

Development者: zhuangtongfa

Material Icon Theme

providing丰富 file and file夹graph标, 使VS Code更具视觉吸引力.

Development者: Philipp Kief

Bracket Pair Colorizer 2

for 匹配 括号添加颜色, 使codestructure更清晰.

Development者: CoenraadS

4.3 Developmenttool集成

集成各种Developmenttool and service:

GitLens — Git supercharged

增强VS Code Gitfunctions, providingcode作者information, submittinghistory, branch for 比etc..

Development者: Eric Amodio

Docker

providingDockersupport, includingcontainersmanagement, 镜像构建, Docker Composeetc..

Development者: Microsoft

REST Client

允许您 in VS Codein直接发送HTTPrequest, 查看response.

Development者: Huachao Mao

4.4 codequality and format

improvingcodequality, 自动formatcode:

Prettier - Code formatter

自动formatcode, support many 种language, 保持code风格一致.

Development者: Prettier

ESLint

JavaScript and TypeScript codechecktool, helping您发现 and 修复codein issues.

Development者: Microsoft

SonarLint

实时codequalitycheck, 发现codein bug, 漏洞 and 异味.

Development者: SonarSource

4.5 otherPractical插件

Live Server

启动本地Developmentserver, support实时刷 new , 非常适合 before 端Development.

Development者: Ritwick Dey

Code Runner

in VS Codein直接run各种language code片段, 无需configuration.

Development者: Jun Han

Markdown Preview Enhanced

增强Markdown预览functions, supportgraph表, 公式, code块etc..

Development者: Yiyi Wang

5. 插件configurationbest practices

5.1 合理using插件

虽然插件可以增强VS Code functions, 但过 many 插件会导致:

  • VS Code启动缓 slow
  • memory占用增加
  • 编辑器response变 slow
  • 插件之间可能产生conflict

提示

只installation您真正需要 插件, 并定期check and 卸载不常用 插件.

5.2 插件设置synchronization

such as果您 in many 台设备 on usingVS Code, 可以using设置synchronizationfunctionssynchronization插件 and 设置:

  1. 点击 left under 角 齿轮graph标
  2. 选择"打开设置synchronization"
  3. usingGitHub or Microsoftaccountlogin
  4. 选择要synchronization in 容, including设置, 键盘map, scale, 片段etc.

5.3 fast 捷键configuration

许 many 插件会添加 new commands and fast 捷键, 您可以根据需要自定义:

  1. 点击 left under 角 齿轮graph标, 选择"键盘 fast 捷方式"
  2. 搜索您需要modify commands
  3. 点击commands旁 铅笔graph标, 按 under new fast 捷键组合
  4. 保存更改

6. Development自己 插件

such as果您找不 to 满足requirements 插件, 可以考虑Development自己 VS Code插件. VS Codeproviding了完善 插件Developmentdocumentation and tool:

  • 官方插件Developmentdocumentation: https://code.visualstudio.com/api
  • usingYeoman生成器creation插件模板: npm install -g yo generator-code
  • usingTypeScript or JavaScriptDevelopment插件
  • 插件test and debugtool

7. 练习

练习 1: installation and configuration插件

  1. installation以 under 插件:
    • One Dark Pro (主题)
    • Material Icon Theme (graph标主题)
    • Prettier - Code formatter (codeformat)
    • Live Server (本地server)
  2. 启用One Dark Pro主题
  3. 启用Material Icon Themegraph标主题
  4. configurationPrettier for 默认formattool
  5. usingLive Server启动一个本地server

练习 2: management插件

  1. 查看已installation 插件list
  2. 禁用一个您不常用 插件
  3. 查看插件update并update所 has 需要update 插件
  4. 尝试installation一个VSIX格式 插件 (such as果 has )

练习 3: 探索插件市场

  1. in scale市场in搜索您常用programminglanguage 插件
  2. 查看评分最 high 插件
  3. 查看热门插件
  4. 阅读插件评论, Understandotheruser 评价
  5. 选择并installation一个您感兴趣 new 插件
on 一节: VS Code 界面布局 and basicoperation under 一节: VS Code fast 捷键 and efficiency提升