{"id":140,"date":"2020-12-23T13:17:37","date_gmt":"2020-12-23T13:17:37","guid":{"rendered":"https:\/\/specnext.dev\/es\/?p=140"},"modified":"2022-07-06T11:08:07","modified_gmt":"2022-07-06T10:08:07","slug":"nextbasic-en-visual-studio-code-con-cspect","status":"publish","type":"post","link":"https:\/\/specnext.dev\/es\/2020\/12\/23\/nextbasic-en-visual-studio-code-con-cspect\/","title":{"rendered":"NextBasic en Visual Studio Code con CSpect"},"content":{"rendered":"\r\n<h5>Este es un extracto del art\u00edculo originariamente publicado en mi web <a href=\"https:\/\/lacavernainformatica.com\">lacavernainformatica.com<\/a><\/h5>\r\n<p>Si hab\u00e9is seguido alguno de los tutoriales o hab\u00e9is acabado aqu\u00ed buscando por Internet, en esta entrada vamos a tratar una Extensi\u00f3n desarrollada por\u00a0<a href=\"https:\/\/marketplace.visualstudio.com\/publishers\/remysharp\">Remy Sharp<\/a>\u00a0que nos va a facilitar la vida bastante para todos los que queremos desarrollar proyectos en NextBasic para nuestro Zx Spectrum Next.<\/p>\r\n<p>Bueno, pues aunque el editar directamente desde el Next, o en su defecto desde un emulador, tiene su aire nost\u00e1lgico y viejuno, hay que reconocer que cuando uno tiene entre manos un proyecto de cierta entidad o simplemente quiere reordenar ese c\u00f3digo que se ha ido creando de manera descontrolada no nos lo pone f\u00e1cil.<\/p>\r\n<p>\u00a0<\/p>\r\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-468 aligncenter\" src=\"https:\/\/lacavernainformatica.com\/wp-content\/uploads\/EditorNext.png\" alt=\"\" width=\"958\" height=\"768\" \/><\/figure>\r\n<p>\u00a0<\/p>\r\n<p>Si nos fijamos en este c\u00f3digo de ejemplo, el programa aproximadamente tiene ya unas 220 l\u00edneas, podemos darnos cuenta que evidentemente no tenemos ning\u00fan color que nos facilite la identificaci\u00f3n de comandos. Pero una de las cosas que quiz\u00e1 mas me fastidian es que no podemos justificar el texto para separar visualmente los distintos niveles de ejecuci\u00f3n, como se puede ver en este caso.<\/p>\r\n<p>\u00a0<\/p>\r\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-469 aligncenter\" src=\"https:\/\/lacavernainformatica.com\/wp-content\/uploads\/SinJustificacionNextbasicpng.png\" alt=\"\" width=\"768\" height=\"432\" \/><\/figure>\r\n<p>\u00a0<\/p>\r\n<p>No me dig\u00e1is que no ser\u00eda mas claro poder justificar el contenido del Procedimiento, as\u00ed como su bucle posterior\u2026 Y ya por \u00faltimo, y quiz\u00e1 yo creo que una de las principales razones por las que finalmente me he decantado totalmente por el editor de Remy, es cuando toca retocar c\u00f3digo y poner orden. En el Next es una puta locura y como te equivoques te cepillas unas l\u00ednea en menos que canta un gallo. El poder seleccionar l\u00edneas y copiarlas, realizar b\u00fasquedas de elementos, realizar reemplazos, en fin, todo lo que un editor de notas actual tiene, pues se echa en falta. Bueno pues para dar soluci\u00f3n a todos estos problemas y sin mas dilaci\u00f3n os presento a la Extensi\u00f3n de NextBasic para Visual Studio Code.<\/p>\r\n<p>\u00a0<\/p>\r\n<div class=\"wp-block-image is-style-default\">\r\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=remysharp.nextbasic\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-471 aligncenter\" src=\"https:\/\/lacavernainformatica.com\/wp-content\/uploads\/Es%C2%A1xtension.png\" alt=\"\" width=\"807\" height=\"301\" \/><\/a><\/figure>\r\n<\/div>\r\n<p>\u00a0 Para poder hacer uso de ella vamos a necesitar solo dos cosas.<\/p>\r\n<p>-Visual Studio Code<\/p>\r\n<p>-Emulador Cspect<\/p>\r\n<p>\u00a0<\/p>\r\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-472 aligncenter\" src=\"https:\/\/lacavernainformatica.com\/wp-content\/uploads\/VisualStudioCore.png\" alt=\"\" width=\"876\" height=\"676\" \/><\/figure>\r\n<p>\u00a0<\/p>\r\n<p>El Visual Studio Code, es una editor de c\u00f3digo ampliable mediante extensiones, mas b\u00e1sico que el famoso Visual Studio, pero no por ellos menos potente para ciertos proyectos. De hecho, su simplicidad para m\u00ed es una de sus principales ventajas.<\/p>\r\n<p>Bueno pues esto tiene poca ciencia, simplemente pinchar en el enlace y una vez descargado instalarlo.<\/p>\r\n<p style=\"text-align: center\"><a href=\"https:\/\/code.visualstudio.com\/\">https:\/\/code.visualstudio.com\/<\/a><\/p>\r\n<p>Bueno ya tenemos lo primero. Ahora vamos por el emulador de Cspect.<\/p>\r\n<p>La extensi\u00f3n necesita el emulador para que podamos ejecutar nuestro c\u00f3digo de una manera sencilla, como si ejecut\u00e1ramos RUN dentro de nuestro Next. Para ello vamos a necesitar bajarnos, lo primero el emulador.<\/p>\r\n<blockquote>\r\n<figure class=\"wp-block-pullquote\"><em>Nota: Actualmente parece que hay un problema con las nuevas versiones de Cspect, ya que son detectadas por los antivirus, Chrome, etc\u2026 como software da\u00f1ino. As\u00ed que yo por ahora estoy usando la \u00faltima versi\u00f3n que no presenta dichas alertas que a d\u00eda de hoy es la 2.12.34.<\/em><\/figure>\r\n<\/blockquote>\r\n<p style=\"text-align: center\"><a href=\"http:\/\/www.javalemmings.com\/public\/zxnext\/CSpect2_12_34.zip\">http:\/\/www.javalemmings.com\/public\/zxnext\/CSpect2_12_34.zip<\/a><\/p>\r\n<p>Y por su puesto tambi\u00e9n es necesario una imagen del sistema del Zx Spectrum Next.<\/p>\r\n<p>Os las pod\u00e9is descargar desde aqu\u00ed con el tama\u00f1o que prefir\u00e1is y descomprimirlo todo en la ruta donde hay\u00e1is extra\u00eddo el CSpect.<\/p>\r\n<p style=\"text-align: center\"><a href=\"http:\/\/www.zxspectrumnext.online\/cspect\/index.html\">http:\/\/www.zxspectrumnext.online\/cspect\/index.html<\/a><\/p>\r\n<p>Finalmente tendremos que tener los siguientes ficheros en nuestra carpeta del CSpect.<\/p>\r\n<div class=\"wp-block-image is-style-default\">\r\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-474 aligncenter\" src=\"https:\/\/lacavernainformatica.com\/wp-content\/uploads\/FicherosImagenSDNext.png\" alt=\"\" width=\"202\" height=\"87\" \/><\/figure>\r\n<\/div>\r\n<p>Bueno y ahora simplemente para verificar que todo funciona nos haremos un fichero start.bat para arrancarlo con las opciones que mas os gusten. Vienen indicadas en un Readme.txt dentro de la carpeta de CSpect. Estas son las que yo tengo actualmente.<\/p>\r\n<p>\u00a0<\/p>\r\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-475 aligncenter\" src=\"https:\/\/lacavernainformatica.com\/wp-content\/uploads\/start_bat.png\" alt=\"\" width=\"842\" height=\"156\" \/><\/figure>\r\n<p>\u00a0<\/p>\r\n<p>Y si todo ha ido bien tendr\u00edamos la pantalla de arranque del Zx Spectrum Next.<\/p>\r\n\r\n<p>Por cierto si queremos sonido, no nos queda otra que instalar Openal32:<\/p>\r\n\r\n\r\n\r\n<p style=\"text-align: center\"><a href=\"http:\/\/www.zxspectrumnext.online\/cspect\/openal.zip\">http:\/\/www.zxspectrumnext.online\/cspect\/openal.zip<\/a><\/p>\r\n\r\n<p>Bueno ahora es el turno de hacer lo que realmente hemos venido a hacer, instalar nuestro editor de NextBasic en Visual Studio Code. Para ello tan sencillo como abrir el Visual Studio Code y pinchar en el men\u00fa del lado izquierdo en el icono de las Extensiones.<\/p>\r\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-476 aligncenter\" src=\"https:\/\/lacavernainformatica.com\/wp-content\/uploads\/Extensiones.png\" alt=\"\" width=\"56\" height=\"51\" \/><\/p>\r\n<p>Y simplemente la buscaremos e instalaremos directamente del repositorio del Visual Studio Code.<\/p>\r\n<p>\u00a0<\/p>\r\n<div class=\"wp-block-image is-style-default\">\r\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-477 aligncenter\" src=\"https:\/\/lacavernainformatica.com\/wp-content\/uploads\/NextBasicExtension.png\" alt=\"\" width=\"350\" height=\"173\" \/>\r\n<figcaption><\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n<p>\u00a0<\/p>\r\n<p>Una vez instalada tendremos que configurar ciertos par\u00e1metros y alguna que otra cosita que nos har\u00e1 falta. Vamos con los par\u00e1metros de configuraci\u00f3n de la Extensi\u00f3n.<\/p>\r\n<p>\u00a0<\/p>\r\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-478 aligncenter\" src=\"https:\/\/lacavernainformatica.com\/wp-content\/uploads\/ExtensionSettings.png\" alt=\"\" width=\"532\" height=\"482\" \/><\/figure>\r\n<p>Y se nos abren por fin los campos a rellenar.<\/p>\r\n<p>\u00a0<\/p>\r\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-483 aligncenter\" src=\"https:\/\/lacavernainformatica.com\/wp-content\/uploads\/Configuracion1.png\" alt=\"\" width=\"707\" height=\"507\" \/><\/figure>\r\n<p>\u00a0<\/p>\r\n<p>Bueno el primero es para usar REM o\u00a0<em>;<\/em>\u00a0para los comentarios.<\/p>\r\n<p>El segundo para restringir el n\u00famero de ficheros a copiar a la imagen.<\/p>\r\n<p>El tercero no es m\u00e1s que la ruta donde hayamos descomprimido el CSpect<\/p>\r\n<p>Y el cuarto las opciones para su arranque. Ojo aqu\u00ed no se indica la imagen a usar, es despu\u00e9s.<\/p>\r\n<p>Sigamos.<\/p>\r\n<p>\u00a0<\/p>\r\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-484 aligncenter\" src=\"https:\/\/lacavernainformatica.com\/wp-content\/uploads\/Configuracion2.png\" alt=\"\" width=\"722\" height=\"528\" \/><\/figure>\r\n<p>Bueno aqu\u00ed nos encontramos otro requerimiento que no he mencionado al principio para no liar, pero esto lo arreglamos r\u00e1pido. Simplemente descargamos:\u00a0<\/p>\r\n<p style=\"text-align: center\"><a href=\"http:\/\/uto.speccy.org\/downloads\/hdfmonkey_windows.zip\">http:\/\/uto.speccy.org\/downloads\/hdfmonkey_windows.zip<\/a><\/p>\r\n<p>Lo descomprimimos en la carpeta que nos plazca y a\u00f1adimos la ruta a la variable de entorno del $PATH en nuestro Windows.<\/p>\r\n<p>No voy a entrar en eso, pero por si acaso alguien tiene problemas aqu\u00ed hay un enlace para hacerlo sobre\u00a0<a href=\"https:\/\/answers.microsoft.com\/es-es\/windows\/forum\/windows_10-other_settings\/windows-10-variables-de-entorno-windows-10-version\/703ea5fa-1db4-46da-8ff7-6261140bf58b#:~:text=Haz%20clic%20en%20%22Configuraci%C3%B3n%20avanzada,y%20realizar%20las%20configuraciones%20adecuadas.\" target=\"_blank\" rel=\"noreferrer noopener\">Windows 10<\/a>.<\/p>\r\n<p>En a siguiente opci\u00f3n, que a mi no me gusta particularmente, pod\u00e9is activar para que os genere autom\u00e1ticamente un nuevo n\u00famero de l\u00ednea al pulsar\u00a0<em>Enter<\/em>.<\/p>\r\n<p>En el siguiente campo indicamos donde tenemos alojada la imagen del Next.<\/p>\r\n<p>Y los otros dos son para avisos de errores y consejos durante la escritura de comandos.<\/p>\r\n<p>Una vez todo instalado, el anterior c\u00f3digo lo podremos ver en todo su esplendor.<\/p>\r\n<p>\u00a0<\/p>\r\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-487 aligncenter\" src=\"https:\/\/lacavernainformatica.com\/wp-content\/uploads\/EjemploVisualCode-1024x509.png\" alt=\"\" width=\"1024\" height=\"509\" \/>\r\n<figcaption><br \/>Colorines, Procedimientos claramente identificables, etc.. Una maravilla vamos<\/figcaption>\r\n<\/figure>\r\n<p>Para poder hacer uso de muchos de los comandos que nos facilita la Extensi\u00f3n, tendremos que usar en el men\u00fa <em>View-> Command Palette<\/em> o (Ctrl+Shift+P) y elegir cualquiera de los siguientes comandos.<\/p>\r\n<p>\u00a0<\/p>\r\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-488 aligncenter\" src=\"https:\/\/lacavernainformatica.com\/wp-content\/uploads\/CommandPalette.png\" alt=\"\" width=\"763\" height=\"357\" \/><\/figure>\r\n<p>De todas formas, en el propio instalador de la Extensi\u00f3n de Remy Sharp ten\u00e9is un v\u00eddeo interactivo donde se pueden ver las distintas opciones de edici\u00f3n. \u00a0<\/p>\r\n<p>\u00a0<\/p>\r\n<p>Bueno, pues espero que este mini tutorial de instalaci\u00f3n os haya podido servir de ayuda.<\/p>\r\n<p>\u00a0<\/p>\r\n<p>\u00a1Nos vemos en la pr\u00f3xima!<\/p>","protected":false},"excerpt":{"rendered":"<p>Este es un extracto del art\u00edculo originariamente publicado en mi web lacavernainformatica.com Si hab\u00e9is seguido alguno de los tutoriales o hab\u00e9is acabado aqu\u00ed buscando por Internet, en esta entrada vamos a tratar una Extensi\u00f3n desarrollada por\u00a0Remy Sharp\u00a0que nos va a facilitar la vida bastante para todos los que queremos desarrollar proyectos en NextBasic para nuestro [&hellip;]<\/p>\n","protected":false},"author":14,"featured_media":143,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3,14],"tags":[6,19],"class_list":["post-140","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desarrollo","category-herramientas","tag-nextbasic","tag-visual-studio-code"],"jetpack_featured_media_url":"https:\/\/specnext.dev\/es\/wp-content\/uploads\/sites\/2\/2020\/12\/ImagenDestacada.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/specnext.dev\/es\/wp-json\/wp\/v2\/posts\/140","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/specnext.dev\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/specnext.dev\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/specnext.dev\/es\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/specnext.dev\/es\/wp-json\/wp\/v2\/comments?post=140"}],"version-history":[{"count":11,"href":"https:\/\/specnext.dev\/es\/wp-json\/wp\/v2\/posts\/140\/revisions"}],"predecessor-version":[{"id":154,"href":"https:\/\/specnext.dev\/es\/wp-json\/wp\/v2\/posts\/140\/revisions\/154"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/specnext.dev\/es\/wp-json\/wp\/v2\/media\/143"}],"wp:attachment":[{"href":"https:\/\/specnext.dev\/es\/wp-json\/wp\/v2\/media?parent=140"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/specnext.dev\/es\/wp-json\/wp\/v2\/categories?post=140"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/specnext.dev\/es\/wp-json\/wp\/v2\/tags?post=140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}