
🎜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

AI Hentai Generator
Générez AI Hentai gratuitement.

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

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.

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.

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

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.

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.

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

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.

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
