# πŸš€ Guida Installazione Visual Studio Code su Ubuntu 24.04 LTS # πŸ“‹ SPECIFICA PER PROGETTO NETGESCON > **🎯 Guida ottimizzata per il progetto NetGescon su Ubuntu 24.04 LTS** > **πŸ“ VM: NETGESCON-MASTER | Ambiente: Laravel + MySQL + Nginx** ## πŸš€ Script di Installazione Automatica NetGescon ### Installazione VS Code + Estensioni NetGescon (One-Click) ```bash #!/bin/bash # install-vscode-netgescon.sh - Script completo per VS Code + NetGescon echo "πŸš€ Installazione Visual Studio Code per NetGescon" echo "=================================================" # 1. Aggiorna sistema sudo apt update && sudo apt upgrade -y # 2. Installa VS Code tramite repository Microsoft wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg sudo install -o root -g root -m 644 packages.microsoft.gpg /etc/apt/trusted.gpg.d/ sudo sh -c 'echo "deb [arch=amd64,arm64,armhf signed-by=/etc/apt/trusted.gpg.d/packages.microsoft.gpg] https://packages.microsoft.com/repos/code stable main" > /etc/apt/sources.list.d/vscode.list' sudo apt update && sudo apt install -y code # 3. Installa estensioni NetGescon essenziali code --install-extension bmewburn.vscode-intelephense-client code --install-extension onecentlin.laravel5-snippets code --install-extension onecentlin.laravel-blade code --install-extension ryannaddy.laravel-artisan code --install-extension codingyu.laravel-goto-view code --install-extension ms-vscode.vscode-json code --install-extension bradlc.vscode-tailwindcss code --install-extension formulahendry.auto-rename-tag code --install-extension christian-kohler.path-intellisense code --install-extension eamodio.gitlens code --install-extension mhutchie.git-graph code --install-extension ms-vscode-remote.remote-ssh # 4. Configura SSH per accesso remoto sudo systemctl enable ssh && sudo systemctl start ssh sudo ufw allow ssh && sudo ufw enable # 5. Crea configurazione VS Code per NetGescon mkdir -p ~/.config/Code/User cat > ~/.config/Code/User/settings.json << 'EOF' { "workbench.colorTheme": "Default Dark Modern", "workbench.iconTheme": "vs-seti", "editor.fontSize": 14, "editor.tabSize": 4, "editor.insertSpaces": true, "files.autoSave": "afterDelay", "files.autoSaveDelay": 1000, "terminal.integrated.fontSize": 12, "php.suggest.basic": false, "intelephense.files.maxSize": 5000000, "blade.format.enable": true, "laravel_goto_view.folders": { "default": "resources/views", "modules": "Modules/{module}/Resources/views" }, "emmet.includeLanguages": { "blade": "html" }, "files.associations": { "*.blade.php": "blade" } } EOF echo "βœ… Visual Studio Code installato e configurato per NetGescon!" echo "πŸ“ IP VM: $(hostname -I | awk '{print $1}')" echo "πŸ”— Connessione SSH: ssh $(whoami)@$(hostname -I | awk '{print $1}')" ``` ## πŸ“‹ Metodi di Installazione Disponibili ### Metodo 1: Snap Package (Raccomandato - PiΓΉ Semplice) ```bash # Installazione tramite Snap (giΓ  disponibile su Ubuntu) sudo snap install code --classic # Verifica installazione code --version ``` ### Metodo 2: Repository Microsoft Ufficiale (Raccomandato - PiΓΉ Controllo) ```bash # 1. Aggiorna il sistema sudo apt update && sudo apt upgrade -y # 2. Installa prerequisiti sudo apt install -y wget gpg software-properties-common apt-transport-https # 3. Aggiungi la chiave GPG di Microsoft wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg sudo install -o root -g root -m 644 packages.microsoft.gpg /etc/apt/trusted.gpg.d/ sudo sh -c 'echo "deb [arch=amd64,arm64,armhf signed-by=/etc/apt/trusted.gpg.d/packages.microsoft.gpg] https://packages.microsoft.com/repos/code stable main" > /etc/apt/sources.list.d/vscode.list' # 4. Aggiorna i repository e installa VS Code sudo apt update sudo apt install -y code # 5. Verifica installazione code --version ``` ### Metodo 3: Download .deb Package Diretto ```bash # 1. Download del pacchetto .deb cd /tmp wget https://code.visualstudio.com/sha/download?build=stable&os=linux-deb-x64 -O vscode.deb # 2. Installazione sudo dpkg -i vscode.deb # 3. Risolvi eventuali dipendenze mancanti sudo apt-get install -f # 4. Verifica installazione code --version ``` ## πŸ”§ Configurazione Post-Installazione ### 1. Avvio da Terminale ```bash # Avvia VS Code code # Avvia VS Code in una cartella specifica code /path/to/your/project # Avvia VS Code con privilegi sudo (se necessario) sudo code --user-data-dir="/tmp/vscode-root" ``` ### 2. Creazione Collegamento Desktop ```bash # Crea collegamento sul desktop (se non creato automaticamente) cat > ~/Desktop/vscode.desktop << EOF [Desktop Entry] Version=1.0 Type=Application Name=Visual Studio Code Comment=Code Editing. Redefined. Exec=/usr/bin/code Icon=vscode Terminal=false Categories=Development;IDE; MimeType=text/plain;application/x-code-workspace; EOF # Rendi il collegamento eseguibile chmod +x ~/Desktop/vscode.desktop ``` ### 3. Configurazione per Accesso Remoto SSH ```bash # Installa estensione Remote SSH (da fare dentro VS Code) # Extensions -> Cerca "Remote - SSH" -> Installa # Oppure da terminale: code --install-extension ms-vscode-remote.remote-ssh ``` ## 🎯 Estensioni Consigliate per NetGescon ### Estensioni PHP/Laravel Essenziali ```bash # Installa estensioni via comando code --install-extension bmewburn.vscode-intelephense-client code --install-extension onecentlin.laravel5-snippets code --install-extension onecentlin.laravel-blade code --install-extension ryannaddy.laravel-artisan code --install-extension codingyu.laravel-goto-view ``` ### Estensioni Sviluppo Web ```bash code --install-extension ms-vscode.vscode-json code --install-extension bradlc.vscode-tailwindcss code --install-extension formulahendry.auto-rename-tag code --install-extension christian-kohler.path-intellisense code --install-extension streetsidesoftware.code-spell-checker ``` ### Estensioni Git e Collaborazione ```bash code --install-extension eamodio.gitlens code --install-extension mhutchie.git-graph code --install-extension ms-vscode.vscode-git-commit-template ``` ## πŸ” Configurazione per Accesso Remoto ### 1. Configurazione SSH Server (su VM) ```bash # Installa e configura SSH server sudo apt install -y openssh-server # Abilita e avvia SSH sudo systemctl enable ssh sudo systemctl start ssh # Verifica stato sudo systemctl status ssh # Configura firewall sudo ufw allow ssh sudo ufw enable ``` ### 2. Configurazione VS Code Remote ```bash # Sul tuo PC Windows, aggiungi configurazione SSH # File: ~/.ssh/config (o C:\Users\YourName\.ssh\config su Windows) Host netgescon-master HostName IP_DELLA_VM User your_ubuntu_username Port 22 ForwardAgent yes ``` ## 🎨 Configurazione Tema e Interfaccia ### 1. Installazione Temi Popolari ```bash # Tema scuro professionale code --install-extension zhuangtongfa.Material-theme # Tema icon pack code --install-extension PKief.material-icon-theme # Font ligatures (opzionale) code --install-extension tonsky.fira-code ``` ### 2. Configurazione settings.json ```json { "workbench.colorTheme": "Material Theme Darker High Contrast", "workbench.iconTheme": "material-icon-theme", "editor.fontFamily": "'Fira Code', 'Courier New', monospace", "editor.fontLigatures": true, "editor.fontSize": 14, "editor.tabSize": 4, "editor.insertSpaces": true, "files.autoSave": "afterDelay", "files.autoSaveDelay": 1000, "terminal.integrated.fontSize": 12, "php.suggest.basic": false, "intelephense.files.maxSize": 5000000, "blade.format.enable": true } ``` ## πŸš€ Test Installazione Completa ### Script di Test ```bash #!/bin/bash # test-vscode-installation.sh echo "πŸ§ͺ Test Installazione Visual Studio Code" echo "=======================================" # Test 1: Verifica VS Code installato if command -v code &> /dev/null; then echo "βœ… VS Code installato correttamente" echo "πŸ“ Versione: $(code --version | head -n1)" else echo "❌ VS Code non trovato" exit 1 fi # Test 2: Verifica estensioni PHP echo "πŸ” Verifica estensioni PHP..." code --list-extensions | grep -i php > /dev/null if [ $? -eq 0 ]; then echo "βœ… Estensioni PHP trovate" else echo "⚠️ Estensioni PHP non installate" fi # Test 3: Test apertura progetto echo "πŸš€ Test apertura progetto NetGescon..." if [ -d "/var/www/netgescon" ]; then echo "βœ… Directory NetGescon trovata" # code /var/www/netgescon --wait & echo "βœ… VS Code puΓ² aprire il progetto" else echo "⚠️ Directory NetGescon non ancora presente" fi echo "=======================================" echo "πŸŽ‰ Test completato!" ``` ## πŸ”§ Troubleshooting Comuni ### Problema: VS Code non si avvia ```bash # Verifica dipendenze sudo apt update sudo apt install -y libnss3 libgconf-2-4 libxi6 libxrandr2 libxss1 libgconf2-dev libxss-dev libasound2-dev # Reset configurazione rm -rf ~/.config/Code rm -rf ~/.vscode ``` ### Problema: Estensioni non funzionano ```bash # Reinstalla estensioni code --uninstall-extension EXTENSION_ID code --install-extension EXTENSION_ID # Oppure reset completo estensioni rm -rf ~/.vscode/extensions ``` ### Problema: SSH Remote non funziona ```bash # Verifica SSH server sudo systemctl status ssh # Riavvia SSH server sudo systemctl restart ssh # Verifica firewall sudo ufw status sudo ufw allow 22 ``` ## πŸ“± Accesso da Windows ### VS Code su Windows con Remote SSH 1. **Installa VS Code su Windows** (se non giΓ  installato) 2. **Installa estensione Remote-SSH** 3. **Configura connessione SSH** alla VM Ubuntu 4. **Connetti e sviluppa direttamente sulla VM** ### Configurazione SSH da Windows ```powershell # PowerShell su Windows # Genera chiave SSH (se non presente) ssh-keygen -t rsa -b 4096 -C "your_email@example.com" # Copia chiave pubblica sulla VM scp ~/.ssh/id_rsa.pub username@VM_IP:~/.ssh/authorized_keys ``` ## βœ… Checklist Post-Installazione - [ ] VS Code installato e funzionante - [ ] Estensioni PHP/Laravel installate - [ ] Configurazione SSH server attiva - [ ] Test connessione remota OK - [ ] Temi e font configurati - [ ] Settings.json configurato per PHP/Laravel - [ ] Test apertura progetto NetGescon OK - [ ] Backup configurazione VS Code ## 🎯 Prossimi Step dopo Installazione 1. **Installa NetGescon** con lo script setup-netgescon-ubuntu2404.sh 2. **Configura Git** per il versioning 3. **Imposta backup automatici** della configurazione VS Code 4. **Testa workflow** di sviluppo completo --- πŸ“š **Documentazione Aggiuntiva:** - [VS Code Linux Setup](https://code.visualstudio.com/docs/setup/linux) - [Remote SSH Extension](https://code.visualstudio.com/docs/remote/ssh) - [PHP Development in VS Code](https://code.visualstudio.com/docs/languages/php)