Une brève analyse de l'outil VSCode CLI, il s'avère tellement utile !

En parlant de l'outil CLI vscode, vous ne le connaissez peut-être pas car il n'est pas nécessaire dans le travail quotidien. Mais comme certaines de ses fonctions sont assez pratiques et que certaines de mes idées techniques récentes peuvent simplement être réalisées avec l'aide de celui-ci, cet article parlera des fonctions pratiques de VSCode CLI. [Étude recommandée : "Tutoriel d'introduction à vscode"]

La commande shell de VSCode CLI est appelée code, et code sera utilisé plus tard pour faire référence à VSCode CLI outil. code，后面都会用code来指代VSCode CLI工具。

code实用功能

打开最近一个会话

code后面不带任何选项或参数执行，会打开VSCode最近一个会话。比如，如果你最近打开了projectA，无论现在projectA是否被其他窗口覆盖或者你已经退出VSCode，下面的命令都能快速打开projectA：

$ code

如果你正在使用shell，这个命令应该能帮助你迅速打开VSCode或者定位到刚才编辑的文件。

打开特定的项目

在这里我想问大家平时都是怎样用VSCode打开某个项目的，都是按以下步骤执行吗？

• 点击VSCode图标

• 点击菜单栏File

• 点击Open

• 在Mac的Finder里找到并打开

我就不是，我习惯了使用shell，觉得命令行操作比在Finder里查找要快。

code .命令是我平时用得最多的，它可以快速地在VSCode打开当前目录的项目。

我的所有项目都是放在一个固定的目录下，所以我只要先cd到项目目录下，再执行code .就好了。

当然，你也可以使用code <folder>的方式打开项目，效果是一样的。

跳转到文件的行列

code -g <file>:<line>:<character>命令可以快速跳转到文件某一行的某个字符。比如，下面这个命令会打开index.ts文件，光标定位到第18行，index为8的字符前面的位置。

$ code -g /project-path/src/index.ts:18:8

现在的一些dev工具比如react-dev-inspector和vue-devtools，它们能够让开发者点击DOM元素即可在VSCode打开并定位到对应的源码位置。原理都是在dev server运行的时候获取源码的位置信息并插入到DOM元素上，然后开发者点击DOM时给dev server发送位置信息，dev server再调用code的能力跳转源码。

文件对比

如果你想快速对比两个文件，可以使用以下命令：

$ code -d file-path-a file-path-b

这对习惯使用VSCode对比文件差异以及解决冲突的同学来说应该比较有用。

插件操作

这是我近期发现的最让我喜欢的功能了，包括以下几个点：

• code --list-extensions --show-versions：以<publisher>.<extensionName>@<version>的形式罗列所有已安装的插件；
• code --install-extension <ext>：安装插件，可以加上--force选项防止弹窗提示；
• code --uninstall-extension <ext>：卸载插件。

想象一下，如果让你来开发一个前端工程的脚手架，你会做哪些事情？

仿照市面上大部分的脚手架，当然会给用户提供editorConfig、eslint、prettier等代码格式相关的配置。但完成这些，脚手架只有90分。实际上，要想eslint等生效，用户还得安装相应的VSCode插件和配置settings.json。

settings.json还好说，可以在.vscode目录下创建settings.json实现团队成员间配置的共享以及覆盖本地配置，省去团队成员手动配置的麻烦和避免开发配置不一致的问题。

至于VSCode插件，一般来说，我们会让用户自己去安装或者默认他已经安装了。但对于前端小白或者新入职的同事来说，这无疑是痛苦的，也是优秀的脚手架开发者不能容忍的。这时，上面几个命令就发挥作用了。

--list-extensions查看用户是否安装了某个插件，如果没有，则使用--install-extension

Fonctions pratiques du code

Ouvrir la dernière conversation

code est exécuté sans aucune option ni paramètre, et la dernière session de VSCode sera ouverte. Par exemple, si vous avez récemment ouvert projectA, que projectA soit couvert par d'autres fenêtres ou que vous ayez quitté VSCode, la commande suivante peut ouvrir rapidement projectA code>：🎜rrreee🎜Si vous utilisez le shell, cette commande devrait vous aider à ouvrir rapidement VSCode ou à localiser le fichier que vous venez de modifier. 🎜<h3 data-id="heading-2"><strong>Ouvrir un projet spécifique</strong></h3>🎜Ici, j'aimerais vous demander comment vous utilisez habituellement VSCode pour ouvrir un projet. Vous appuyez toujours sur Faire. avez-vous suivi les étapes suivantes ? 🎜<ul style="list-style-type: disc;"> <li>🎜Cliquez sur l'icône VSCode🎜</li> <li>🎜Cliquez sur la barre de menu Fichier🎜</li> <li>🎜Cliquez sur Open🎜 li></li> <li>🎜Trouvez-le et ouvrez-le dans le Finder de Mac🎜</li> </ul>🎜Pas pour moi, je suis habitué à utiliser le shell et je pense que les opérations en ligne de commande sont plus rapides que la recherche. dans le Finder. 🎜🎜La commande <code>code . est ce que j'utilise habituellement le plus. Elle permet d'ouvrir rapidement le projet dans le répertoire actuel dans VSCode. 🎜🎜Tous mes projets sont placés dans un répertoire fixe, il me suffit donc d'abord de cd dans le répertoire du projet, puis d'exécuter code .. 🎜🎜Bien sûr, vous pouvez également utiliser code <folder> pour ouvrir le projet, et l'effet est le même. 🎜

Sauter à la ligne du fichier

