Enllaçar un servidor Synology a VS Code a través de la unitat de xarxa

Publicat el per

Enllaçar un servidor Synology a VS Code a través de la unitat de xarxa (S) és una idea excel·lent per treballar directament amb els teus fitxers emmagatzemats al Synology. Aquí tens els passos per fer-ho:

1. Assegura’t que la unitat S està connectada correctament

  • Confirma que pots accedir a la unitat de xarxa S: des de l’Explorador de fitxers de Windows.
  • Comprova que la connexió a la unitat de xarxa Synology sigui estable.

2. Obre la unitat de xarxa des de VS CodeJSON

Obrir carpeta

  • A VS Code, selecciona: File > Open Folder...
File > Open Folder...
  1. Navega fins a la teva unitat S: i selecciona la carpeta que vols editar.
  2. Accés directe al servidor
    • Si estàs treballant amb fitxers PHP, HTML, o qualsevol altre tipus de fitxer:
      • Tria la carpeta que conté els fitxers al servidor i fes clic a Open.

3. Utilitzar extensions per a un flux de treball millorat

Encara que ja pots treballar directament amb la unitat S:, pots instal·lar extensions per optimitzar l’experiència.

Opcions d’extensions útils:

  • “Remote – SSH” (si el teu Synology està configurat per accedir-hi via SSH):
    • Permet connectar-se al servidor Synology mitjançant SSH i editar fitxers remots directament.
    • Configura-ho indicant l’adreça IP i les credencials del Synology.
  • “Live Server”(per veure canvis en directe):
    • Si treballes amb fitxers HTML/CSS/JS, pots executar-los localment des de VS Code amb un servidor en viu.
  • “SFTP” (per a transferir fitxers):
    • Si vols sincronitzar fitxers entre el teu equip i el Synology.

4. Configura permisos si tens problemes d’escriptura

  • Si VS Code no pot guardar els canvis directament a la unitat S::
    • Assegura’t que tens permisos d’escriptura configurats al Synology per a l’usuari que accedeix a aquesta carpeta.
    • Pots modificar els permisos des del DSM (DiskStation Manager) del Synology:
      • Control Panel > Shared Folder > Edit > Permissions.

5. Utilitza “Live Share” o “Live Server”

  • Si vols veure canvis en directe mentre treballes al Synology, pots utilitzar l’extensió Live Server per servir els fitxers a través del navegador:
    • Assegura’t que la carpeta d’inici sigui la teva unitat S:.

Beneficis d’aquesta configuració

  • Treballes directament amb els fitxers del servidor sense haver de descarregar-los ni sincronitzar-los.
  • Comoditat per utilitzar les eines avançades de VS Code, com ara depuradors, extensions i snippets.

Si necessites ajuda per configurar alguna de les extensions o permisos, digues-m’ho i t’hi ajudaré! 😊

a sublime tinc aquesta configuració per .json :{ 
	"S:/0-php/": {
		
		"url_production":"http://81.0.60.36/0-php/"
	}	
}

La configuració JSON que has proporcionat sembla una manera d’enllaçar una ruta local (a la unitat S: del teu servidor Synology) amb una URL pública que apunta a un servidor web en execució. Aquest tipus de configuració és útil quan treballes en un entorn de desenvolupament local i vols veure els resultats al navegador.

Com replicar aquesta configuració a VS Code

Per fer una configuració similar a VS Code, pots utilitzar un fitxer de configuració o una extensió adequada.

1. Configura un fitxer settings.json

  • A VS Code, accedeix a: File > Preferences > Settings
  • Cerca Settings (JSON) i afegeix una configuració similar al fitxer:
{
    "workbench.settings.editor": "json",
    "php.local_server": {
        "root_folder": "S:/0-php/",
        "url_production": "http://81.0.60.36/0-php/"
    }
}

Això et permetrà mantenir la informació d’enllaç entre la ruta local i la URL de producció.

2. Utilitza una extensió per facilitar el desenvolupament

Pots utilitzar extensions per automatitzar o millorar el flux de treball.

Opcions recomanades:
  1. Live Server:
    • Serveix fitxers HTML i PHP localment.
    • Configura-ho per utilitzar S:/0-php/ com a directori arrel.
  2. SFTP:
    • Si vols sincronitzar automàticament fitxers al servidor remot quan edites.
    • Exemple de configuració (sftp.json): { "name": "Synology", "host": "81.0.60.36", "protocol": "ftp", "port": 21, "username": "el_teu_usuari", "password": "la_teva_contrassenya", "remotePath": "/0-php/", "uploadOnSave": true }
  3. Path Autocomplete:
    • Ajuda a treballar amb rutes llargues com S:/0-php/ al VS Code.

3. Afegeix una configuració de tasques personalitzada

Si treballes sovint amb fitxers PHP o HTML, pots configurar tasques al fitxer tasks.json:

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Obre al navegador",
            "type": "shell",
            "command": "start http://81.0.60.36/0-php/",
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }
    ]
}
  • Això crea una tasca que obre la URL de producció directament al navegador.

Beneficis d’aquesta configuració

  • Accés fàcil a la URL de producció des de l’entorn de desenvolupament.
  • Sincronització i edició de fitxers directament al servidor.
  • Automatització del procés amb extensions i tasques personalitzades.

Si tens més preguntes o necessites ajuda amb alguna part de la configuració, avisa’m! 😊