{"id":15723,"date":"2024-12-18T20:06:43","date_gmt":"2024-12-18T18:06:43","guid":{"rendered":"https:\/\/www.beseit.net\/?p=15723"},"modified":"2024-12-18T20:33:49","modified_gmt":"2024-12-18T18:33:49","slug":"enllacar-un-servidor-synology-a-vs-code-a-traves-de-la-unitat-de-xarxa","status":"publish","type":"post","link":"https:\/\/www.beseit.net\/?p=15723","title":{"rendered":"Enlla\u00e7ar un servidor Synology a VS Code a trav\u00e9s de la unitat de xarxa"},"content":{"rendered":"\n<p>Enlla\u00e7ar un servidor Synology a <strong>VS Code<\/strong> a trav\u00e9s de la unitat de xarxa (S) \u00e9s una idea excel\u00b7lent per treballar directament amb els teus fitxers emmagatzemats al Synology. Aqu\u00ed tens els passos per fer-ho:<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. Assegura&#8217;t que la unitat S est\u00e0 connectada correctament<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Confirma que pots accedir a la unitat de xarxa <strong>S:<\/strong> des de l&#8217;Explorador de fitxers de Windows.<\/li>\n\n\n\n<li>Comprova que la connexi\u00f3 a la unitat de xarxa Synology sigui estable.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. Obre la unitat de xarxa des de VS Code<\/strong>JSON<\/h3>\n\n\n\n<p><strong>Obrir carpeta<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A <strong>VS Code<\/strong>, selecciona: <code>File &gt; Open Folder...<\/code><\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>File &gt; Open Folder...\n<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Navega fins a la teva unitat <strong>S:<\/strong> i selecciona la carpeta que vols editar.<\/li>\n\n\n\n<li><strong>Acc\u00e9s directe al servidor<\/strong>\n<ul class=\"wp-block-list\">\n<li>Si est\u00e0s treballant amb fitxers PHP, HTML, o qualsevol altre tipus de fitxer:\n<ul class=\"wp-block-list\">\n<li>Tria la carpeta que cont\u00e9 els fitxers al servidor i fes clic a <strong>Open<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. Utilitzar extensions per a un flux de treball millorat<\/strong><\/h3>\n\n\n\n<p>Encara que ja pots treballar directament amb la unitat <strong>S:<\/strong>, pots instal\u00b7lar extensions per optimitzar l&#8217;experi\u00e8ncia.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Opcions d&#8217;extensions \u00fatils:<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>&#8220;Remote &#8211; SSH&#8221; (si el teu Synology est\u00e0 configurat per accedir-hi via SSH):<\/strong>\n<ul class=\"wp-block-list\">\n<li>Permet connectar-se al servidor Synology mitjan\u00e7ant SSH i editar fitxers remots directament.<\/li>\n\n\n\n<li>Configura-ho indicant l&#8217;adre\u00e7a IP i les credencials del Synology.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>&#8220;Live Server&#8221;<\/strong><em>(per veure canvis en directe):<\/em>\n<ul class=\"wp-block-list\">\n<li>Si treballes amb fitxers HTML\/CSS\/JS, pots executar-los localment des de VS Code amb un servidor en viu.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>&#8220;SFTP&#8221; (per a transferir fitxers):<\/strong>\n<ul class=\"wp-block-list\">\n<li>Si vols sincronitzar fitxers entre el teu equip i el Synology.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>4. Configura permisos si tens problemes d&#8217;escriptura<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Si VS Code no pot guardar els canvis directament a la unitat <strong>S:<\/strong>:\n<ul class=\"wp-block-list\">\n<li>Assegura&#8217;t que tens permisos d&#8217;escriptura configurats al Synology per a l&#8217;usuari que accedeix a aquesta carpeta.<\/li>\n\n\n\n<li>Pots modificar els permisos des del <strong>DSM (DiskStation Manager)<\/strong> del Synology:\n<ul class=\"wp-block-list\">\n<li><strong>Control Panel &gt; Shared Folder &gt; Edit &gt; Permissions<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>5. Utilitza &#8220;Live Share&#8221; o &#8220;Live Server&#8221;<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Si vols veure canvis en directe mentre treballes al Synology, pots utilitzar l&#8217;extensi\u00f3 <strong>Live Server<\/strong> per servir els fitxers a trav\u00e9s del navegador:\n<ul class=\"wp-block-list\">\n<li>Assegura&#8217;t que la carpeta d&#8217;inici sigui la teva unitat <strong>S:<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Beneficis d&#8217;aquesta configuraci\u00f3<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Treballes directament amb els fitxers del servidor sense haver de descarregar-los ni sincronitzar-los.<\/li>\n\n\n\n<li>Comoditat per utilitzar les eines avan\u00e7ades de VS Code, com ara depuradors, extensions i snippets.<\/li>\n<\/ul>\n\n\n\n<p>Si necessites ajuda per configurar alguna de les extensions o permisos, digues-m&#8217;ho i t&#8217;hi ajudar\u00e9! ?<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<pre class=\"wp-block-code\"><code>a sublime tinc aquesta configuraci\u00f3 per .json :{ \n\t\"S:\/0-php\/\": {\n\t\t\n\t\t\"url_production\":\"http:\/\/81.0.60.36\/0-php\/\"\n\t}\t\n}<\/code><\/pre>\n\n\n\n<p>La configuraci\u00f3 JSON que has proporcionat sembla una manera d\u2019enlla\u00e7ar una ruta local (a la unitat <strong>S:<\/strong> del teu servidor Synology) amb una URL p\u00fablica que apunta a un servidor web en execuci\u00f3. Aquest tipus de configuraci\u00f3 \u00e9s \u00fatil quan treballes en un entorn de desenvolupament local i vols veure els resultats al navegador.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Com replicar aquesta configuraci\u00f3 a <strong>VS Code<\/strong><\/h3>\n\n\n\n<p>Per fer una configuraci\u00f3 similar a VS Code, pots utilitzar un fitxer de configuraci\u00f3 o una extensi\u00f3 adequada.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>1. Configura un fitxer <code>settings.json<\/code><\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A <strong>VS Code<\/strong>, accedeix a: <code>File &gt; Preferences &gt; Settings<\/code><\/li>\n\n\n\n<li>Cerca <strong>Settings (JSON)<\/strong> i afegeix una configuraci\u00f3 similar al fitxer:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n    \"workbench.settings.editor\": \"json\",\n    \"php.local_server\": {\n        \"root_folder\": \"S:\/0-php\/\",\n        \"url_production\": \"http:\/\/81.0.60.36\/0-php\/\"\n    }\n}\n<\/code><\/pre>\n\n\n\n<p>Aix\u00f2 et permetr\u00e0 mantenir la informaci\u00f3 d\u2019enlla\u00e7 entre la ruta local i la URL de producci\u00f3.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>2. Utilitza una extensi\u00f3 per facilitar el desenvolupament<\/strong><\/h4>\n\n\n\n<p>Pots utilitzar extensions per automatitzar o millorar el flux de treball.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Opcions recomanades:<\/strong><\/h5>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Live Server:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Serveix fitxers HTML i PHP localment.<\/li>\n\n\n\n<li>Configura-ho per utilitzar <strong>S:\/0-php\/<\/strong> com a directori arrel.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>SFTP:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Si vols sincronitzar autom\u00e0ticament fitxers al servidor remot quan edites.<\/li>\n\n\n\n<li>Exemple de configuraci\u00f3 (<code>sftp.json<\/code>): <code>{ \"name\": \"Synology\", \"host\": \"81.0.60.36\", \"protocol\": \"ftp\", \"port\": 21, \"username\": \"el_teu_usuari\", \"password\": \"la_teva_contrassenya\", \"remotePath\": \"\/0-php\/\", \"uploadOnSave\": true }<\/code><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Path Autocomplete:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Ajuda a treballar amb rutes llargues com <strong>S:\/0-php\/<\/strong> al VS Code.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>3. Afegeix una configuraci\u00f3 de tasques personalitzada<\/strong><\/h4>\n\n\n\n<p>Si treballes sovint amb fitxers PHP o HTML, pots configurar tasques al fitxer <code>tasks.json<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n    \"version\": \"2.0.0\",\n    \"tasks\": &#91;\n        {\n            \"label\": \"Obre al navegador\",\n            \"type\": \"shell\",\n            \"command\": \"start http:\/\/81.0.60.36\/0-php\/\",\n            \"group\": {\n                \"kind\": \"build\",\n                \"isDefault\": true\n            }\n        }\n    ]\n}\n<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Aix\u00f2 crea una tasca que obre la URL de producci\u00f3 directament al navegador.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Beneficis d\u2019aquesta configuraci\u00f3<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Acc\u00e9s f\u00e0cil a la URL de producci\u00f3 des de l\u2019entorn de desenvolupament.<\/li>\n\n\n\n<li>Sincronitzaci\u00f3 i edici\u00f3 de fitxers directament al servidor.<\/li>\n\n\n\n<li>Automatitzaci\u00f3 del proc\u00e9s amb extensions i tasques personalitzades.<\/li>\n<\/ul>\n\n\n\n<p>Si tens m\u00e9s preguntes o necessites ajuda amb alguna part de la configuraci\u00f3, avisa\u2019m! ?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Enlla\u00e7ar un servidor Synology a VS Code a trav\u00e9s de la unitat de xarxa (S) \u00e9s una idea excel\u00b7lent per treballar directament amb els teus fitxers emmagatzemats al Synology. Aqu\u00ed tens els passos per fer-ho: 1. Assegura&#8217;t que la unitat &hellip; <a href=\"https:\/\/www.beseit.net\/?p=15723\">Continua llegint <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":8179,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[181],"tags":[],"class_list":["post-15723","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vs-code"],"_links":{"self":[{"href":"https:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/posts\/15723","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.beseit.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=15723"}],"version-history":[{"count":2,"href":"https:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/posts\/15723\/revisions"}],"predecessor-version":[{"id":15731,"href":"https:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/posts\/15723\/revisions\/15731"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/media\/8179"}],"wp:attachment":[{"href":"https:\/\/www.beseit.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15723"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.beseit.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=15723"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.beseit.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=15723"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}