{"id":413,"date":"2024-05-21T13:18:35","date_gmt":"2024-05-21T11:18:35","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=413"},"modified":"2024-05-21T13:18:35","modified_gmt":"2024-05-21T11:18:35","slug":"vsc-visual-studio-code","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/otros\/vsc-visual-studio-code\/","title":{"rendered":"VSC (Visual Studio Code)"},"content":{"rendered":"\n<p><strong>VSC<\/strong> se ha vuelto uno de los favoritos, no s\u00f3lo para los que desarrollan <strong>Frontend<\/strong>, sino para los programadores de otros lenguajes. Es un editor de c\u00f3digo multiplataforma. Lo podemos llevar <strong>portable<\/strong> en una carpeta en nuestro disco duro. Para descargarlo en forma portable lo tenemos que hacer en formato <strong>ZIP<\/strong>.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">Enlaces<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/code.visualstudio.com\/\">https:\/\/code.visualstudio.com\/<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/emmet.io\/\">https:\/\/emmet.io\/<\/a> (Sitio Oficial <strong>Emmet<\/strong>)<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Interfaz<\/h2>\n\n\n\n<p>Con <strong>Visual Studio Code<\/strong>, con una cuenta de <a href=\"https:\/\/github.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>GitHub<\/strong> <\/a>puedes sincronizar. El comando <strong><em>Buscar y Reemplazar<\/em><\/strong> es muy \u00fatil.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Extensiones<\/h2>\n\n\n\n<p>Cuando pinchamos en alguna extensi\u00f3n, esta trae su propia p\u00e1gina. Las extensiones que recomendamos son las siguientes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Paquete de idioma (te sale por defecto) &#8211; <strong>Spanish Language.<\/strong><\/li>\n\n\n\n<li><strong>Live Server<\/strong>: un servidor para pruebas.<\/li>\n\n\n\n<li><strong>Prettier &#8211; Code formatter<\/strong>: formatea el c\u00f3digo de forma bonita.<\/li>\n\n\n\n<li><strong>ESLint<\/strong>: es un <strong>linter<\/strong> (herramienta que eval\u00faa nuestro c\u00f3digo y que nos crea ciertas ayudas).<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Atajos de teclado<\/h2>\n\n\n\n<p>Los de Windows los encontraremos en la siguiente direcci\u00f3n:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/code.visualstudio.com\/shortcuts\/keyboard-shortcuts-windows.pdf\">https:\/\/code.visualstudio.com\/shortcuts\/keyboard-shortcuts-windows.pdf<\/a><\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Nota<\/strong>: no es necesario memorizar los atajos, con practicar con ellos es m\u00e1s que suficiente.<\/p>\n<\/blockquote>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><em>CTR + +<\/em><\/strong>: Aumenta visualizaci\u00f3n.<\/li>\n\n\n\n<li><strong><em>CTR + &#8211;<\/em><\/strong>: Disminuye visualizaci\u00f3n.<\/li>\n\n\n\n<li><strong><em>CTR + \u00f1<\/em><\/strong>: abre la <strong>Terminal de comandos<\/strong> (abre <strong>Powershel<\/strong> de Windows por defecto). Se puede cambiar la terminal por la que deseemos.<\/li>\n\n\n\n<li><strong><em>CTR + MAY + P<\/em><\/strong>: Mostrar todos los comandos.<\/li>\n\n\n\n<li><strong><em>CTR + P<\/em><\/strong>: Ir al archivo.<\/li>\n\n\n\n<li><strong><em>CTR + MAY + F<\/em><\/strong>: Buscar en archivos.<\/li>\n\n\n\n<li><strong><em>F5<\/em><\/strong>: Iniciar depuraci\u00f3n.<\/li>\n\n\n\n<li><strong><em>CTR + ,<\/em><\/strong>: Configuraci\u00f3n.<\/li>\n\n\n\n<li><strong><em>CTR + S<\/em><\/strong>: Guardar.<\/li>\n<\/ul>\n\n\n\n<p>La manera correcta de abrir proyectos es abriendo carpetas. <strong>Visual Studio Code<\/strong> es una herramienta <strong>drag and drop<\/strong>, por lo que se puede arrastrar la carpeta.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Nota<\/strong>: para abrir un archivo de otro proyecto completamente distinto, es mejor abrir otra ventana de <strong>Visual Studio Code<\/strong>.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Atajos de teclado mas usuales<\/h2>\n\n\n\n<p>Los atajos de teclado que m\u00e1s vamos a utilizar son los siguientes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><em>SHIFT + ALT + FLECHA ARRIBA \/ ABAJO<\/em><\/strong>: duplica elementos.<\/li>\n\n\n\n<li><strong><em>ALT + FLECHA ARRIBA \/ ABJO<\/em><\/strong>: mueve elementos.<\/li>\n\n\n\n<li><strong><em>CTR + F<\/em><\/strong>: activa el buscador.<\/li>\n\n\n\n<li><strong><em>CTR + H<\/em><\/strong>: buscar y reemplazar.<\/li>\n\n\n\n<li><strong><em>CTR + ALT + FLECHA<\/em><\/strong>: edita m\u00faltiples filas. Es equivalente a <strong><em>ALT + CLIC<\/em><\/strong>. Se sale con la tecla de <strong><em>SCAPE<\/em><\/strong><\/li>\n\n\n\n<li><strong><em>ALT + Z<\/em><\/strong>: deshacer cambios.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Cambiar la configuraci\u00f3n<\/h2>\n\n\n\n<p>La ruta para ello es <strong><em>ARCHIVO &gt; FILE &gt; PREFERENCES &gt; CONFIGURATION<\/em><\/strong> o bien <strong><em>CTR + ,<\/em><\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ajuste de linea de texto<\/h2>\n\n\n\n<p>El comando es:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><em>ALT + Z<\/em><\/strong><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Terminal de comandos<\/h2>\n\n\n\n<p>VSC, por defecto toma la <strong>terminal de Windows<\/strong>. Vamos a configuraci\u00f3n y escribimos en el buscador &#8216;<em>Terminal.integrated.defaultprofile<\/em>&#8216;, aqu\u00ed podemos cambiar que terminal queremos utilizar. Podemos tener varias terminales a la vez, haciendo clic en el icono de <strong><em>+<\/em><\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Prettier Code<\/h2>\n\n\n\n<p>Para elegir nuestro formateador por defecto, debemos decirle a nuestro Visual Studio Code cual, para ello en la configuraci\u00f3n escribimos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>defaultForm<\/em><\/li>\n<\/ul>\n\n\n\n<p>Y nos aparecer\u00e1 la pesta\u00f1a que tenemos que cambiar con nuestro <strong>Prettier<\/strong>. Tambi\u00e9n le tenemos que decir al <strong>VSC<\/strong> cuando act\u00faa nuestro <strong>Prettier<\/strong>, para ello escribimos en la configuraci\u00f3n<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>formatOn<\/li>\n<\/ul>\n\n\n\n<p>Y tenemos que clicar<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Format On Paste<\/li>\n\n\n\n<li>Format On Save<\/li>\n\n\n\n<li>Format On Type<\/li>\n<\/ul>\n\n\n\n<p>Y formatear\u00e1 los c\u00f3digos de <strong>HTML<\/strong>, <strong>CSS<\/strong> y <strong>Javascript<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Live Server<\/h2>\n\n\n\n<p>Es un servidor web local de desarrollo. Para levantar un servidor le damos al bot\u00f3n <strong>Go Live<\/strong>. La opci\u00f3n<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>liveServer.settings.donot<\/em><\/li>\n<\/ul>\n\n\n\n<p>y hacemos clic en <strong><em>Donot Verify Tags<\/em><\/strong>, de esta manera, si hay alg\u00fan problema con nuestro c\u00f3digo, el servidor se apagar\u00e1 autom\u00e1ticamente. Existen multitud de alternativas, para configurarlas, vamos a nuestra configuraci\u00f3n de <strong><em>liveServer<\/em><\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Emmet<\/h2>\n\n\n\n<p>Es un <strong>plugin<\/strong> que nos hace una manera m\u00e1s f\u00e1cil de escribir c\u00f3digo <strong>HTML<\/strong>, <strong>Visual Studio Code<\/strong> ya lo tiene integrado. Su web oficial es <a href=\"https:\/\/docs.emmet.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/docs.emmet.io\/<\/a>. En ella podemos ver toda la documentaci\u00f3n acerca de <strong>Emmet<\/strong>. Veamos la sintaxis que tenemos que utilizar para escribir c\u00f3digo con <strong>Emmet<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Creaci\u00f3n de la estructura b\u00e1sica de una p\u00e1gina web<\/h3>\n\n\n\n<p>La sintaxis es:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">html:5\nhtml:xml\n!<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Nodos hijos<\/h3>\n\n\n\n<p>Con el signo &gt;<\/p>\n\n\n\n<p>La sintaxis es<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">nav&gt;a<\/pre>\n\n\n\n<p>y crea una etiqueta &lt;nav&gt; con un enlace.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Nodos hermanos<\/h3>\n\n\n\n<p>Con el signo +<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">div+article+section<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Subir un nivel (nodos padres)<\/h3>\n\n\n\n<pre class=\"wp-block-preformatted\">ul&gt;li&gt;p^li&gt;blockquote<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Generar men\u00fa de navegaci\u00f3n multiplicando<\/h3>\n\n\n\n<pre class=\"wp-block-preformatted\">ul&gt;li*5&gt;a<\/pre>\n\n\n\n<p>El <strong>asterisco<\/strong> es un multiplicador.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Agrupar elementos<\/h3>\n\n\n\n<pre class=\"wp-block-preformatted\">ul&gt;li*3&gt;(p+span)*2<\/pre>\n\n\n\n<p>El <strong>par\u00e9ntesis<\/strong> es agrupaci\u00f3n.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Nombres de ids y de clases<\/h3>\n\n\n\n<p>Se acompa\u00f1a con el <strong>asterisco<\/strong> (#).<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">nav#menu \/ crea un nav con id=\"menu\"\nnav.menu \/ crea un nav con class=\"menu\"\nnav.social#icon \/ crea un nav con un id=\"social\" y clase=\"icon\"\na.btn.bnt-large.otro \/ se han creado varias clases<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Atributos HTML<\/h3>\n\n\n\n<p>Se utilizan los <strong>corchetes cuadrados<\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">a[target=\"_blank\"]*3 \/ Crea 3 a con el atributo target=\"_blank\"<\/pre>\n\n\n\n<p>Si son m\u00e1s atributos se ponen m\u00e1s corchetes separados por un espacio entre ellos.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Generar elementos numerados<\/h3>\n\n\n\n<p>Se utiliza el <strong>s\u00edmbolo de d\u00f3lar<\/strong> ($).<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">ul&gt;li.item-$*10\nul&gt;li.item-$@101*10 \/ Comienza por el n\u00famero 101<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Lorem<\/h3>\n\n\n\n<p>Nos genera un p\u00e1rrafo Lorem Ipsum<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Men\u00fa de navegaci\u00f3n<\/h3>\n\n\n\n<p>Las <strong>llaves<\/strong> sirven para definir el <strong>contenido<\/strong>, al igual que los corchetes sirven para definir los atributos.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">nav#menu&gt;ul&gt;li*5&gt;a{Secci\u00f3n $}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Emmet y Javascript<\/h2>\n\n\n\n<p>Para incluir Javascripten nuestro Emmet, tenemos que ir a <strong><em>Include Languages <\/em><\/strong>en <strong>configuracion del VSC<\/strong>. Y ponemos en una casilla <strong>Javascript<\/strong> y en otra <strong>HTML.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>VSC se ha vuelto uno de los favoritos, no s\u00f3lo para los que desarrollan Frontend, sino para los programadores de [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":408,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-413","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"VSC se ha vuelto uno de los favoritos, no s\u00f3lo para los que desarrollan Frontend, sino para los programadores de [&hellip;]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/413","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=413"}],"version-history":[{"count":1,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/413\/revisions"}],"predecessor-version":[{"id":414,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/413\/revisions\/414"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/408"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=413"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}