🎜code -g <file>:<line>:< caractère&gt La commande ; peut rapidement accéder à un certain caractère dans une certaine ligne du fichier. Par exemple, la commande suivante ouvrira le fichier index.ts et positionnera le curseur à la ligne 18, juste avant le caractère avec index égal à 8. 🎜rrreee🎜Certains outils de développement actuels tels que react-dev-inspector 🎜 et vue-devtools🎜, qui permettent aux développeurs de cliquer sur un élément DOM pour l'ouvrir dans VSCode et localisez l'emplacement du code source correspondant. Le principe est d'obtenir les informations de localisation du code source lorsque le serveur de développement est en cours d'exécution et de l'insérer dans l'élément DOM. Ensuite, lorsque le développeur clique sur le DOM, les informations de localisation sont envoyées au serveur de développement, et le serveur de développement ensuite. appelle la possibilité de passer au code. 🎜

Comparaison de fichiers

🎜Si vous souhaitez comparer rapidement deux fichiers, vous pouvez utiliser la commande suivante : 🎜rrreee🎜Cette paire est utilisée à l'aide de la comparaison VSCode Cela devrait être plus utile pour les étudiants qui souhaitent signaler des différences et résoudre des conflits. 🎜

Fonctionnement du plug-in

🎜C'est ma fonctionnalité préférée que j'ai découverte récemment, y compris les points suivants : 🎜

• code - -list-extensions --show-versions : répertorie tous les plug-ins installés sous la forme <publisher>.<extensionName>@<version>;
• code --install-extension <ext> : pour installer le plug-in, vous pouvez ajouter l'option --force pour empêcher les invites contextuelles ;
• code --uninstall-extension <ext> : Désinstallez le plug-in.

🎜Imaginez si on vous demandait de développer un échafaudage d'ingénierie front-end, que feriez-vous ? 🎜🎜Imitant la plupart des échafaudages du marché, il fournira bien entendu aux utilisateurs des configurations liées aux formats de code tels que editorConfig, eslint, prettier, etc. Mais une fois ces travaux terminés, l’échafaudage ne marque que 90 points. En fait, pour qu'eslint prenne effet, les utilisateurs doivent installer le plug-in VSCode correspondant et configurer settings.json. 🎜🎜settings.json Heureusement, vous pouvez créer settings.json dans le répertoire .vscode pour partager les configurations entre les membres de l'équipe et écraser les configurations locales, évitant aux membres de l'équipe les problèmes de configuration manuelle et évitant le problème des configurations de développement incohérentes. 🎜🎜Quant au plug-in VSCode, de manière générale, nous laissons les utilisateurs l'installer eux-mêmes ou il est déjà installé par défaut. Mais pour les novices du front-end ou les nouveaux collègues, cela est sans aucun doute douloureux, et c'est également intolérable pour les excellents développeurs d'échafaudages. A ce moment, les commandes ci-dessus entrent en jeu. 🎜🎜--list-extensions Vérifiez si l'utilisateur a installé un plug-in. Sinon, utilisez --install-extension pour l'installer. 🎜

Il est concevable qu'avec l'aide des commandes ci-dessus pour faire fonctionner le plug-in, combinées avec .vscode, l'échafaudage puisse aider les utilisateurs à configurer l'environnement de développement complètement sans aucun sens, et puisse garantir que tout le monde dans l'équipe a la même configuration, ne vous inquiétez pas qu'un jour un nouveau collègue vienne dire que son eslint ne prend pas effet. .vscode，脚手架可以完全无感地帮用户配置好开发环境，并且能够保证团队里每个人的配置都是一样的，不用担心突然有一天某个新同事跑过来说他的eslint不生效。

注意：插件操作相关的命令权力有点大，要小心使用。

code的安装

有的同学可能会说，要使code生效，不得手动将code命令安装到全局环境变量PATH上吗？

在Mac上是这样的，但我们也能通过/Applications/Visual Studio Code.app/Contents/Resources/app/bin/code这个路径直接调用code。

对于Windows、Linux系统，VSCode安装时code就会自动添加到PATH，可以直接调用code。

所以，脚手架可以做一定的封装，避免用户手动添加环境变量。

总结

这篇文章只介绍了VSCode CLI的一些我认为比较实用的功能，其他的诸如切换语言、性能监控等功能并没有介绍，大家可以通过文末资料里的链接跳转官网去查看。

最近我在简单封装code

Remarque : Les commandes liées aux opérations du plug-in sont un peu puissantes, alors utilisez-les avec prudence.

installation du code

Certains étudiants peuvent dire que vous devez rendre le code efficace, ne devriez-vous pas installer manuellement la commande code sur la variable d'environnement globale PATH ?

C'est comme ça sur Mac, mais on peut aussi appeler directement codevia le chemin /Applications/Visual Studio Code.app/Contents/Resources/app/bin/code >.
Pour les systèmes Windows et Linux, code sera automatiquement ajouté à PATH lorsque VSCode est installé, et code peut être appelé directement.

🎜Ainsi, les échafaudages peuvent être encapsulés dans une certaine mesure pour empêcher les utilisateurs d'ajouter manuellement des variables d'environnement. 🎜

Résumé

🎜Cet article ne présente que certaines fonctions de VSCode CLI que je pense plus pratiques, comme le changement de langue et. La surveillance des performances et d'autres fonctions ne sont pas introduites. Vous pouvez accéder au site officiel via le lien dans les informations à la fin de l'article pour le vérifier. 🎜🎜Récemment, j'ai simplement encapsulé des commandes liées au code, dans l'espoir de fournir un ensemble de fonctionnalités de base pour les appels directs par d'autres projets de nœuds. L'adresse du projet est : 🎜github.com/avennn/vsc-. …🎜, bienvenue Tout le monde utilise et pr. Si vous pensez que c'est bien, n'hésitez pas à lui donner une étoile. 🎜🎜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!