Nexa Framework VS Code Extension

Extension officielle pour le support des fichiers .nx dans Visual Studio Code, conçue pour le Nexa Framework.

Fonctionnalités

🎨 Coloration syntaxique

• Support complet de la syntaxe .nx
• Mise en évidence des directives Nexa (@entity, @handler, etc.)
• Coloration des composants (<nx:card>, <nx:button>, etc.)
• Support des expressions réactives ({{ variable }})
• Intégration HTML, CSS et JavaScript

🚀 Autocomplétion intelligente

• Directives Nexa : @entity, @handler, @middleware, @auth, @cache, @validate, @route, @event, @job, @websocket, @graphql
• Composants : <nx:navigation>, <nx:card>, <nx:button>, <nx:form>, <nx:icon>, <nx:modal>
• Attributs de liaison : :value, :class, :style, :href, etc.
• Structures de contrôle : @if, @for, @foreach, @switch

📝 Snippets de code

• Composants prêts à l'emploi :

  • nx-component : Structure de composant complète
  • nx-card : Carte avec titre et contenu
  • nx-button : Bouton interactif
  • nx-form : Formulaire avec validation
  • nx-modal : Modal avec header/body/footer
  • nx-navigation : Barre de navigation

• Directives :

  • nx-entity : Liaison d'entité
  • nx-handler : Gestionnaire de composant
  • nx-route : Définition de route
  • nx-auth : Authentification requise
  • nx-middleware : Application de middleware

• Structures de contrôle :

  • nx-if : Condition if/else
  • nx-for : Boucle for
  • nx-foreach : Boucle foreach
  • nx-switch : Structure switch/case

🔍 Navigation et aperçu

• Symboles de document : Navigation rapide vers les directives
• Aperçu en temps réel : Prévisualisation des composants .nx
• Hover informatif : Documentation contextuelle des directives
• Go-to-definition : Navigation vers les handlers et entités

🛠️ Commandes

• Nexa: Create Component : Créer un nouveau composant .nx
• Nexa: Preview Component : Prévisualiser le composant actuel

Installation

Depuis VS Code Marketplace

1. Ouvrir VS Code
2. Aller dans Extensions (Ctrl+Shift+X)
3. Rechercher "Nexa Framework"
4. Cliquer sur "Install"

Installation manuelle

1. Télécharger le fichier .vsix
2. Ouvrir VS Code
3. Ouvrir la palette de commandes (Ctrl+Shift+P)
4. Taper "Extensions: Install from VSIX"
5. Sélectionner le fichier téléchargé

Développement local

# Cloner le repository
git clone <repository-url>
cd vscode-nx-extension

# Installer les dépendances
npm install

# Compiler l'extension
npm run compile

# Tester l'extension
F5 (dans VS Code)

Utilisation

Créer un composant

1. Clic droit dans l'explorateur de fichiers
2. Sélectionner "Nexa: Create Component"
3. Entrer le nom du composant
4. Le fichier .nx est créé avec un template de base

Exemple de composant .nx

@entity('User')
@handler('UserProfileHandler')
@auth('required')

<nx:card :title="{{ user.name }}">
    <nx:icon :name="user.avatar" :size="64" />
    
    <div class="profile-info">
        <h2>{{ user.name }}</h2>
        <p>{{ user.email }}</p>
        
        @if(user.isOnline)
            <nx:badge :variant="success">En ligne</nx:badge>
        @else
            <nx:badge :variant="secondary">Hors ligne</nx:badge>
        @endif
        
        <nx:button @click="editProfile" :variant="primary">
            Modifier le profil
        </nx:button>
    </div>
</nx:card>

<style>
.profile-info {
    padding: 1rem;
    text-align: center;
}

.profile-info h2 {
    margin: 0.5rem 0;
    color: [#333](https://github.com/nexa-framework/vscode-nx-extension/issues/333);
}
</style>

<script>
export default {
    data() {
        return {
            user: {
                name: 'John Doe',
                email: 'john@example.com',
                avatar: 'user-circle',
                isOnline: true
            }
        };
    },
    
    methods: {
        editProfile() {
            // Logique d'édition du profil
            this.$router.push('/profile/edit');
        }
    }
};
</script>

Configuration

Paramètres VS Code

{
    "nx.autoCompletion.enabled": true,
    "nx.preview.autoRefresh": true,
    "nx.validation.enabled": true,
    "nx.formatting.enabled": true
}

Association de fichiers

L'extension associe automatiquement les fichiers .nx au langage Nexa. Vous pouvez également configurer manuellement :

{
    "files.associations": {
        "*.nx": "nx"
    }
}

Raccourcis clavier

Thèmes supportés

L'extension fonctionne avec tous les thèmes VS Code populaires :

• Dark+ (défaut)
• Light+ (défaut)
• Monokai
• Solarized Dark/Light
• Material Theme
• One Dark Pro

Contribution

Les contributions sont les bienvenues ! Pour contribuer :

1. Fork le repository
2. Créer une branche feature (git checkout -b feature/nouvelle-fonctionnalite)
3. Commit les changements (git commit -am 'Ajouter nouvelle fonctionnalité')
4. Push vers la branche (git push origin feature/nouvelle-fonctionnalite)
5. Créer une Pull Request

Structure du projet

vscode-nx-extension/
├── src/
│   └── extension.ts          # Code principal de l'extension
├── syntaxes/
│   └── nx.tmLanguage.json    # Grammaire de syntaxe
├── snippets/
│   └── nx.json              # Snippets de code
├── language-configuration.json # Configuration du langage
├── package.json             # Métadonnées de l'extension
└── README.md               # Documentation

Roadmap

Version 1.1

• [ ] Validation en temps réel des directives
• [ ] Refactoring automatique
• [ ] Intégration avec le CLI Nexa
• [ ] Support des thèmes personnalisés

Version 1.2

• [ ] Débogage intégré
• [ ] Profiling de performance
• [ ] Tests unitaires intégrés
• [ ] Documentation interactive

Version 2.0

• [ ] Intelligence artificielle pour suggestions
• [ ] Génération automatique de composants
• [ ] Intégration avec les outils de design
• [ ] Support multi-projets

Support

• Documentation : docs.nexaframework.com
• Issues : GitHub Issues
• Discord : Communauté Nexa
• Email : support@nexaframework.com

Licence

MIT License - voir le fichier LICENSE pour plus de détails.

Changelog

v1.0.0 (2024-01-15)

• 🎉 Version initiale
• ✨ Support complet de la syntaxe .nx
• 🚀 Autocomplétion pour directives et composants
• 📝 Snippets de code prêts à l'emploi
• 🔍 Navigation et aperçu des composants
• 🛠️ Commandes de création et prévisualisation

Développé avec ❤️ pour la communauté Nexa Framework