{"id":1403,"date":"2023-10-05T21:11:55","date_gmt":"2023-10-05T20:11:55","guid":{"rendered":"https:\/\/bitsolto.com\/bitacora\/?p=1403"},"modified":"2023-10-05T22:28:42","modified_gmt":"2023-10-05T21:28:42","slug":"algunhas-cousas-que-pode-que-non-saibas-de-vscode","status":"publish","type":"post","link":"https:\/\/bitsolto.com\/bitacora\/deseno-web\/algunhas-cousas-que-pode-que-non-saibas-de-vscode\/","title":{"rendered":"Algunhas cousas que pode que non saibas de VSCode"},"content":{"rendered":"\n<p>VSCode (ou simplemente Code) \u00e9 unha editor de c\u00f3digo. Unha ferramenta con moita popularidade entres os desenvolvedores.<\/p>\n\n\n\n<p>A pesares da s\u00faa inicial sinxeleza resulta un entorno de traballo moi poderoso e cunha chea de posibilidades. Tantas que as veces non ser\u00e1 f\u00e1cil facerse con todos as\u00ed que aqu\u00ed van algunhas cousas que poida que non co\u00f1ezas de Code e que poden servir para mellorar a t\u00faa entorna de traballo ou para personalizar, ao teu gusto, como se comporta este poderoso editor.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Cursor blinking<\/strong>: O pestanexo do cursor \u00e9 unha axuda para localizar onde o deixaches a \u00faltima vez que escribiches c\u00f3digo no teu proxecto. Podes adaptalo ao teu xeito en <em>Preferences>Settings><\/em>; busca <em>cursor blinking<\/em> \u2192 Proba as opci\u00f3ns e queda co que che guste m\u00e1is.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"563\" height=\"313\" src=\"https:\/\/bitsolto.com\/bitacora\/wp-content\/uploads\/2023\/10\/cursos-blinking.png\" alt=\"\" class=\"wp-image-1404\" srcset=\"https:\/\/bitsolto.com\/bitacora\/wp-content\/uploads\/2023\/10\/cursos-blinking.png 563w, https:\/\/bitsolto.com\/bitacora\/wp-content\/uploads\/2023\/10\/cursos-blinking-300x167.png 300w\" sizes=\"(max-width: 563px) 100vw, 563px\" \/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Cursor animation<\/strong>: Outra axuda para ter localizado o cursor en todo momento podes atopala entrando en <em>Preferences>Settings<\/em> e buscando <em>cursor animation<\/em>.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"665\" height=\"128\" src=\"https:\/\/bitsolto.com\/bitacora\/wp-content\/uploads\/2023\/10\/cursor-animation.png\" alt=\"\" class=\"wp-image-1408\" srcset=\"https:\/\/bitsolto.com\/bitacora\/wp-content\/uploads\/2023\/10\/cursor-animation.png 665w, https:\/\/bitsolto.com\/bitacora\/wp-content\/uploads\/2023\/10\/cursor-animation-300x58.png 300w\" sizes=\"(max-width: 665px) 100vw, 665px\" \/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Linked editing<\/strong>: Seguro que cando editas alg\u00fan documento HTML botas de menos que ao cambiar unha etiqueta a etiqueta de peche non se actualiza de forma autom\u00e1tica. E pode que se che ocorra buscar algunha extensi\u00f3n para solucionalo. Non fai falla. Vai \u00e1s preferencias, e busca <em>linked editing<\/em> e activa a opci\u00f3n. Xa non necesitas ningunha extensi\u00f3n! \ud83d\udc41 <em>O que pode ser bo nunha ocasi\u00f3n pode non ser tan favorable noutras. Por exemplo esta opci\u00f3n pode ser menos \u00fatil en PHP.<\/em> \ud83d\udc41 <em>Para os que usan React: Linked editing funciona en arquivos HTML, pero non en arquivos JSX (TSX). Esta funcionalidade nativa de VSCode non \u00e9 compatible con template literals e strings en js ou outras linguaxes. Neste caso si que ser\u00eda preciso botar man dunha extensi\u00f3n para unha funcionalidade similar adaptada a eses contextos. Por exemplo: Auto Rename Tag.<\/em><\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"663\" height=\"197\" src=\"https:\/\/bitsolto.com\/bitacora\/wp-content\/uploads\/2023\/10\/linked-editing.png\" alt=\"\" class=\"wp-image-1409\" srcset=\"https:\/\/bitsolto.com\/bitacora\/wp-content\/uploads\/2023\/10\/linked-editing.png 663w, https:\/\/bitsolto.com\/bitacora\/wp-content\/uploads\/2023\/10\/linked-editing-300x89.png 300w\" sizes=\"(max-width: 663px) 100vw, 663px\" \/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Bracket Pair Colorization<\/strong>: Outra axuda visual, que che axudar\u00e1 en moitas linguaxes, \u00e9 o poder colorear as chaves que delimitan as sentenzas do teu c\u00f3digo. E tampouco vas precisar instalar ningunha extensi\u00f3n para dito cometido. Vai a <em>Preferences>Settings<\/em> e busca <em>bracket pair<\/em>&#8230; Aqu\u00ed podes activar o coloreo e as gu\u00edas que te indicar\u00e1n onde se abre e pecha a chave onde editas o c\u00f3digo.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"656\" height=\"581\" src=\"https:\/\/bitsolto.com\/bitacora\/wp-content\/uploads\/2023\/10\/bracket-pair.png\" alt=\"\" class=\"wp-image-1410\" srcset=\"https:\/\/bitsolto.com\/bitacora\/wp-content\/uploads\/2023\/10\/bracket-pair.png 656w, https:\/\/bitsolto.com\/bitacora\/wp-content\/uploads\/2023\/10\/bracket-pair-300x266.png 300w\" sizes=\"(max-width: 656px) 100vw, 656px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Breadcrumbs<\/strong>: Ademais das pestanas que indican os arquivos que tes abertos, VSCode engade unha li\u00f1a de migas de pan que indican o cami\u00f1o completo ao mesmo. Se ves que che sobra esta li\u00f1a podes amosala\/agochala en <em>Preferences>Settings<\/em><\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"666\" height=\"106\" src=\"https:\/\/bitsolto.com\/bitacora\/wp-content\/uploads\/2023\/10\/breadcrumbs.png\" alt=\"\" class=\"wp-image-1405\" srcset=\"https:\/\/bitsolto.com\/bitacora\/wp-content\/uploads\/2023\/10\/breadcrumbs.png 666w, https:\/\/bitsolto.com\/bitacora\/wp-content\/uploads\/2023\/10\/breadcrumbs-300x48.png 300w\" sizes=\"(max-width: 666px) 100vw, 666px\" \/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Indentaci\u00f3n no explorador de arquivos<\/strong>: VSCode lista os arquivos do teu proxecto sen ou case sen identar o listado, o que pode resultar pouco efectivo en especial en proxectos moi extensos. Para cambiar isto vai as preferencias e localiza <em>Workbench indent<\/em>, e adapta ao teu gusto a opci\u00f3n <em>Tree: Indent<\/em><\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"671\" height=\"157\" src=\"https:\/\/bitsolto.com\/bitacora\/wp-content\/uploads\/2023\/10\/tree-indent.png\" alt=\"\" class=\"wp-image-1406\" srcset=\"https:\/\/bitsolto.com\/bitacora\/wp-content\/uploads\/2023\/10\/tree-indent.png 671w, https:\/\/bitsolto.com\/bitacora\/wp-content\/uploads\/2023\/10\/tree-indent-300x70.png 300w\" sizes=\"(max-width: 671px) 100vw, 671px\" \/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Render Whitespace<\/strong>: Se queres ver os espazos en branco ou os tabs tanto ao final coma ao principio das li\u00f1as de c\u00f3digo podes habilitar o renderizado do espazo en branco.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"667\" height=\"265\" src=\"https:\/\/bitsolto.com\/bitacora\/wp-content\/uploads\/2023\/10\/reder-whitespace.png\" alt=\"\" class=\"wp-image-1411\" srcset=\"https:\/\/bitsolto.com\/bitacora\/wp-content\/uploads\/2023\/10\/reder-whitespace.png 667w, https:\/\/bitsolto.com\/bitacora\/wp-content\/uploads\/2023\/10\/reder-whitespace-300x119.png 300w\" sizes=\"(max-width: 667px) 100vw, 667px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Atallos de teclado<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Agochar\/amosar o panel lateral: <strong>ctrl + b<\/strong>. Ao traballar no c\u00f3digo pode que necesites m\u00e1is espazo e esta \u00e9 unha maneira r\u00e1pida de dispor de case toda a pantalla para editalo.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>VSCode (ou simplemente Code) \u00e9 unha editor de c\u00f3digo. Unha ferramenta con moita popularidade entres os desenvolvedores. A pesares da s\u00faa inicial sinxeleza resulta un entorno de traballo moi poderoso e cunha chea de posibilidades. Tantas que as veces non ser\u00e1 f\u00e1cil facerse con todos as\u00ed que aqu\u00ed van algunhas cousas que poida que non [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1408,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","omw_enable_modal_window":"enable","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"on","ocean_gallery_id":[],"footnotes":""},"categories":[19,55,26],"tags":[57,56,31],"class_list":["post-1403","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-deseno-web","category-tips","category-webdev","tag-tips","tag-vscode","tag-web","entry","has-media"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/bitsolto.com\/bitacora\/wp-json\/wp\/v2\/posts\/1403","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bitsolto.com\/bitacora\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bitsolto.com\/bitacora\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bitsolto.com\/bitacora\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bitsolto.com\/bitacora\/wp-json\/wp\/v2\/comments?post=1403"}],"version-history":[{"count":2,"href":"https:\/\/bitsolto.com\/bitacora\/wp-json\/wp\/v2\/posts\/1403\/revisions"}],"predecessor-version":[{"id":1412,"href":"https:\/\/bitsolto.com\/bitacora\/wp-json\/wp\/v2\/posts\/1403\/revisions\/1412"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bitsolto.com\/bitacora\/wp-json\/wp\/v2\/media\/1408"}],"wp:attachment":[{"href":"https:\/\/bitsolto.com\/bitacora\/wp-json\/wp\/v2\/media?parent=1403"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bitsolto.com\/bitacora\/wp-json\/wp\/v2\/categories?post=1403"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bitsolto.com\/bitacora\/wp-json\/wp\/v2\/tags?post=1403"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}