
🎜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🎜
🎜

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🎜🎜🎜
🎜🎜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🎜
🎜
🎜🎜🎜< span style="max-width:90%">Partager avec la liste de modèles pour une création rapide🎜🎜🎜
🎜🎜ModifierDépôt 🎜 Contenu index.json
, soumettre PR. 🎜实现原理

🎜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🎜
🎜

index.json
, soumettre PR. 🎜实现原理



L'échafaudage se présente également sous forme de plug-in ! vscode implémente le plug-in d'échafaudage
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 !
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 :
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 :
Vous pouvez directement utiliser l'échafaudage partagé, cochez l'option et créez-le directement :
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/
配置
一个完整 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"] } } }
formSchema
:
formSchema.schema
为 x-render 表单设计器 导出的的 schema,会根据 schema 构建出表单界面,formSchema.formData
为表单默认数据
创建项目的时候会将表单数据传入 ejs 模板中进行编译。
excludeCompile
:配置不需要经过 ejs 编译的文件夹或文件。
conditionFiles
:根据表单项的值,在创建项目的时候将某些文件夹或文件删除,比如:
"conditionFiles": { "noREADME": { "value": true, "exclude": ["README.md.ejs"] }, "lint": { "value": false, "exclude": [".eslintrc.js", ".prettierrc.js"] } }
当 lint
这个表单项的值为 false
的时候,配置的文件夹或文件 ".eslintrc.js",".prettierrc.js",将会在创建的项目中排除掉。
本地调试脚手架
参考项目
https://github.com/lowcode-scaffold/lowcode-mock
发布脚手架
将脚手架提交到 git 仓库,注意开放项目的公开访问权限。
使用脚手架
直接使用 git 仓库地址
注意使用 clone 地址,支持指定分支,比如
-b master https://github.com/lowcode-scaffold/lowcode-mock.git
,内部私有仓库也可以使用
分享到模板列表中快速创建
修改 仓库 中 index.json
syntaxe ejs : 🎜🎜https://ejs.bootcss.com/🎜🎜

complet configuration lowcode.scaffold.config.json
: 🎜export const downloadScaffoldFromGit = (remote: string) => { fs.removeSync(tempDir.scaffold); execa.sync('git', ['clone', ...remote.split(' '), tempDir.scaffold]); fs.removeSync(path.join(tempDir.scaffold, '.git')); if ( fs.existsSync(path.join(tempDir.scaffold, 'lowcode.scaffold.config.json')) ) { return fs.readJSONSync( path.join(tempDir.scaffold, 'lowcode.scaffold.config.json'), ); } return {}; };
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🎜🎜
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, 'lowcode.scaffold.config.json')) ) { const config = fs.readJSONSync( path.join(tempDir.scaffold, 'lowcode.scaffold.config.json'), ); 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, 'lowcode.scaffold.config.json')); } fs.copySync(tempDir.scaffold, createDir); };
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🎜🎜🎜
🎜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🎜🎜🎜
🎜🎜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🎜
🎜
🎜🎜🎜< span style="max-width:90%">Partager avec la liste de modèles pour une création rapide🎜🎜🎜
🎜🎜ModifierDé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('git', ['clone', ...remote.split(' '), tempDir.scaffold]);
fs.removeSync(path.join(tempDir.scaffold, '.git'));
if (
fs.existsSync(path.join(tempDir.scaffold, 'lowcode.scaffold.config.json'))
) {
return fs.readJSONSync(
path.join(tempDir.scaffold, 'lowcode.scaffold.config.json'),
);
}
return {};
};
Copier après la connexionCopier après la connexionwebview 拿到 formSchema
后弹框渲染动态表单,点提交后将动态表单数据以及生成目录等信息传给插件后台。
插件后台拿到表单数据后,到临时目录中根据 conditionFiles
配置删除掉不需要的文件。然后根据表单数据编译所有 ejs
文件,最后将所有文件拷贝到生成目录。
export const compileScaffold = async (model: any, createDir: string) => {
if (
fs.existsSync(path.join(tempDir.scaffold, 'lowcode.scaffold.config.json'))
) {
const config = fs.readJSONSync(
path.join(tempDir.scaffold, 'lowcode.scaffold.config.json'),
);
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, 'lowcode.scaffold.config.json'));
}
fs.copySync(tempDir.scaffold, createDir);
};
Copier après la connexionCopier après la connexion本地调试时,就是在步骤 2 中将选择的文件夹内容或者当前 vscode 打开的项目内容拷贝到临时工作目录。

下集再说插件其他功能,插件源码: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!

🎜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🎜
🎜

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('git', ['clone', ...remote.split(' '), tempDir.scaffold]); fs.removeSync(path.join(tempDir.scaffold, '.git')); if ( fs.existsSync(path.join(tempDir.scaffold, 'lowcode.scaffold.config.json')) ) { return fs.readJSONSync( path.join(tempDir.scaffold, 'lowcode.scaffold.config.json'), ); } return {}; };
webview 拿到
formSchema
后弹框渲染动态表单,点提交后将动态表单数据以及生成目录等信息传给插件后台。插件后台拿到表单数据后,到临时目录中根据
conditionFiles
配置删除掉不需要的文件。然后根据表单数据编译所有ejs
文件,最后将所有文件拷贝到生成目录。
export const compileScaffold = async (model: any, createDir: string) => { if ( fs.existsSync(path.join(tempDir.scaffold, 'lowcode.scaffold.config.json')) ) { const config = fs.readJSONSync( path.join(tempDir.scaffold, 'lowcode.scaffold.config.json'), ); 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, 'lowcode.scaffold.config.json')); } fs.copySync(tempDir.scaffold, createDir); };
本地调试时,就是在步骤 2 中将选择的文件夹内容或者当前 vscode 打开的项目内容拷贝到临时工作目录。
下集再说插件其他功能,插件源码: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!

Outils d'IA chauds

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

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

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

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 !

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

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

Sujets chauds

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.

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 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.

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

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.

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)

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.

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)
