Table des matières
Installez et utilisez
Créez un échafaudage
发布脚手架
使用脚手架
Utiliser l'échafaudage🎜🎜🎜Utiliser directement l'adresse de l'entrepôt git🎜🎜🎜Léchafaudage se présente également sous forme de plug-in ! vscode implémente le plug-in déchafaudage🎜
🎜Faites attention à l'utilisation de adresse de clonage, prise en charge de la spécification de branches, telles que -b master https://github.com/lowcode-scaffold/lowcode-mock.git, des entrepôts privés internes peuvent également être utilisés🎜
🎜Léchafaudage se présente également sous forme de plug-in ! vscode implémente le plug-in déchafaudage🎜🎜🎜< span style="max-width:90%">Partager avec la liste de modèles pour une création rapide🎜🎜🎜Léchafaudage se présente également sous forme de plug-in ! vscode implémente le plug-in déchafaudage🎜🎜Modifier
Dépôt 🎜 Contenu index.json, soumettre PR. 🎜

实现原理" >Publiez l'échafaudage🎜🎜Soumettez l'échafaudage au référentiel git et faites attention à l'accès public droits du projet ouvert. 🎜

Utiliser l'échafaudage🎜🎜🎜Utiliser directement l'adresse de l'entrepôt git🎜🎜🎜Léchafaudage se présente également sous forme de plug-in ! vscode implémente le plug-in déchafaudage🎜
🎜Faites attention à l'utilisation de adresse de clonage, prise en charge de la spécification de branches, telles que -b master https://github.com/lowcode-scaffold/lowcode-mock.git, des entrepôts privés internes peuvent également être utilisés🎜
🎜Léchafaudage se présente également sous forme de plug-in ! vscode implémente le plug-in déchafaudage🎜🎜🎜< span style="max-width:90%">Partager avec la liste de modèles pour une création rapide🎜🎜🎜Léchafaudage se présente également sous forme de plug-in ! vscode implémente le plug-in déchafaudage🎜🎜Modifier
Dépôt 🎜 Contenu index.json, soumettre PR. 🎜

实现原理

Maison outils de développement VSCode L'échafaudage se présente également sous forme de plug-in ! vscode implémente le plug-in d'échafaudage

L'échafaudage se présente également sous forme de plug-in ! vscode implémente le plug-in d'échafaudage

Apr 15, 2022 pm 09:21 PM
vscode 插件

Les échafaudages se présentent également sous forme de plug-in ! L'article suivant vous présentera l'échafaudage de production et de gestion visuelle du plug-in vscode et l'analyse des principes. J'espère qu'il sera utile à tout le monde !

L'échafaudage se présente également sous forme de plug-in ! vscode implémente le plug-in d'échafaudage

En matière d'échafaudage, vous pouvez penser à différents xxx-cli Cet article présente une autre méthode : implémentée sous la forme d'un plug-in vscode pour fournir des opérations visuelles Web, comme indiqué ci-dessous :

Léchafaudage se présente également sous forme de plug-in ! vscode implémente le plug-in déchafaudage

.

Ci-dessous présente comment l'installer et l'utiliser, ainsi que les principes de mise en œuvre.

Installez et utilisez

vscode pour installer le plug-in lowcode Ce plug-in est un outil efficace. L'échafaudage n'est qu'une de ses fonctions. Pour plus de fonctions, veuillez consulter le Document. ne parle que d'échafaudages. [Apprentissage recommandé : "Tutoriel d'introduction au vscode"]

Une fois le plug-in installé, ouvrez l'interface d'échafaudage, les étapes sont les suivantes :

Léchafaudage se présente également sous forme de plug-in ! vscode implémente le plug-in déchafaudage

Vous pouvez directement utiliser l'échafaudage partagé, cochez l'option et créez-le directement :

Léchafaudage se présente également sous forme de plug-in ! vscode implémente le plug-in déchafaudage

Créez un échafaudage

Créez le fichier lowcode.scaffold.config.json dans le répertoire racine du projet modèle et ajoutez .ejs code> au fichier qui doit être remplacé dynamiquement. <code>lowcode.scaffold.config.json 文件,将需要做内容动态替换的文件加上 .ejs 后缀。

ejs 语法:

https://ejs.bootcss.com/

Léchafaudage se présente également sous forme de plug-in ! vscode implémente le plug-in déchafaudage

配置

一个完整 lowcode.scaffold.config.json 配置:

{
	"formSchema": {
		"schema": {
			"type": "object",
			"ui:displayType": "row",
			"ui:showDescIcon": true,
			"properties": {
				"port": {
					"title": "监听端口",
					"type": "string",
					"props": {},
					"default": "3000"
				},
				"https": {
					"title": "https",
					"type": "boolean",
					"ui:widget": "switch"
				},
				"lint": {
					"title": "eslint + prettier",
					"type": "boolean",
					"ui:widget": "switch",
					"default": true
				},
				"noREADME": {
					"title": "移除README文件",
					"type": "boolean",
					"ui:widget": "switch",
					"ui:width": "100%",
					"ui:labelWidth": 0,
					"ui:hidden": "{{rootValue.emptyREADME === true}}",
					"default": false
				},
				"emptyREADME": {
					"title": "空README文件",
					"type": "boolean",
					"ui:widget": "switch",
					"ui:hidden": "{{rootValue.noREADME === true}}"
				}
			},
			"labelWidth": 120,
			"displayType": "row"
		},
		"formData": {
			"port": 3000,
			"https": false,
			"lint": true,
			"noREADME": false,
			"emptyREADME": false
		}
	},
	"excludeCompile": ["codeTemplate/", "materials/"],
	"conditionFiles": {
		"noREADME": {
			"value": true,
			"exclude": ["README.md.ejs"]
		},
		"lint": {
			"value": false,
			"exclude": [".eslintrc.js", ".prettierrc.js"]
		}
	}
}
Copier après la connexion

formSchema

formSchema.schemax-render 表单设计器 导出的的 schema,会根据 schema 构建出表单界面,formSchema.formData 为表单默认数据

Léchafaudage se présente également sous forme de plug-in ! vscode implémente le plug-in déchafaudage

创建项目的时候会将表单数据传入 ejs 模板中进行编译。

excludeCompile:配置不需要经过 ejs 编译的文件夹或文件。

conditionFiles:根据表单项的值,在创建项目的时候将某些文件夹或文件删除,比如:

"conditionFiles": {
	"noREADME": {
		"value": true,
		"exclude": ["README.md.ejs"]
	},
	"lint": {
		"value": false,
		"exclude": [".eslintrc.js", ".prettierrc.js"]
	}
}
Copier après la connexion

lint 这个表单项的值为 false 的时候,配置的文件夹或文件 ".eslintrc.js",".prettierrc.js",将会在创建的项目中排除掉。

本地调试脚手架

Léchafaudage se présente également sous forme de plug-in ! vscode implémente le plug-in déchafaudage

参考项目

https://github.com/lowcode-scaffold/lowcode-mock

发布脚手架

将脚手架提交到 git 仓库,注意开放项目的公开访问权限。

使用脚手架

直接使用 git 仓库地址

Léchafaudage se présente également sous forme de plug-in ! vscode implémente le plug-in déchafaudage

注意使用 clone 地址,支持指定分支,比如 -b master https://github.com/lowcode-scaffold/lowcode-mock.git,内部私有仓库也可以使用

Léchafaudage se présente également sous forme de plug-in ! vscode implémente le plug-in déchafaudage

分享到模板列表中快速创建

Léchafaudage se présente également sous forme de plug-in ! vscode implémente le plug-in déchafaudage

修改 仓库index.json

syntaxe ejs : 🎜🎜https://ejs.bootcss.com/🎜
🎜Léchafaudage se présente également sous forme de plug-in ! vscode implémente le plug-in déchafaudage🎜🎜🎜Configuration🎜🎜🎜Un complet configuration lowcode.scaffold.config.json : 🎜
export const downloadScaffoldFromGit = (remote: string) => {
  fs.removeSync(tempDir.scaffold);
  execa.sync(&#39;git&#39;, [&#39;clone&#39;, ...remote.split(&#39; &#39;), tempDir.scaffold]);
  fs.removeSync(path.join(tempDir.scaffold, &#39;.git&#39;));
  if (
    fs.existsSync(path.join(tempDir.scaffold, &#39;lowcode.scaffold.config.json&#39;))
  ) {
    return fs.readJSONSync(
      path.join(tempDir.scaffold, &#39;lowcode.scaffold.config.json&#39;),
    );
  }
  return {};
};
Copier après la connexion
Copier après la connexion
🎜formSchema : 🎜🎜formSchema.schema pour concepteur de formulaire x-render🎜 Le schéma exporté construira une interface de formulaire basée sur le schéma, < code >formSchema.formData sont les données par défaut du formulaire🎜🎜Léchafaudage se présente également sous forme de plug-in ! vscode implémente le plug-in déchafaudage🎜🎜Lors de la création d'un projet, les données du formulaire seront transmises au modèle ejs pour compilation. 🎜🎜excludeCompile : configurez les dossiers ou fichiers qui n'ont pas besoin d'être compilés par ejs. 🎜🎜conditionFiles : Supprimez certains dossiers ou fichiers lors de la création d'un projet en fonction de la valeur de l'élément de formulaire, tels que : 🎜
export const compileScaffold = async (model: any, createDir: string) => {
  if (
    fs.existsSync(path.join(tempDir.scaffold, &#39;lowcode.scaffold.config.json&#39;))
  ) {
    const config = fs.readJSONSync(
      path.join(tempDir.scaffold, &#39;lowcode.scaffold.config.json&#39;),
    );
    const excludeCompile: string[] = config.excludeCompile || [];
    if (config.conditionFiles) {
      Object.keys(model).map((key) => {
        if (
          config.conditionFiles[key] &&
          config.conditionFiles[key].value === model[key] &&
          Array.isArray(config.conditionFiles[key].exclude)
        ) {
          config.conditionFiles[key].exclude.map((exclude: string) => {
            fs.removeSync(path.join(tempDir.scaffold, exclude));
          });
        }
      });
    }
    await renderEjsTemplates(model, tempDir.scaffold, excludeCompile);
    fs.removeSync(path.join(tempDir.scaffold, &#39;lowcode.scaffold.config.json&#39;));
  }
  fs.copySync(tempDir.scaffold, createDir);
};
Copier après la connexion
Copier après la connexion
🎜Lorsque la valeur de lint cet élément de formulaire Lorsqu'il est false, les dossiers ou fichiers configurés ".eslintrc.js" et ".prettierrc.js" seront exclus du projet créé. 🎜🎜🎜Échafaudage de débogage local🎜🎜🎜Léchafaudage se présente également sous forme de plug-in ! vscode implémente le plug-in déchafaudage🎜🎜🎜Projet de référence🎜🎜
🎜https ://github.com/lowcode-scaffold/lowcode-mock🎜

Publiez l'échafaudage🎜🎜Soumettez l'échafaudage au référentiel git et faites attention à l'accès public droits du projet ouvert. 🎜

Utiliser l'échafaudage🎜🎜🎜Utiliser directement l'adresse de l'entrepôt git🎜🎜🎜Léchafaudage se présente également sous forme de plug-in ! vscode implémente le plug-in déchafaudage🎜
🎜Faites attention à l'utilisation de adresse de clonage, prise en charge de la spécification de branches, telles que -b master https://github.com/lowcode-scaffold/lowcode-mock.git, des entrepôts privés internes peuvent également être utilisés🎜
🎜Léchafaudage se présente également sous forme de plug-in ! vscode implémente le plug-in déchafaudage🎜🎜🎜< span style="max-width:90%">Partager avec la liste de modèles pour une création rapide🎜🎜🎜Léchafaudage se présente également sous forme de plug-in ! vscode implémente le plug-in déchafaudage🎜🎜Modifier
Dépôt 🎜 Contenu index.json, soumettre PR. 🎜

实现原理

  • 打开 webview 的时候从 cdn 拉取记录了脚手架列表的 json 文件,渲染列表视图。

  • 点击某个脚手架,将脚手架的 git 仓库地址传到插件后台,插件后台根据 git 地址下载模版到临时工作目录,并且读取 lowcode.scaffold.config.json 文件中的 formSchema 返回给 webview。

export const downloadScaffoldFromGit = (remote: string) => {
  fs.removeSync(tempDir.scaffold);
  execa.sync(&#39;git&#39;, [&#39;clone&#39;, ...remote.split(&#39; &#39;), tempDir.scaffold]);
  fs.removeSync(path.join(tempDir.scaffold, &#39;.git&#39;));
  if (
    fs.existsSync(path.join(tempDir.scaffold, &#39;lowcode.scaffold.config.json&#39;))
  ) {
    return fs.readJSONSync(
      path.join(tempDir.scaffold, &#39;lowcode.scaffold.config.json&#39;),
    );
  }
  return {};
};
Copier après la connexion
Copier après la connexion
  • webview 拿到 formSchema 后弹框渲染动态表单,点提交后将动态表单数据以及生成目录等信息传给插件后台。

  • 插件后台拿到表单数据后,到临时目录中根据 conditionFiles 配置删除掉不需要的文件。然后根据表单数据编译所有 ejs 文件,最后将所有文件拷贝到生成目录。

export const compileScaffold = async (model: any, createDir: string) => {
  if (
    fs.existsSync(path.join(tempDir.scaffold, &#39;lowcode.scaffold.config.json&#39;))
  ) {
    const config = fs.readJSONSync(
      path.join(tempDir.scaffold, &#39;lowcode.scaffold.config.json&#39;),
    );
    const excludeCompile: string[] = config.excludeCompile || [];
    if (config.conditionFiles) {
      Object.keys(model).map((key) => {
        if (
          config.conditionFiles[key] &&
          config.conditionFiles[key].value === model[key] &&
          Array.isArray(config.conditionFiles[key].exclude)
        ) {
          config.conditionFiles[key].exclude.map((exclude: string) => {
            fs.removeSync(path.join(tempDir.scaffold, exclude));
          });
        }
      });
    }
    await renderEjsTemplates(model, tempDir.scaffold, excludeCompile);
    fs.removeSync(path.join(tempDir.scaffold, &#39;lowcode.scaffold.config.json&#39;));
  }
  fs.copySync(tempDir.scaffold, createDir);
};
Copier après la connexion
Copier après la connexion

本地调试时,就是在步骤 2 中将选择的文件夹内容或者当前 vscode 打开的项目内容拷贝到临时工作目录。

Léchafaudage se présente également sous forme de plug-in ! vscode implémente le plug-in déchafaudage

下集再说插件其他功能,插件源码:https://github.com/lowcoding/lowcode-vscode

原文地址:https://juejin.cn/post/7080787567192309797

作者:若邪

更多关于VSCode的相关知识,请访问: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 de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment définir les fichiers d'en-tête pour VScode Comment définir les fichiers d'en-tête pour VScode Apr 15, 2025 pm 09:09 PM

Comment définir des fichiers d'en-tête à l'aide du code Visual Studio? Créez un fichier d'en-tête et déclarez les symboles dans le fichier d'en-tête à l'aide du nom du suffixe .h ou .hpp (tels que les classes, les fonctions, les variables) compilez le programme à l'aide de la directive #include pour inclure le fichier d'en-tête dans le fichier source. Le fichier d'en-tête sera inclus et les symboles déclarés sont disponibles.

Quelle configuration de l'ordinateur est requise pour VScode Quelle configuration de l'ordinateur est requise pour VScode Apr 15, 2025 pm 09:48 PM

Vs Code Système Exigences: Système d'exploitation: Windows 10 et supérieur, MacOS 10.12 et supérieur, processeur de distribution Linux: minimum 1,6 GHz, recommandé 2,0 GHz et au-dessus de la mémoire: minimum 512 Mo, recommandée 4 Go et plus d'espace de stockage: Minimum 250 Mo, recommandée 1 Go et plus d'autres exigences: connexion du réseau stable, xorg / wayland (Linux) recommandé et recommandée et plus

Comment résoudre le problème des annotations chinoises VScode deviennent des points d'interrogation Comment résoudre le problème des annotations chinoises VScode deviennent des points d'interrogation Apr 15, 2025 pm 11:36 PM

Comment résoudre le problème que les commentaires chinois dans le code Visual Studio deviennent des points d'interrogation: vérifiez le codage du fichier et assurez-vous qu'il s'agit de "UTF-8 sans bom". Changez la police en une police qui prend en charge les caractères chinois, tels que "Song Style" ou "Microsoft Yahei". Réinstallez la police. Activer le support Unicode. Mettre à niveau VScode, redémarrer l'ordinateur et recréer le fichier source.

Comment utiliser vscode Comment utiliser vscode Apr 15, 2025 pm 11:21 PM

Visual Studio Code (VSCODE) est un éditeur de code Open Source, Open Source et gratuit développé par Microsoft. Il est connu pour son léger, l'évolutivité et le support pour une large gamme de langages de programmation. Pour installer VScode, veuillez visiter le site officiel pour télécharger et exécuter l'installateur. Lorsque vous utilisez VSCODE, vous pouvez créer de nouveaux projets, modifier le code, déboguer le code, naviguer dans les projets, développer VSCODE et gérer les paramètres. VScode est disponible pour Windows, MacOS et Linux, prend en charge plusieurs langages de programmation et fournit diverses extensions via Marketplace. Ses avantages incluent le léger, l'évolutivité, le support linguistique étendu, les fonctionnalités riches et la version

Tutoriel d'utilisation des terminaux VScode Tutoriel d'utilisation des terminaux VScode Apr 15, 2025 pm 10:09 PM

Le terminal intégré VScode est un outil de développement qui permet d'exécuter des commandes et des scripts au sein de l'éditeur pour simplifier le processus de développement. Comment utiliser la borne VScode: ouvrez le terminal avec la touche de raccourci (CTRL / CMD). Entrez une commande ou exécutez le script. Utilisez des raccourcis clavier (tels que Ctrl L pour effacer le terminal). Modifiez le répertoire de travail (comme la commande CD). Les fonctionnalités avancées incluent le mode de débogage, l'achèvement de l'extrait de code automatique et l'historique des commandes interactives.

Commandes communes pour le terminal VScode Commandes communes pour le terminal VScode Apr 15, 2025 pm 10:06 PM

Les commandes communes pour les bornes de code vs incluent: effacer l'écran du terminal (Clear), répertorier le fichier de répertoire (LS) actuel, modifier le répertoire de travail actuel (CD), imprimer le répertoire de travail actuel (PWD), créer un nouveau répertoire (MKDIR), supprimer le répertoire vide (RMDIR), Créer un nouveau fichier (Touch) Supprimer un fichier ou répertoire (RM), copier un fichier ou directif) (mv) afficher le contenu du fichier (CAT) Affichage du contenu du fichier et défiler (moins) afficher le contenu du fichier Seule défilement (plus) Affichez les premières lignes du fichier (tête)

Où écrire du code dans vscode Où écrire du code dans vscode Apr 15, 2025 pm 09:54 PM

L'écriture de code dans Visual Studio Code (VSCODE) est simple et facile à utiliser. Installez simplement VScode, créez un projet, sélectionnez une langue, créez un fichier, écrivez du code, enregistrez-le et exécutez-le. Les avantages de VSCOD incluent la plate-forme multiplateuse, gratuite et open source, des fonctionnalités puissantes, des extensions riches et des poids légers et rapides.

La commande de terminal vscode ne peut pas être utilisée La commande de terminal vscode ne peut pas être utilisée Apr 15, 2025 pm 10:03 PM

Causes et solutions pour les commandes de borne de code vs non disponibles: les outils nécessaires ne sont pas installés (Windows: WSL; macOS: outils de ligne de commande xcode) Les problèmes de l'autorisation sont mauvais (ajouter des fichiers exécutables aux variables du chemin d'accès) La configuration du terminal corrompu (réinstaller ou mettre à jour) est incompatible (essayez différents types de terminaux ou commandes) des variables d'environnement spécifiques sont manquantes (définir les variables d'environnement nécessaires)

See all articles