Vim'i web geliştirmede ana editör olarak kullandıktan sonra ...
Bir editör seçerken, birçok insan vim'e alay etmek zorundadır, ancak aslında, belirli bir açıdan, farklı bir stil de bulabilirsiniz. Bu makalenin amacı vim kullanmanızı şiddetle tavsiye etmek değil, yazarın web geliştirme projeleri için ana düzenleyici olarak Vim'i kullanma durumu aracılığıyla bazı farklılıkları keşfetmemize izin vermektir.
Yazar | Fidel Sanchez-Bueno
Çevirmen | Crescent Moon, Baş Editör | Tu Min
Üretildi | CSDN (ID: CSDNnews)
Aşağıdaki çeviridir:
Programlamayı öğrenme sürecinde, size en uygun düzenleyiciyi veya IDE'yi seçmek (aşağıdaki düzenleyici her ikisine de atıfta bulunur), her programcının geçeceği bir süreçtir. Benim için yaklaşık 9 yıl önce Python öğrenmeye başladım.Her hafta başka bir editöre geçmeyi hala hatırlıyorum.IDLE ile başladım Daha sonra Boa Constructor, Komodo ve Notepad ++ 'ı denediğimi hatırlıyorum.
En iyi editörü bulma sürecinde, programcılar arasındaki editör savaşlarını öğrenecek ve Vim ve Emacs hakkındaki şakalara gülümseyeceksiniz.
Bu zamanda, Vim veya Emacs öğrenmeye çalışacaksınız ve bundan sonra Alice'in macerası.
Bu makalenin başlığından da görebileceğiniz gibi, tercih ettiğim editörüm Vim, ancak size Vim'i tavsiye etmeyeceğim ve sizi Vim'i kullanmak üzere geliştirme ortamınızı değiştirmek için sayısız saatler harcamaya ikna etmeyeceğim.
Bu makalenin amacı, Vim'i web geliştirme projeleri için ana düzenleyici olarak kullanırken verimliliği artırmak için yaptığım bazı özelleştirmeleri paylaşmaktır.
Web geliştirme için Vim eklentisi
Bir web programcısı olarak, zamanınızın çoğunu HTML, CSS ve JavaScript dosyaları yazmaya harcarsınız.Kişisel tercihlerinize veya proje ihtiyaçlarınıza bağlı olarak, bazı çerçeveler (Angular, Vue veya React gibi) ve babel, webpack, grunt vb. Gibi çeşitli araçlar da kullanabilirsiniz. .
Ben şahsen eklentilerin kullanımını olabildiğince azaltmaya çalışıyorum ve eklentileri yalnızca büyük faydalar sağlayabilecekleri ve iş akışını gerçekten iyileştirebilecekleri durumlarda kullanıyorum.
Şu anda yüklediğim eklentiler aşağıdaki gibidir:
-
Emmet.vim
-
indentline ve vim-jsx-pretty
-
vim-yorum
-
ALE (eslint ve daha güzel)
Emmet.vim
Emmet, yüksek hızlı kod girişi ve düzenleme için mükemmel bir araçtır.Sadece tek bir kod satırı ile tamamen karmaşık bir HTML oluşturabilirsiniz.
indentline ve vim-jsx-pretty
Bu iki eklenti Vim'in görsel stilini geliştirebilir. Indentline, girinti seviyesini göstermek için dikey bir çizgi ekleyebilir, vim-jsx-pretty, ReactJS ve diğer kodları yazmak için çok uygun olan JSX koduna vurgulama ekleyebilir.
vim-yorum
Bu eklenti, bir kod parçasını kolayca yorumlayabilir veya açıklamayı kaldırabilir, yalnızca kodu seçin ve < g-c > Bu kadar.
ALE (eslint ve daha güzel)
ALE (Asynchronous Lint Engine), iş verimliliğini büyük ölçüde artıran linter ve kod değiştirme araçlarını çağırabilir. Bilmeniz gerekmeyen türden bir eklentidir ve onu kullanmaktan asla pişman olmazsınız. ALE'yi esas olarak daha güzel aramak için kullanıyorum.
Gerçek zamanlı önizleme (çalışırken yeniden yükleme)
Değişikliklerin etkisini gerçek zamanlı olarak görüntülemek, iş akışını büyük ölçüde iyileştirebilir. React veya Gatsby gibi birçok projede bu işlev yerleşik olarak bulunur, ancak yalnızca basit bir web sayfası (HTML, CSS ve JavaScript) oluşturursanız, Atom, Brackets veya VSCode gibi editörler düzenleme sayfasının gerçek zamanlı önizlemesini yan yana görüntüleyebilir. Başka bir pencerede.
Benim gibi azgın olmayı seven ve bu özelliği Vim'de kullanmak isteyenler. Uygulanabilecek birkaç eklenti olmasına rağmen, başka bir yol seçmeye karar verdim.
Editöre bağlı olmayan bir çözüm uygulamaya karar verdim. Temel fikir, yerel bir sunucu çalıştırmak, dosya değişikliklerini izlemek ve dosya her güncellendiğinde sunucudaki sayfayı yenilemektir.
Kulağa karmaşık geliyor ama aslında çok basit, sadece proje klasörüne tarayıcı senkronizasyonunu kurun ve çalıştırın.
Nodejs yüklediğinizi varsayıyorum, bu nedenle yalnızca global olarak tarayıcı senkronizasyonunu yüklemeniz gerekir.
npm install -g tarayıcı-senkronizasyonuTarayıcı senkronizasyonunu kurduktan sonra, herhangi bir klasörde çalıştırabilir, yerel bir sunucu oluşturabilir ve klasörde index.html'yi otomatik olarak görüntüleyebilirsiniz.
browser-sync start --server --files.Linux kullanıyorsanız, bane, sunucuyu başlatma sürecini basitleştirmek için bir takma ad oluşturabilir. Giriş dizinindeki .bashrc dosyasını açın ve aşağıdaki içeriği ekleyin:
# Tarayıcı senkronizasyon sunucusunu başlatmak için komut satırı takma adı alias serve = "browser-sync start --server --files."Bir adım daha ileri gittim ve diğer cihazlarda test edebilmem için LAN'daki diğer makinelerin sunucuma erişmesine izin verdim:
# browser-sync yapılandırması # Mevcut yerel IP'yi alın a gg ress dışa aktar SERVER_IP = `ana bilgisayar adı -I` # Tarayıcı senkronizasyon sunucusunu başlatmak için komut takma adı alias serve = "browser-sync start --server --files. --no-notify --host $ SERVER_IP --port 9000"Okuduğunuz için teşekkürler!
Orijinal: https://dev.to/fidelve/using-vim-as-your-main-editor-for-web-development-5a 73
Yazar: Fidel Sanchez-Bueno, kimya mühendisi, kendi kendini yetiştiren programcı.
Bu makale bir CSDN çevirisidir, lütfen yeniden basımın kaynağını belirtin.
Son
