One place for hosting & domains

      Cara Menggunakan Integrasi Git di Visual Studio Code


      Pengantar

      Visual Studio Code (VS Code) telah menjadi salah satu editor paling populer untuk pengembangan web. Editor ini memperoleh popularitas demikian banyak berkat fitur bawaannya, termasuk integrasi kontrol sumber, yang dinamai Git. Memanfaatkan kemampuan Git dari dalam VS Code dapat membuat alur kerja Anda lebih efisien dan tangguh.

      Dalam tutorial ini, Anda akan mendalami penggunaan Integrasi Kontrol Sumber di VS Code dengan Git.

      Prasyarat

      Untuk mengikuti tutorial ini, Anda membutuhkan hal berikut ini:

      • Git yang terinstal di mesin Anda. Untuk lebih detail mengenai cara melakukannya, tinjaulah tutorial Memulai dengan Git.
      • Versi terbaru Visual Studio Code yang terinstal di mesin Anda.

      Langkah 1 — Memahami Tab Source Control

      Hal pertama yang perlu dilakukan untuk memanfaatkan integrasi kontrol sumber adalah menginisialisasi proyek sebagai repositori Git.

      Buka Visual Studio Code dan akseslah terminal bawaan. Anda dapat membukanya dengan pintasan keyboard CTRL + ` di Linux, macOS, atau Windows.

      Di terminal, buat direktori untuk proyek baru dan berpindah ke direktori itu:

      • mkdir git_test
      • cd git_test

      Kemudian, buat repositori Git:

      Cara lain untuk melakukannya pada Visual Studio Code adalah dengan membuka tab Source Control (ikon yang terlihat seperti persimpangan jalan) di panel sisi kiri:

      Ikon Source Control

      Selanjutnya, pilih Open Folder:

      Tangkapan layar yang menggambarkan tombol Open Folder

      Ini akan membuka penjelajah berkas Anda ke direktori saat ini. Pilih direktori proyek yang disukai dan klik Open.

      Kemudian, pilih Initialize Repository:

      Tangkapan layar yang menggambarkan tombol Initialize Repository

      Jika Anda memeriksa sistem berkas, Anda akan melihatnya menyertakan direktori .git. Caranya, gunakan terminal untuk menyusuri direktori proyek Anda dan menampilkan daftar semua konten:

      Anda akan melihat direktori .git yang dibuat:

      Output

      Karena repositori telah diinisialisasi, tambahkan berkas bernama index.html.

      Setelah melakukannya, Anda akan melihat berkas baru di panel Source Control ditampilkan dengan huruf U di sebelahnya.** U** singkatan untuk untracked file, artinya berkas yang baru atau telah diubah, tetapi belum ditambahkan ke repositori:

      Tangkapan layar dari berkas tak terlacak dengan indikator huruf U

      Kini Anda dapat mengklik ikon plus (+) melalui daftar berkas index.html untuk melacak berkas menurut repositori.

      Setelah ditambahkan, huruf di sebelah berkas akan berubah menjadi A.A menyatakan berkas baru yang telah ditambahkan ke repositori.

      Untuk menerapkan perubahan, ketikkan pesan penerapan ke kotak masukan di bagian atas panel Source Control. Kemudian, klik ikon centang untuk melakukan penerapan.

      Tangkapan layar dari berkas yang ditambahkan dengan indikator huruf A dan pesan penerapan

      Setelah melakukannya, Anda akan melihat bahwa tidak ada perubahan yang menunggu.

      Selanjutnya, tambahkan sedikit konten ke berkas index.html.

      Anda dapat menggunakan pintasan Emmet untuk menghasilkan kerangka HTML5 di VS Code dengan menekan tombol !, diikuti dengan tombol Tab. Lanjutkan dan tambahkan sesuatu di <body> seperti judul <h1> lalu simpan.

      Di panel kontrol sumber, Anda akan melihat bahwa berkas telah berubah. Huruf M akan ditampilkan di sebelahnya, yang menyatakan bahwa berkas telah dimodifikasi:

      Tangkapan layar dari berkas yang dimodifikasi dengan indikator huruf M

      Untuk latihan, lanjutkan dan terapkan juga perubahan ini.

      Karena kini Anda sudah terbiasa berinteraksi dengan panel kontrol sumber, Anda akan melanjutkan ke menafsirkan indikator gutter.

      Langkah 2 — Menafsirkan Indikator Gutter

      Dalam langkah ini, Anda akan mempelajari sesuatu yang disebut dengan “Gutter” dalam VS Code. Gutter adalah area tipis di sebelah kanan nomor baris.

      Jika Anda telah menggunakan pelipatan kode sebelumnya, ikon maximize dan minimize berada di dalam gutter.

      Mari kita mulai dengan membuat sedikit perubahan pada berkas index.html, misalnya perubahan pada konten dalam tag <h1>. Setelah melakukannya, Anda akan melihat tanda vertikal biru di gutter baris yang Anda ubah. Tanda biru vertikal menunjukkan bahwa baris kode yang bersangkutan telah diubah.

      Sekarang, coba hapus sebuah baris kode. Anda dapat menghapus salah satu baris di bagian <body> dari berkas index.html. Sekarang perhatikan, di gutter ada segitiga merah. Segitiga merah merupakan sebuah baris atau sekelompok baris yang telah dihapus.

      Terakhir, di bawah bagian <body>, tambahkan baris kode baru dan perhatikan bilah hijau. Bilah hijau vertikal menandakan sebuah baris kode yang telah ditambahkan.

      Contoh ini menggambarkan indikator gutter untuk baris yang dimodifikasi, baris yang dihapus, dan baris baru:

      Tangkapan layar dengan contoh tiga tipe indikator gutter

      Langkah 3 — Menjalankan Diff pada Berkas

      VS Code juga memiliki kemampuan untuk menjalankan diff pada berkas. Biasanya, Anda harus mengunduh alat diff terpisah untuk melakukannya, jadi fitur bawaan ini dapat membantu Anda bekerja lebih efisien.

      Untuk melihat diff, buka panel kontrol sumber dan klik ganda berkas yang diubah. Dalam hal ini, klik ganda pada berkas index.html. Anda akan diarahkan ke tampilan umum diff dengan versi berkas saat ini di sebelah kiri dan versi berkas yang diterapkan sebelumnya di sebelah kanan.

      Contoh ini menunjukkan bahwa sebuah baris telah ditambahkan dalam versi saat ini:

      Tangkapan layar dengan contoh tampilan layar belah dari diff

      Langkah 4 — Menggunakan Percabangan

      Dengan berpindah ke bilah bawah, Anda dapat membuat dan berpindah cabang. Jika Anda perhatikan bagian kiri bawah editor, Anda akan melihat ikon kontrol sumber (yang terlihat seperti persimpangan jalan) yang biasanya diikuti dengan master atau nama cabang saat ini.

      Indikator cabang di bilah bawah VS Code yang menampilkan: master

      Untuk membuat cabang, klik nama cabang itu. Menu yang akan muncul memberi Anda kemampuan membuat cabang baru:

      Konfirmasi untuk membuat cabang baru

      Lanjutkan dan buat cabang baru bernama test.

      Sekarang, buat perubahan pada berkas index.html yang menandakan Anda berada di cabang test yang baru, misalnya menambahkan tulisan this is the new test branch.

      Terapkan perubahan itu pada cabang test. Kemudian, klik lagi nama cabang di bagian kiri bawah untuk berpindah kembali ke cabang master.

      Setelah berpindah kembali ke cabang master, Anda akan melihat bahwa tulisan this is the new test branch yang diterapkan pada cabang test tidak ada lagi.

      Langkah 5 — Menggunakan Repositori Jauh

      Tutorial ini tidak akan membahasnya secara mendalam, tetapi melalui panel Source Control, Anda memiliki akses untuk menggunakan repositori jauh. Jika sebelumnya Anda pernah menggunakan repositori jauh, Anda akan melihat perintah yang familier seperti pull, sync, publish, stash, dll.

      Langkah 6 — Menginstal Ekstensi Berguna

      VS Code tidak hanya dilengkapi dengan banyak fungsionalitas bawaan untuk Git, juga ada beberapa ekstensi yang sangat populer untuk menambahkan fungsionalitas tambahan.

      Git Blame

      Ekstensi ini menyediakan kemampuan untuk melihat informasi Git Blame di bilah status baris yang dipilih saat ini.

      Mungkin terdengar merepotkan, tetapi jangan khawatir, ekstensi Git Blame hanyalah masalah kepraktisan, bukan menyulitkan. Pemikiran “menyalahkan” (blame) orang lain karena perubahan kode jauh dari niat mempermalukannya, melainkan agar mengetahui kepada siapa sebaiknya menanyakan potongan kode tertentu.

      Seperti yang Anda lihat di tangkapan layar, ekstensi ini menyediakan pesan singkat menyangkut baris kode saat ini yang sedang Anda kerjakan di bilah alat bawah yang menjelaskan siapa yang melakukan perubahan dan kapan diubah.

      Git Blame di bilah alat bawah

      Git History

      Meskipun Anda dapat melihat perubahan saat ini, menjalankan diff, dan mengelola cabang dengan fitur bawaan di VS Code, alat ini tidak memberikan gambaran mendalam mengenai riwayat Git Anda. Ekstensi Git History mengatasi masalah itu.

      Seperti yang dapat Anda lihat pada gambar di bawah, ekstensi ini memungkinkan Anda untuk mendalami secara menyeluruh tentang riwayat berkas, penulisnya, cabang, dll. Untuk mengaktifkan jendela Git History di bawah, klik kanan pada berkas dan pilih Git: View File History:

      Hasil ekstensi Git History

      Selain itu, Anda dapat membandingkan cabang dan penerapan, membuat cabang dari penerapan itu, dan banyak lagi.

      Git Lens

      Git Lens banyak menambah kemampuan Git yang disertakan dalam Visual Studio Code. Ini membantu Anda untuk memvisualisasikan secara cepat penulisan kode melalui anotasi Git blame dan lensa kode, menyusuri repositori Git, memperoleh gambaran berharga melalui perbandingan perintah-perintah, dan banyak lagi.

      Ekstensi Git Lens adalah salah satu ekstensi paling populer di komunitas, sekaligus paling andal. Sejauh ini, ekstensi ini dapat menggantikan setiap dua ekstensi sebelumnya dengan fungsionalitasnya.

      Untuk informasi “blame” (menyalahkan), pesan singkat muncul di sebelah kanan baris yang sedang Anda kerjakan untuk memberi tahu siapa yang membuat perubahan, kapan melakukannya, pesan commit yang bersangkutan. Ada beberapa potongan informasi tambahan yang muncul saat menggerakkan kursor di atas pesan ini seperti perubahan kode itu sendiri, rekaman waktu, dan banyak lagi.

      Fungsionalitas Git Blame di Git Lens

      Untuk informasi riwayat Git, ekstensi ini menyediakan banyak fungsionalitas. Anda memiliki akses mudah ke banyak opsi, termasuk menampilkan riwayat berkas, menjalankan diff terhadap versi sebelumnya, membuka revisi tertentu, dan banyak lagi. Untuk membuka berbagai opsi ini, Anda dapat mengklik teks di bilah status bawah yang berisikan penulis yang mengedit baris kode tersebut dan sudah berapa lama mengeditnya.

      Hal ini akan membuka jendela berikut:

      Fungsionalitas Git History di Git Lens

      Ekstensi ini dilengkapi fungsionalitas, dan perlu sebentar saja untuk menerapkan semua yang ditawarkannya.

      Kesimpulan

      Dalam tutorial ini, Anda telah mendalami cara menggunakan integrasi kontrol sumber dengan VS Code. VS Code dapat menangani banyak fitur yang sebelumnya mengharuskan Anda mengunduh alat terpisah.



      Source link

      What is Git?


      Git, originally developed by Linus Torvalds in 2005, is an open source, distributed version control system used to track and manage changes within a code repository.

      Using Git, developers can modify code in parallel and track changes over time, reduce code conflicts and increase workflow efficiency among developers of the same application.

      To learn more about Git, visit:

      An introductory series on working with open-source projects through Git.

      A complete list of resources on Git can be found on our Git page.



      Source link

      Cómo usar la integración Git en Visual Studio Code


      Introducción

      Visual Studio Code (VS Code) se ha convertido en uno de los editores más populares que existen para el desarrollo web. Ha conseguido tanta popularidad gracias a sus muchas funciones integradas, incluyendo la integración del Control de código fuente, es decir, con Git. Aprovechar el poder de Git desde VS Code puede hacer que su flujo de trabajo sea más eficiente y robusto.

      En este tutorial, explorará usar la Integración del Control de código fuente con VS Code con Git.

      Requisitos previos

      Para completar este tutorial, necesitará lo siguiente:

      Paso 1: Familiarizarse con la pestaña Control de código fuente

      Lo primero que debe hacer para aprovechar la integración del Control de código fuente es iniciar un proyecto como repositorio Git.

      Abra Visual Studio Code y acceda al terminal integrado. Puede abrirlo usando el atajo de teclado CTRL +` en Linux, macOS o Windows.

      En su terminal, cree un directorio para un nuevo proyecto y cambie a ese directorio:

      • mkdir git_test
      • cd git_test

      A continuación, cree un repositorio Git:

      Otra forma de conseguir esto con Visual Studio Code es abriendo la pestaña Control de código fuente (el icono parece una brecha en la carretera) en el panel izquierdo:

      Icono de Control de código fuente

      A continuación, seleccione Abrir carpeta:

      Captura de pantalla que representa el botón Abrir carpeta

      Esto abrirá su explorador de archivos al directorio actual. Seleccione el directorio de proyecto preferido y haga clic en Abrir.

      A continuación, seleccione Iniciar repositorio:

      Captura de pantalla que representa el botón Iniciar repositorio

      Si ahora comprueba su sistema de archivos, verá que incluye un directorio .git. Para hacer esto, use el terminal para navegar al directorio de su proyecto y liste todo su contenido:

      Verá el directorio .git que se creó:

      Output

      Ahora que se ha iniciado el repositorio, añada un archivo llamado index.html.

      Tras hacer eso, verá en el panel Control de código fuente que su nuevo archivo se muestra con la letra U junto a él. U significa archivo sin seguimiento (untracked file), lo que significa que es nuevo o se ha cambiado, pero aún no ha sido añadido al repositorio:

      Captura de pantalla de un archivo sin seguimiento con el indicador de letra U

      Ahora puede hacer clic en el icono plus (+) junto al listado de archivos index.html para que el repositorio realice un seguimiento del archivo.

      Una vez añadido, la letra junto al archivo cambiará a una A. A indica un nuevo archivo que se añadió al repositorio.

      Para confirmar sus cambios, escriba un mensaje commit en el cuadro de entrada en la parte superior del panel Control de código fuente. A continuación, haga clic en el icono check para realizar la confirmación.

      Captura de pantalla de un archivo añadido con el indicador de letra A y el mensaje de confirmación

      Tras hacerlo, observará que no hay cambios pendientes.

      A continuación, añada un poco de contenido a su archivo index.html.

      Puede usar un atajo Emmet para generar un esqueleto HTML5 en VS Code pulsando la tecla ! seguida de la tecla Tab. Añada algo en el <body> como un encabezado <h1> y guárdelo.

      En el panel de control de código fuente, verá que su archivo ha cambiado. Mostrará la letra M junto a él, que representa un archivo que se ha modificado.

      Captura de pantalla de un archivo modificado con el indicador de letra M

      Para practicar, confirme también este cambio.

      Ahora que está familiarizado con la interacción con el panel de código fuente, pasará a interpretar los indicadores de margen.

      Paso 2: Interpretar indicadores de margen

      En este paso, echará un vistazo a lo que se denomina el “margen” en VS Code. El margen es el área muy delgada a la derecha del número de línea.

      Si ha usado code folding antes, los iconos maximize y minimize están en el margen.

      Vamos a comenzar realizando un pequeño cambio en su archivo index.html, como un cambio en el contenido en la etiqueta <h1>. Tras hacerlo, observará una marca vertical azul en el margen de la línea que ha cambiado. La marca azul vertical significa que la línea correspondiente de código ha cambiado.

      Ahora, intente eliminar una línea de código. Puede eliminar una de las líneas en la sección <body> de su archivo index.html. Observe que en el margen ahora hay un triángulo rojo. El triángulo rojo significa una línea o grupo de líneas que se han eliminado.

      Finalmente, en la parte inferior de su sección <body>, añada una nueva línea de código y observe la barra verde. La barra verde vertical significa una línea de código que se ha añadido.

      Este ejemplo muestra indicadores de margen para una línea modificada, una línea eliminada y una nueva línea:

      Captura de pantalla con ejemplos de tres tipos de indicadores de margen

      Paso 3: Diferenciar archivos

      VS Code también tiene la capacidad de realizar un diff sobre un archivo. Normalmente, tendría que descargar una herramienta diff independiente para hacer esto, de forma que esta función integrada puede ayudarle a trabajar de forma más eficiente.

      Para ver un diff, abra el panel de control del código fuente y haga doble clic en un archivo cambiado. En este caso, haga doble clic en el archivo index.html. Se lo dirigirá a una vista diff normal con la versión actual del archivo a la izquierda y la versión previamente confirmada del archivo a la derecha.

      Este ejemplo muestra que se ha añadido una línea en la versión actual:

      Captura de pantalla con un ejemplo de una vista de pantalla dividida de un diff

      Paso 4: Trabajar con ramas

      Si se mueve a la barra inferior, tiene la capacidad de crear y cambiar ramas. Si echa un vistazo a la parte inferior izquierda del editor, debería ver el icono control de código fuente (el que parece una división en la carretera) seguido de probablemente el master o el nombre de la rama actualmente en funcionamiento.

      Indicador de rama en la barra inferior de VS Code mostrando: master

      Para crear una rama, haga clic en ese nombre de la rama. Debería aparecer un menú que le da la capacidad para crear una nueva rama:

      Instrucción para crear una nueva rama

      Cree una nueva rama llamada test.

      Ahora, realice un cambio a su archivo index.html que significa que está en la nueva rama test, como añadir el texto this is the new test branch.

      Confirme esos cambios a la rama test. A continuación, haga clic en el nombre de la rama en la parte inferior izquierda de nuevo para volver a la rama master.

      Tras volver a la rama master, observará que el texto this is the new test branch confirmado para la rama test ya no está presente.

      Paso 5: Trabajar con repositorios remotos

      Este tutorial no tratará esto en profundidad, pero a través del panel Control de código fuente tiene acceso para trabajar con los repositorios remotos. Si ha trabajado con un repositorio remoto antes, observará comandos familiares como pull, sync, publish, stash, etc.

      Paso 6: Instalar extensiones útiles

      VS Code no solo cuenta con numerosas funciones integradas para Git, sino que también tiene algunas extensiones muy populares para añadir funciones adicionales.

      Git Blame

      Esta extensión ofrece la capacidad de ver información Git Blame en la barra de estado para la línea seleccionada actualmente.

      Esto puede sonar intimidante, pero no se preocupe, la extensión Git Blame es más sobre funcionalidad, no para hacer que alguien se sienta mal. La idea de “culpar” a alguien por un cambio de código no es para avergonzarlos, sino para averiguar quién es la persona adecuada a quien hacerle preguntas sobre ciertas piezas de código.

      Como puede ver en la captura de pantalla, esta extensión proporciona un mensaje sutil relacionado con la línea de código actual sobre la que está trabajando en la barra de herramientas inferior, explicando quién realizó el cambio y cuándo lo realizó.

      Git Blame en la barra de herramientas inferior

      Git History

      Aunque puede ver los cambios actuales, realizar diffs, y administrar ramas con las funciones integradas en VS Code, no proporciona una vista profunda del historial de Git. La extensión Git History resuelve ese problema.

      Como puede ver en la siguiente imagen, esta extensión le permite explorar de forma exhaustiva el historial de un archivo, un autor concreto, una rama, etc. Para activar la ventana Git History, haga clic con el botón derecho sobre un archivo y seleccione Git: View File History:

      Resultados de la extensión Git History

      Además, puede comparar ramas y confirmaciones, crear ramas a partir de confirmaciones y mucho más.

      Git Lens

      GitLens sobrecarga las capacidades de Git integradas en Visual Studio Code. Lo ayuda a visualizar rápidamente la autoría del código mediante anotaciones de Git Blame y Code Lens, navegar de forma impecable y explorar repositorios de Git, obtener información valiosa mediante potentes comandos comparativos, y mucho más.

      La extensión Git Lens es una de las más populares en la comunidad y también la más potente. En la mayoría de las maneras, puede sustituir a cada una de las dos extensiones anteriores con su funcionalidad.

      Para la información “blame” aparece un mensaje sutil a la derecha de la línea en la que está trabajando actualmente para informarle de quién realizó el cambio, cuándo lo hizo y el mensaje de confirmación asociado. Hay algunos fragmentos adicionales de información que aparecen cuando pasa el ratón sobre este mensaje como el cambio en el código, el sello de tiempo y mucho más.

      Funcionalidad Git Blame en Git Lens

      Para la información del historial de Git, esta extensión proporciona muchas funciones. Tiene acceso fácil a muchas opciones como mostrar el historial de archivos, realizar diffs con versiones anteriores, abrir una revisión específica y mucho más. Para abrir estas opciones, puede hacer clic en el texto en la barra de estado inferior que contiene el autor que editó la línea de código y hace cuánto se editó.

      Esto abrirá la siguiente ventana:

      Funcionalidad Git History en Git Lens

      Esta extensión cuenta con numerosas funciones y tardará un tiempo en aprender todo lo que ofrece.

      Conclusión

      En este tutorial, exploró cómo usar la integración de control de código fuente con VS Code. VS Code puede gestionar muchas funciones que previamente habrían requerido la descarga de una herramienta independiente.



      Source link