Ένας οδηγός για τη σύγχρονη ανάπτυξη Ιστού με (Neo) vim

Υπάρχουν πολλοί σπουδαίοι συντάκτες εκεί έξω που παρέχουν έναν τόνο δυνατοτήτων για ανάπτυξη ιστοσελίδων. Η αναδημιουργία αυτών των χαρακτηριστικών στο Vim ήταν πάντα μια πρόκληση. Αγαπώ Vim, αλλά έχω και αφιέρωσε ένα τόνο χρόνο για να μικροαλλαγές setup μου. Αυτό το άρθρο είναι μια περίληψη του αποτελέσματος της δουλειάς μου.

Χρησιμοποιώ coc.nvim και αρνηθώ για να ενισχύσω την κωδικοποιητική μου εμπειρία. Το Denite χρησιμοποιείται για την ασαφή εύρεση αρχείων, τη διαχείριση ανοιχτών αρχείων και την αναζήτηση του έργου σας. Το Coc.nvim οδηγεί τον intellisense κινητήρα τυλίγοντας πολλές από τις ίδιες βασικές επεκτάσεις που οδηγούν το VSCode IDE. Για την πλήρη εγκατάστασή μου, συμπεριλαμβανομένου του τρόπου διαμόρφωσης αυτών των προσθηκών και άλλων, δείτε τα dotfiles μου.

Σημείωση : Θα αναφέρω απλώς το Vim σε αυτό το άρθρο, αλλά στην πραγματικότητα χρησιμοποιώ το Neovim. Όλα τα πρόσθετα λειτουργούν και με το Vim - ανάλογα με την έκδοση - αλλά πράγματα όπως η δυνατότητα "κυμαινόμενο παράθυρο" θα αφορούν ειδικά το Neovim.

Εισαγωγή

Γράφω TypeScript / JavaScript σε καθημερινή βάση και ξέρω πόσο έντονη είναι η διαφορά μεταξύ του Vim και ενός προγράμματος επεξεργασίας όπως το VSCode. Υπάρχουν πολλές δυνατότητες διαθέσιμες στους σύγχρονους συντάκτες που απαιτούν χρόνο, εξειδίκευση ή / και προσθήκες για να επιτευχθούν στο Vim.

Έχω δημιουργήσει την ακόλουθη λίστα δυνατοτήτων που περιμένω από έναν σύγχρονο επεξεργαστή. Δεν περιλαμβάνονται οι τυπικές λειτουργίες του προγράμματος επεξεργασίας (όπως επισήμανση σύνταξης).

  1. Εύρεση ασαφών αρχείων - Εάν γνωρίζετε το όνομα του αρχείου στο έργο, θα πρέπει να μπορείτε να το ανοίξετε γρήγορα (όπως - δύο πληκτρολογήσεις + ελάχιστος αριθμός χαρακτήρων σε μοναδικό όνομα αρχείου).
  2. Εναλλαγή αρχείων - Θα πρέπει να μπορείτε να βλέπετε ανοιχτά αρχεία και να αλλάζετε γρήγορα μεταξύ ανοιχτών αρχείων, τόσο με ασαφή εύρεση όσο και με μη αυτόματη περιήγηση.
  3. Linting - Ο κωδικοποίηση κώδικα πρέπει να είναι αυτόματοςκαι γρήγορα , και θα πρέπει να μπορείτε να χρησιμοποιήσετε ένα πρόγραμμα επιδιόρθωσης κώδικα.
  4. Αναζήτηση έργου - Θα πρέπει να μπορείτε να αναζητήσετε μια αυθαίρετη συμβολοσειρά, να αναζητήσετε ένα σύμβολο, να βρείτε ορισμούς και να βρείτε χρήσεις ενός συμβόλου.
  5. Code Intellisense - Το να έχετε το IDE σας να παρέχει σχετικές, απρόσκοπτες προτάσεις και αυτόματες συμπληρώσεις μπορεί να αποτελέσει τεράστια ώθηση στην παραγωγικότητα. Κατά τη γνώμη μου, η «λευκή φάλαινα» για τους περισσότερους χρήστες Vim.

Το να δουλεύεις όλα αυτά στο Vim μπορεί να είναι πόνος. Υπάρχουν τόνοι προσθηκών για να διαλέξετε, διαμορφώσεις για τροποποίηση και έγγραφα για ανάγνωση. Μετά από 7 χρόνια δοκιμής και σφάλματος, έφτασα επιτέλους την εγκατάσταση μου σε ένα υπέροχο μέρος. Το καλύτερο κομμάτι?

Θα σας δείξω πώς να αποκτήσετε όλη τη βασική λειτουργικότητα με δύο μόνο πρόσθετα.

Δεν θα καλύψω όλες τις δυνατότητες αυτών των καταπληκτικών προσθηκών, ούτε θα αναφέρω όλες τις πιθανές εναλλακτικές λύσεις (και υπάρχουν πολλές εξαιρετικές). Θα επικεντρωθώ στην επισήμανση της βασικής λειτουργικότητας που χρησιμοποιώ, καθώς και τυχόν αντιστοιχίσεις ή διαμορφώσεις που χρησιμοποιώ για την αύξηση της εμπειρίας.

Έτσι, χωρίς άλλη παραλλαγή, ας φτάσουμε σε αυτό.

Άρνηση

Τι παίρνετε: Ασαφής εύρεση αρχείων, διαχείριση αρχείων, αναζήτηση έργου

