{"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 class=\"wp-block-paragraph\"><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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\"><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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\"><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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">Con el signo &gt;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La sintaxis es<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">nav&gt;a<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 otros lenguajes. Es un editor de c\u00f3digo multiplataforma. Lo podemos llevar portable en una carpeta en nuestro disco duro. Para descargarlo en forma portable lo tenemos que hacer en formato ZIP.<\/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 otros lenguajes. Es un editor de c\u00f3digo multiplataforma. Lo podemos llevar portable en una carpeta en nuestro disco duro. Para descargarlo en forma portable lo tenemos que hacer en formato ZIP.","_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}]}}