Maison  >  Article  >  outils de développement  >  [Résumé de l'hématémèse] 23 plug-ins VSCode pour vous aider à améliorer l'efficacité et l'esthétique du développement

[Résumé de l'hématémèse] 23 plug-ins VSCode pour vous aider à améliorer l'efficacité et l'esthétique du développement

青灯夜游
青灯夜游avant
2022-03-10 20:01:5756874parcourir

Cet article résume 23 plug-ins VSCode avec diverses fonctions, qui peuvent aider les développeurs à améliorer l'efficacité et l'esthétique du développement. J'espère que cela sera utile à tout le monde !

[Résumé de l'hématémèse] 23 plug-ins VSCode pour vous aider à améliorer l'efficacité et l'esthétique du développement

Qu'est-ce que VSCode ?

VSCode (nom complet : Visual Studio Code) est un éditeur de code source gratuit multiplateforme développé par Microsoft. Le logiciel prend en charge la coloration syntaxique, la complétion automatique du code, la reconstruction du code et les fonctions de visualisation des définitions, et dispose d'outils de ligne de commande intégrés et d'un système de contrôle de version Git. Les utilisateurs peuvent modifier les thèmes et les raccourcis clavier pour personnaliser les paramètres, et peuvent également installer des extensions via le magasin d'extensions intégré pour étendre les fonctionnalités du logiciel. [Apprentissage recommandé : "tutoriel d'introduction au vscodeVSCode(全称:Visual Studio Code)是一款由微软开发且跨平台的免费源代码编辑器。该软件支持语法高亮、代码自动补全、代码重构、查看定义功能,并且内置了命令行工具和Git版本控制系统。用户可以更改主题和键盘快捷方式实现个性化设置,也可以通过内置的扩展程序商店安装扩展以拓展软件功能。【推荐学习:《vscode入门教程》】

VSCode默认支持非常多的编程语言,包括JavaScriptTypeScriptCSSHTML;也可以通过下载扩展支持PythonC/C++JavaGo在内的其他语言。VSCode也支持调试 Node.js 程序。


[Résumé de lhématémèse] 23 plug-ins VSCode pour vous aider à améliorer lefficacité et lesthétique du développement
VSCode支持同时打开多个目录,并将信息保存在工作区中以便复用。作为跨平台的编辑器,VSCode允许用户更改文件的代码页、换行符和编程语言。

VSCode的下载安装

  • Windows
    打开VSCode官网直接下载即可。

  • Linux
    Linux平台下安装VSCode速度很慢,可以用以下方法:

  • 通过国内源下载VSCode
  • 将压缩包解压并移动到usr/local目录:sudo mv VSCode-linux-x64 /usr/local/
  • 获取运行权限:sudo chmod +x /usr/local/VSCode-linux-x64/code
  • 安装VSCode(注意此处只能用普通用户权限): /usr/local/VSCode-linux-x64/code
  • 创建软链接: sudo ln -s /usr/local/VSCode-linux-x64/code /usr/local/bin/vscode, 之后在任意位置可通过终端输入vscode启动软件

VSCode插件集合

美观类

1 CodeSnap

CodeSnap可以轻松生成高分辨率,精美的代码图片

[Résumé de lhématémèse] 23 plug-ins VSCode pour vous aider à améliorer lefficacité et lesthétique du développement

使用方式很简单:

  • 使用命令将 Codesnap 调出

  • 复制要作为输出的一部分的代码

  • 保存图像到本地

[Résumé de lhématémèse] 23 plug-ins VSCode pour vous aider à améliorer lefficacité et lesthétique du développement

2 :emojisense:

:emojisense:可以为MarkDown文档或命令行输出表情,让编程更有趣

[Résumé de lhématémèse] 23 plug-ins VSCode pour vous aider à améliorer lefficacité et lesthétique du développement

直接复制Emoji大全里喜欢的标签即可,例如下面我给数据集训练过程的命令行增加了表情。

[Résumé de lhématémèse] 23 plug-ins VSCode pour vous aider à améliorer lefficacité et lesthétique du développement

3 Marquee

Marquee可以将编程主屏幕改造得更实用或更美观。有了这个扩展,你可以看新闻报道,天气!此外,Marquee 支持用户将项目添加到个人待办事项列表中,以及一些快速笔记的暂存板。一些小但有用的插件功能。

[Résumé de lhématémèse] 23 plug-ins VSCode pour vous aider à améliorer lefficacité et lesthétique du développement

[Résumé de lhématémèse] 23 plug-ins VSCode pour vous aider à améliorer lefficacité et lesthétique du développement

4 Material Theme

Material Theme为 VScode 安装不同的主题,允许你根据自己的喜好自定义整个编辑器的外观。

[Résumé de lhématémèse] 23 plug-ins VSCode pour vous aider à améliorer lefficacité et lesthétique du développement

下面是我个人使用的FireFly Pro"]

VSCode prend en charge de nombreux langages de programmation par défaut, notamment JavaScript, TypeScript, CSS et HTML ; Des langages supplémentaires, notamment Python, C/C++, Java et Go, peuvent également être pris en charge en téléchargeant des extensions. VSCode prend également en charge le débogage des programmes Node.js. [Résumé de lhématémèse] 23 plug-ins VSCode pour vous aider à améliorer lefficacité et lesthétique du développement


Insérer la description de l'image ici
VSCode prend en charge l'ouverture de plusieurs répertoires en même temps et l'enregistrement des informations dans l'espace de travail pour les réutiliser. En tant qu'éditeur multiplateforme, VSCode permet aux utilisateurs de modifier la page de codes, les sauts de ligne et le langage de programmation d'un fichier. 🎜🎜🎜Téléchargez et installez VSCode🎜🎜
  • 🎜🎜Windows🎜
    Ouvrez le site officiel de VSCode et téléchargez-le directement. 🎜
  • 🎜🎜Linux🎜
    L'installation de VSCode sur la plateforme Linux est très lente. Vous pouvez utiliser la méthode suivante : 🎜li>
  • Télécharger VSCode à partir de sources nationales
  • Extraire le package compressé et déplacez-le vers le répertoire usr/local : sudo mv VSCode -linux-x64 /usr/local/
  • Obtenir les autorisations d'exécution : sudo chmod +x /usr/local/VSCode-linux-x64/code
  • Installer VSCode (Notez que seules les autorisations des utilisateurs ordinaires peuvent être utilisées ici) : /usr/local/VSCode-linux-x64/code
  • Créez un lien symbolique : sudo ln -s /usr/local/VSCode-linux-x64/code /usr/local/bin/vscode, puis saisissez vscode Démarrez le logiciel
🎜🎜Collection de plug-ins VSCode🎜🎜

🎜Belle catégorie🎜

🎜1 CodeSnap🎜

🎜 CodeSnap peut facilement générer de superbes images de code haute résolution

Insérer la description de l'image ici🎜🎜L'utilisation est très simple : 🎜
  • 🎜Utilisez la commande pour appeler Codesnap🎜
  • 🎜Copiez le code pour faire partie de la sortie🎜
  • 🎜Enregistrez l'image localement🎜
🎜🎜

🎜2 :emojisense:🎜

🎜 : emojisense :Peut générer des émoticônes pour les documents MarkDown ou les lignes de commande, rendant la programmation plus intéressante

Insérer la description de l'image ici🎜🎜 Copiez simplement les tags que vous aimez dans la collection Emoji. Par exemple, ci-dessous, j'ai ajouté des émoticônes à la ligne de commande pendant le processus de formation de l’ensemble de données. 🎜🎜Insérer la description de l'image ici🎜

🎜3 Marquee 🎜

🎜Marquee peut transformer l'écran d'accueil de programmation pour le rendre plus pratique ou plus beau. Avec cette extension, vous pouvez regarder les informations, la météo ! De plus, Marquee permet aux utilisateurs d'ajouter des éléments à une liste de tâches personnelle, ainsi qu'un tableau à gratter pour des notes rapides. Quelques fonctionnalités de plugin petites mais utiles.

Insérer la description de l'image ici 🎜 🎜Insérer la description de l'image ici🎜

🎜4 Thème matériel 🎜

🎜Matériel ThèmeInstallez différents thèmes pour VScode, vous permettant de personnaliser l'apparence de l'ensemble de l'éditeur en fonction de vos préférences.

Insérer la description de l'image ici 🎜 🎜Ce qui suit est le thème FireFly Pro que j'utilise personnellement. 🎜🎜🎜🎜

5 Signets

Bookmarks vous permet d'ajouter des signets au code dans votre espace de travail pour des lignes spécifiques de différents fichiers. Bookmarks允许你在工作区中针对不同文件的特定行向代码添加书签。

[Résumé de lhématémèse] 23 plug-ins VSCode pour vous aider à améliorer lefficacité et lesthétique du développement

6 Bracket Pair Colorizer

Bracket Pair Colorizer给括号加上不同的颜色,便于区分不同的区块。

[Résumé de lhématémèse] 23 plug-ins VSCode pour vous aider à améliorer lefficacité et lesthétique du développement

7 vscode-icons

vscode-icons给VSCode文件更换更好看的图标。

[Résumé de lhématémèse] 23 plug-ins VSCode pour vous aider à améliorer lefficacité et lesthétique du développement

编程类(前端)

1 Vetur

Vetur为Vue项目提供语法高亮、智能感知等。

[Résumé de lhématémèse] 23 plug-ins VSCode pour vous aider à améliorer lefficacité et lesthétique du développement

2 Auto Close Tag

Auto Close Tag自动闭合HTML/XML标签。

[Résumé de lhématémèse] 23 plug-ins VSCode pour vous aider à améliorer lefficacité et lesthétique du développement

3 Auto Rename Tag

Auto Rename Tag自动重命名HTML/XML标签。

[Résumé de lhématémèse] 23 plug-ins VSCode pour vous aider à améliorer lefficacité et lesthétique du développement

4 formate: CSS/LESS/SCSS formatter

formate: CSS/LESS/SCSS formatter格式化CSS/LESS/SCSS以增强可读性。

[Résumé de lhématémèse] 23 plug-ins VSCode pour vous aider à améliorer lefficacité et lesthétique du développement

5 Live Server

Live Server为静态和动态页面启动具有实时重新加载功能的开发本地服务器。

[Résumé de lhématémèse] 23 plug-ins VSCode pour vous aider à améliorer lefficacité et lesthétique du développement

6 Debugger for Chrome

Debugger for Chrome将JS代码的调试嵌入Chrome浏览器。

[Résumé de lhématémèse] 23 plug-ins VSCode pour vous aider à améliorer lefficacité et lesthétique du développement

编程类(C/C++)

1 C/C++

C/C++为VSCode添加了对C/C++的语言支持,包括 IntelliSense 和Debugging等功能。

[Résumé de lhématémèse] 23 plug-ins VSCode pour vous aider à améliorer lefficacité et lesthétique du développement

2 C++ Intellisense

C++ Intellisense为VSCode添加了对C/C++的智能感知。

[Résumé de lhématémèse] 23 plug-ins VSCode pour vous aider à améliorer lefficacité et lesthétique du développement

3 CMake Tools

CMake Tools为VSCode添加了对CMake的支持与感知。

[Résumé de lhématémèse] 23 plug-ins VSCode pour vous aider à améliorer lefficacité et lesthétique du développement

编程类(Python)

1 Python

Python为VSCode添加了对Python的语言支持,包括 IntelliSense 和Debugging等功能。

[Résumé de lhématémèse] 23 plug-ins VSCode pour vous aider à améliorer lefficacité et lesthétique du développement

2 Jupyter

Jupyter为VSCode添加了对Jupyter Notebook的功能支持。

[Résumé de lhématémèse] 23 plug-ins VSCode pour vous aider à améliorer lefficacité et lesthétique du développement

效率类

1 Git Graph

Git Graph可视化你的Git提交流程。

[Résumé de lhématémèse] 23 plug-ins VSCode pour vous aider à améliorer lefficacité et lesthétique du développement

2 koroFileHeader

koroFileHeader用于格式化生成文件头部注释和函数注释。

[Résumé de lhématémèse] 23 plug-ins VSCode pour vous aider à améliorer lefficacité et lesthétique du développement

3 Code Runner

Code Runner用于直接运行多种语言的代码片段或文件。

[Résumé de lhématémèse] 23 plug-ins VSCode pour vous aider à améliorer lefficacité et lesthétique du développement

4 Better Comments

Better Comments

Insérer la description de l'image ici

[Résumé de lhématémèse] 23 plug-ins VSCode pour vous aider à améliorer lefficacité et lesthétique du développement

6 Coloriseur de paires de supports 🎜🎜🎜Bracket Pair Colorizer ajoute différentes couleurs aux supports pour distinguer facilement les différents blocs. 🎜🎜Insérer la description de l'image ici🎜🎜🎜7 icônes vscode 🎜🎜🎜vscode-iconsRemplacez les fichiers VSCode par des icônes plus belles. 🎜🎜Insérer la description de l'image ici🎜

Classe de programmation ( Front-end)

🎜🎜1 Vetur🎜🎜🎜Vetur fournit une coloration syntaxique, une détection intelligente, etc. pour les projets Vue. 🎜🎜Insérer la description de l'image ici🎜🎜🎜2 Balise de fermeture automatique 🎜🎜🎜Auto Close TagFermez automatiquement les balises HTML/XML. 🎜🎜Insérer la description de l'image ici🎜🎜🎜3 Balise de renommage automatique 🎜🎜🎜Auto Rename Tag Renommez automatiquement les balises HTML/XML. 🎜🎜Insérer la description de l'image ici🎜🎜🎜4 format : CSS /LESS/SCSS formateur🎜🎜🎜format : CSS/LESS/SCSS formateurFormate CSS/LESS/SCSS pour améliorer la lisibilité. 🎜🎜Insérer la description de l'image ici🎜🎜🎜5 Live Server 🎜 🎜🎜 Live Server lance un serveur local de développement avec des capacités de rechargement en direct pour les pages statiques et dynamiques. 🎜🎜Insérer la description de l'image ici🎜🎜🎜6 Débogueur pour Chrome 🎜🎜🎜Debugger for Chrome intègre le débogage du code JS dans le navigateur Chrome. 🎜🎜Insérer la description de l'image ici🎜

Classe de programmation ( C/C++)

🎜🎜1 C/C++🎜🎜🎜C/C++ ajoute la prise en charge du langage C/C++ à VSCode, y compris des fonctions telles qu'IntelliSense et le débogage. 🎜🎜Insérer la description de l'image ici🎜🎜🎜2 C++ Intellisense 🎜 🎜🎜C++ Intellisense ajoute la perception intelligente C/C++ à VSCode. 🎜🎜Insérer la description de l'image ici🎜🎜🎜3 Outils CMake 🎜 🎜🎜CMake Tools ajoute la prise en charge et la sensibilisation de CMake à VSCode. 🎜🎜Insérer la description de l'image ici🎜

Classe de programmation ( Python)

🎜🎜1 Python🎜🎜🎜Python ajoute la prise en charge du langage Python à VSCode, y compris des fonctions telles qu'IntelliSense et Debugging. 🎜🎜Insérer la description de l'image ici🎜🎜🎜2 Jupyter🎜 🎜 🎜Jupyter ajoute la prise en charge fonctionnelle de Jupyter Notebook à VSCode. 🎜🎜Insérer la description de l'image ici🎜

Classe d'efficacité 🎜🎜1 Git Graph🎜🎜🎜Git GraphVisualisez votre processus de soumission Git. 🎜🎜Insérer la description de l'image ici🎜🎜🎜2 koroFileHeader🎜 🎜 🎜koroFileHeader est utilisé pour formater et générer des commentaires d'en-tête de fichier et des commentaires de fonction. 🎜🎜Insérer la description de l'image ici🎜🎜🎜3 Code Runner 🎜 🎜🎜Code Runner est utilisé pour exécuter directement des extraits de code ou des fichiers dans plusieurs langues. 🎜🎜Insérer la description de l'image ici🎜🎜🎜4 Meilleurs commentaires 🎜 🎜🎜Meilleurs commentaires permet de mettre en évidence divers types spécifiques de commentaires pour les commentaires de code. 🎜🎜🎜🎜

5 CodeTime

CodeTime fournit chaque jour une analyse des données de votre temps de codage.

[Résumé de lhématémèse] 23 plug-ins VSCode pour vous aider à améliorer lefficacité et lesthétique du développement

Pour plus de connaissances sur VSCode, veuillez visiter : tutoriel vscode ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer