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

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

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 afficher des documents Word dans vscode Comment afficher des documents Word dans vscode Comment afficher des documents Word dans vscode Comment afficher des documents Word dans vscode May 09, 2024 am 09:37 AM

Tout d'abord, ouvrez le logiciel vscode sur l'ordinateur, cliquez sur l'icône [Extension] à gauche, comme indiqué en ① sur la figure. Ensuite, entrez [officeviewer] dans la zone de recherche de l'interface d'extension, comme indiqué en ② sur la figure. . Ensuite, dans la recherche, sélectionnez [officeviewer] à installer dans les résultats, comme indiqué dans ③ sur la figure. Enfin, ouvrez le fichier, tel que docx, pdf, etc., comme indiqué ci-dessous.

Comment dessiner un organigramme avec vscode_Comment dessiner un organigramme avec le code visual_studio Comment dessiner un organigramme avec vscode_Comment dessiner un organigramme avec le code visual_studio Apr 23, 2024 pm 02:13 PM

Tout d'abord, ouvrez le code Visual Studio sur l'ordinateur, cliquez sur les quatre boutons carrés à gauche, puis saisissez draw.io dans la zone de recherche pour interroger le plug-in, cliquez sur Installer. Après l'installation, créez un nouveau fichier test.drawio, puis. sélectionnez le fichier test.drawio, entrez dans le mode d'édition sur la gauche. Il y a différents graphiques sur le côté. Vous pouvez dessiner l'organigramme en sélectionnant à volonté, cliquez sur Fichier → Intégrer → svg puis sélectionnez Copier le svg. Collez le code svg copié dans le code html. Ouvrez la page Web html et vous pourrez le voir. Cliquez sur l'image sur la page Web pour accéder à l'organigramme. Sur cette page, vous pouvez zoomer et dézoomer. organigramme. Ici, nous choisissons de cliquer sur le motif de crayon dans le coin inférieur droit pour accéder à la page Web.

Comment écrire Maude en Vscode_Comment écrire Maude en Vscode Comment écrire Maude en Vscode_Comment écrire Maude en Vscode Apr 23, 2024 am 10:25 AM

Tout d'abord, vous pouvez rechercher le plug-in Maude dans le gestionnaire de plug-ins vscode. Ensuite, créez un nouveau fichier avec l'extension maude pour utiliser les extraits de code et la coloration syntaxique de maude. Terminal -> Nouveau terminal peut ouvrir le terminal intégré vscode dans le dossier actuel pour exécuter le programme maude ou full-maude. Dans le tutoriel officiel de Maude, il existe également des exemples de clients http, qui peuvent être appelés et exécutés comme indiqué sur la figure. Si vous souhaitez associer des fichiers à l'extension fm, ouvrez les paramètres, recherchez les associations de fichiers dans les paramètres utilisateur et ouvrez settings.json. Ajoutez simplement une entrée à l'association de fichiers, c'est-à-dire l'entrée de *.fm à maude. Mais plein

Les Chinois de Caltech utilisent l'IA pour renverser les preuves mathématiques ! Accélérer 5 fois a choqué Tao Zhexuan, 80% des étapes mathématiques sont entièrement automatisées Les Chinois de Caltech utilisent l'IA pour renverser les preuves mathématiques ! Accélérer 5 fois a choqué Tao Zhexuan, 80% des étapes mathématiques sont entièrement automatisées Apr 23, 2024 pm 03:01 PM

LeanCopilot, cet outil mathématique formel vanté par de nombreux mathématiciens comme Terence Tao, a encore évolué ? Tout à l'heure, Anima Anandkumar, professeur à Caltech, a annoncé que l'équipe avait publié une version étendue de l'article LeanCopilot et mis à jour la base de code. Adresse de l'article image : https://arxiv.org/pdf/2404.12534.pdf Les dernières expériences montrent que cet outil Copilot peut automatiser plus de 80 % des étapes de preuve mathématique ! Ce record est 2,3 fois meilleur que le précédent record d’Esope. Et, comme auparavant, il est open source sous licence MIT. Sur la photo, il s'agit de Song Peiyang, un garçon chinois.

Comment activer les mises à jour en arrière-plan dans vscode Comment activer les mises à jour en arrière-plan dans vscode Comment activer les mises à jour en arrière-plan dans vscode Comment activer les mises à jour en arrière-plan dans vscode May 09, 2024 am 09:52 AM

1. Tout d'abord, après avoir ouvert l'interface, cliquez sur le menu Fichier dans le coin supérieur gauche. 2. Ensuite, cliquez sur le bouton Paramètres dans la colonne des préférences. 3. Ensuite, dans la page des paramètres qui apparaît, recherchez la section de mise à jour. Enfin, cliquez sur la souris pour le vérifier et l'activer. Téléchargez et installez le nouveau bouton de version de VSCode en arrière-plan sous Windows et redémarrez le programme.

Comment ajouter des fichiers à l'espace de travail vscode Comment ajouter des fichiers à l'espace de travail vscode Comment ajouter des fichiers à l'espace de travail vscode Comment ajouter des fichiers à l'espace de travail vscode May 09, 2024 am 09:43 AM

1. Tout d'abord, ouvrez le logiciel vscode, cliquez sur l'icône de l'explorateur et recherchez la fenêtre de l'espace de travail 2. Ensuite, cliquez sur le menu Fichier dans le coin supérieur gauche et recherchez l'option Ajouter un dossier à l'espace de travail 3. Enfin, recherchez l'emplacement du dossier dans le disque local, cliquez sur le bouton Ajouter

Comment désactiver le fichier de configuration wsl dans vscode Comment désactiver le fichier de configuration wsl dans vscode Comment désactiver le fichier de configuration wsl dans vscode Comment désactiver le fichier de configuration wsl dans vscode May 09, 2024 am 10:30 AM

1. Tout d'abord, ouvrez l'option des paramètres dans le menu des paramètres. 2. Ensuite, recherchez la colonne du terminal dans la page couramment utilisée. 3. Enfin, décochez le bouton usewslprofiles sur le côté droit de la colonne.

Comment définir l'insertion fluide de l'animation dans VScode Tutoriel VScode pour définir l'insertion fluide de l'animation Comment définir l'insertion fluide de l'animation dans VScode Tutoriel VScode pour définir l'insertion fluide de l'animation May 09, 2024 am 09:49 AM

1. Tout d'abord, après avoir ouvert l'interface, cliquez sur l'interface de l'espace de travail 2. Ensuite, dans le panneau d'édition ouvert, cliquez sur le menu Fichier 3. Ensuite, cliquez sur le bouton Paramètres sous la colonne Préférences 4. Enfin, cliquez sur la souris pour vérifier le CursorSmoothCaretAnimation bouton et enregistrez. Il suffit de le définir

See all articles