Δεν πρόκειται να ψέψω, το Denite είναι αρκετά τρελό. Ρίξτε μια ματιά στα έγγραφα. Σε βασικό επίπεδο, παρέχει ένα επίπεδο ασαφής εύρεσης πάνω από μια δέσμη βασικών λειτουργιών. Χτίστηκε από το θρυλικό Shougo, Jedi master του Vim.

Το Denite βασίζεται στο lambdalisue / neovim-prompt. Έχει μια διεπαφή πλήρους δυνατότητας που μπορεί να πάρει λίγο χρόνο για να συνηθίσει. Μπορείτε να δημιουργήσετε προσαρμοσμένα μενού και να χρησιμοποιήσετε πολλές προσαρμοσμένες πηγές με το Denite ως επίπεδο στην κορυφή.

Βασικά

Χρησιμοποιώ κυρίως το Denite για την εύρεση αρχείων στο έργο μου και τη διαχείριση των ανοιχτών αρχείων μου. Έχω ρυθμίσει το Denite να χρησιμοποιεί το ripgrep για να ενισχύσω την αναζήτησή μου. Μπορείτε να δείτε πώς το έχω διαμορφώσει στην εγκατάσταση μου.

Έχω χαρτογραφήσει όλα τα βασικά χαρακτηριστικά για γρήγορη και εύκολη πρόσβαση. Τα κλειδιά που χρησιμοποιώ για αυτές τις αντιστοιχίσεις είναι απλώς προσωπικές προτιμήσεις και πρέπει να προσαρμόζονται ανά χρήστη. Χρησιμοποιώ την επιλογή «κυμαινόμενο παράθυρο» για τις αντιστοιχίσεις Denite, αλλά υποστηρίζονται και άλλες παραλλαγές (όπως οριζόντια / κατακόρυφα διαχωριστικά).

Διαχείριση ανοιχτών αρχείων

;εμφανίζει μια λίστα με τα τρέχοντα ανοιχτά αρχεία. Μπορείτε να ξεκινήσετε να πληκτρολογείτε και θα σας επιτρέψει να κάνετε ασαφή αναζήτηση στα τρέχοντα ανοιχτά αρχεία σας. Με ανοιχτή τη λίστα αρχείων, l>o lets you browse the list like you a re in normal mode, where you can open and/or delete any files from the list.

Fuzzy Finding Files

r>t fuzzy-searches files in the current directory. With ripgrep, any files in your .gitignore are also ignored.

Project Searching

r> g and <;leader>j search the entire project for a given term, and searching the term under cursor, respectively.

Configuration

Denite can be a pretty tough tool to wrap your head around. It’s well documented, but it does reference some concepts that may be unfamiliar to most users. All of my Denite configurations are documented in my setup, so you should be able to use it as a reference. Here’s a quick sample of configuring the base options of Denite for things like customizing highlight groups and layouts.

Coc.nvim

What you get: Intellisense code engine, auto-completion, linting, code fixing

One of the biggest challenges with modern development in Vim is setting up intellisense code completion. Most modern editors like Visual Studio Code come with intellisense engines built in, or easily available with a plugin (with minimal setup).

I have tried a few solutions, and coc.nvim is the best I’ve used. It comes with several major features that are the crux of bringing Vim to the same level as modern IDEs.

There are a few main reasons I think it’s one of the better solutions to intellisense in Vim:

  1. It was incredibly easy to setup, and immediately worked with both my TypeScript and JavaScript projects.
  2. It’s built upon language servers, which power intellisense in many modern editors.
  3. Language server extensions like coc-tsserver are built on top of the TypeScript/JavaScript code extension that is built into VSCode. So as VSCode server extensions improve, Vim users can benefit as well.

Basics

Getting coc.nvim up and running is very straightforward. Once you follow the installation instructions, you can install language server extensions by running :CocInstall .

For example, in my current web-based projects, I can have a fully-functioning intellisense engine for most modern TypeScript/JavaScript projects by running:

:CocInstall coc-tsserver coc-eslint coc-json coc-prettier coc-css

LSP Extension

This is core of coc.nvim experience. With a language server extension like coc-tsserver, you get a ton of features. I’ll highlight a few:

  • Code completion support
  • Go to definition
  • Find references
  • Signature help
  • Code validation
  • Support for Javascript & TypeScript and JSX/TSX

By default, you get fast, automatic code completion. Types are automatically imported, and you can see function signatures and relevant code completions as you type.

I have a few key mappings set up to quickly utilize a few key features of the language server:

These mappings allow you to quickly jump to a symbol definition, see the implementation for a symbol, or find where it’s referenced. I use them all frequently and find them to be a huge productivity boost.

Linting

I rely on ESLint for linting both my JavaScript and TypeScript projects. Now that TSLint is being deprecated, the choice is even easier. I initially used Ale (which is a great tool), but it had some issues when used together with coc.nvim.

Now, using the coc-eslint language server extension, you can get real-time feedback from your linter and language server using the same tool. I also use coc-prettier to have coc.nvim format my code to prettier standards on file save.

Configuration

You can configure your coc.nvim setup by creating a configuration file. Right now, mine is pretty simple:

You can read more about setting up your own coc.nvim configuration file here.

Conclusion

That about wraps it up. I’d love to hear any feedback or suggestions, so please leave a comment! In case you missed it above, for my full setup, check out my dotfiles and my article on the rest of my setup outside of Vim. Thanks for reading!