gokayburuc.dev

Neovim'de cdo komutu ve QuickFix List ile Refactoring

Neovim / Vim cdo Komutu

Vim üzerinde QuickFix listeleri ile toplu işlemler yapmak ve birden çok klasör içerisinde refactoring yapmak için, spectre gibi harici plug-in ler kurmadan sadece birkaç satır kod ve basit bir işlemle değişiklik yapabileceğinizi biliyor muydunuz?

Özellikle proje çapında arama ve değiştirme (search & replace) işlemleri yapıyorsanız bu tam size göre bir komuttur.

QuickFixList

Hızlı düzeltme listeleri Vim ve Neovim editörlerde kelime ve metin yakalayıp bunlar üzerinde hızlı değişiklik yapmak üzere tasarlanmış özel yapılardır.

grep , live_grep , ack , sed gibi kelime yakalama komutlarının ekranda döndürdüğü sonuçları CTRL + q tuş kombinasyonu sayesinde düzenlemek üzere bir quickfix listesine aktarabiliriz. Bu noktadan sonra ise cdo ve cfdo gibi komutlar devreye girmektedir.

cdo ve QuickFix Kombinasyonu

Şimdi birden çok html dosyası olan bir proje oluşturalım. Burada amacımız aynı class ya da aynı etikete olan metinleri bulup bu metinleri toplu halde değiştirmektir.

Bir klasör oluşturup içine index.html, about.html ve contact.html dosyaları oluşturalım.

Şimdi hepsinin içeriklerini oluşturalım :

index.html için :

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link href="css/mystyle.css" rel="stylesheet">
</head>

<body>

  <!-- navbar -->
  <navbar>
    <ul>
      <li><a href="home.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="index.html">Index</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </navbar>


  <!-- title -->
  <h1>index page</h1>

  <div class="main-article">
    <p>Test Sayfası</p>
  </div>
</body>

</html>

şimdi de contact.html dosyamıza rastgele içerik oluşturulalım. İçeriklere baktığınızda kasıtlı olarak bazı noktalarda hatalar bıraktım. Kodları yazarken buraları düzelteceğiz.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contact Page</title>
  <link href="css/mystyle.css" rel="stylesheet">
</head>

<body>

  <!-- navbar -->
  <navbar>
    <ul>
      <li><a href="home.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="index.html">Index</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </navbar>


  <!-- title -->
  <h1>Contact</h1>

  <span>
    Contact me!
  </span>


  <div class="main-article">
    <p>Test Sayfası</p>
  </div>

</body>

</html>

Şimdi de son sayfamız olan about.html sayfamızı oluşturalım.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>About</title>
  <link href="css/mystyle.css" rel="stylesheet">
</head>

<body>

  <!-- navbar -->
  <navbar>
    <ul>
      <li><a href="home.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="index.html">Index</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </navbar>


  <!-- title -->
  <h1>About</h1>

  <span>
    About us
  </span>


  <div class="main-article">
    <p>Test Sayfası</p>
  </div>




</body>

</html>

Şimdi de oluşturduğumuz dosyaları telescope.live_grep yardımıyla toplu halde görüntüleyelim. Herhangi bir sayfayı Neovim yardımıyla açtıktan sonra, komut satırına aşağıdaki ifadeyi yazın:

:Telescope live_grep

Şimdi gelen Telescope ekranında main-article isimli class ifadelerini aratalım. 3 adet ifade görüntülendiği esnada CTRL + q tuş kombinasyonuna basarak bulunan sonuçların konumlarını QuickFix listemize atalım.

Şimdi toplu olarak dosya güncellemesi yapmak için : iki nokta üst üste ifadesine basıp ardından aşağıdaki örnek cdo ifadesini oluşturalım:

:cdo s/main-article/greetings/g

Enter tuşuna bastığımız anda QuickFix listemizde yer alan tüm ifadelerde main-article isimli class greetings olarak değiştirilmiştir.

Dosya içinde diğer hata olarak bıraktığım kısım ise css/mystyle.css kısmıydı. Bir css klasörü oluşturup içine style.css isimli bir dosya oluşturalım. Ardından yukarıda yaptığımız adımları tekrarlayarak css/mystyle.css ifadesini css/style.css olarak güncelleyelim.

  1. :Telescope live_grep komutunu çalıştır.
  2. css/mystyle.css ifadesini live_grep ifadesinde ara
  3. CTRL + q ifadesi yardımıyla QuickFix listesine sonuçları aktar.
  4. :cdo s/css\/mystyle.css/css\/style.css/g komutunu çalıştırın (alternatif olarak :cdo s/mystyle.css/style.css/g olarak da güncelleme yapabilirsiniz.)

Bu işlemler sonunda artık tüm dosyalarda css yolu css/style.css olarak güncellenmiştir.

Sonuç ve Değerlendirme

Bu yazımda kısaca :cdo komutu ve QuickFix listelerinin refactoring için nasıl kullanıldığından bahsettim. Yalnızca bu iş için özelleşmiş bir plug-in olan spectre.nvim yardımıyla bu işlemi VSCode'a benzer şekilde de gerçekleştirebilirsiniz. Tabi ki bu da spectre.nvim plug-in 'ini öğrenmeyi gerektiriyor.

Yazıma şimdilik burada son veriyorum. Yeni yazılarda buluşmak dileğiyle...