Dans le choix de l'éditeur, vous devez avoir beaucoup de gens se moquent vim, mais en fait, d'un certain point de vue, vous pouvez trouver différents types de style. Le but de cet article est de ne pas recommander fortement l'utilisation vim, mais par les auteurs comme l'éditeur principal du projet de Vim développement Web Case, nous avons trouvé quelques différences.

Auteur | Fidel Sanchez-Bueno

Traducteur | ménisque, Zebian | Tu Min

Produit | RPSC (ID: CSDNnews)

Ce qui suit est la traduction:

Dans le processus d'apprentissage du programme, sélectionnez l'éditeur le plus approprié ou IDE (éditeur appelle ci-après les deux) est le processus de chaque programmeur expérience. Pour moi, il y a environ neuf ans pour commencer à apprendre Python, je me souviens chaque semaine dans un autre éditeur, a commencé comme IDLE, mais je me souviens aussi essayé Boa Constructor, Komodo et Notepad ++ et ainsi de suite.

Dans le processus de la recherche du meilleur éditeur, vous apprendrez l'éditeur de la guerre entre les programmeurs et ceux qui souriaient blagues VIM et Emacs.

C'est, à ce moment, vous essayez d'apprendre Vim ou Emacs, a commencé à partir de l'aventure d'Alice.

Peut être vu à partir du titre de cet article, j'ai choisi l'éditeur est Vim, mais je ne Vim pas l'intention de vous recommander, et non pas pour vous convaincre de passer d'innombrables heures, changer leur environnement de développement à utiliser Vim.

Le but de cet article est de partager la coutume quand je l'utilise comme l'éditeur Vim principal des projets de développement Web, dont certains peuvent être faits pour améliorer l'efficacité.

Développement Web plug-in Vim

En tant que programmeur Web, la plupart du temps à écrire HTML, fichiers CSS et JavaScript, en fonction des préférences personnelles ou les besoins du projet, vous pouvez également utiliser un cadre (comme angulaire, Vue ou React) et le babel, webpack, grognement, et d'autres outils .

Personnellement, je minimiser l'utilisation de plug-ins, ne peut apporter de grands avantages dans le plug-in, et quand peut vraiment améliorer le flux de travail utiliserai.

Je suis plug-ins actuellement installé sont les suivantes:

• Emmet.vim

• indentline et vim-jsx-jolie

• vim-commentaire

• ALE (eslint et plus joli)

Emmet.vim

Emmet est un excellent outil pour l'entrée à grande vitesse et modifier le code, il suffit d'entrer une ligne de code pour créer un segment entier de HTML complexe.

indentline et vim-jsx-jolie

Les deux plug-ins peuvent être améliorés Vim style visuel. indentline peut ajouter des lignes verticales pour montrer le niveau d'indentation, vim-jsx-joli donner mise en évidence de code JSX add, il peut être utilisé lors de l'écriture ReactJS et autres codes.

vim-commentaire

Ce plugin peut facilement commenter un morceau de code ou décommenté, sélectionnez simplement le code et le type < g-c > Il peut être.

ALE (eslint et plus joli)

ALE (moteur asynchrone Lint) peut appeler le linter de code et des outils DRESSING, améliorer grandement l'efficacité du travail, je ne sais pas l'un de ceux, avec absolument aucun plug-ins de regrets. Je l'utilise principalement pour les appels ALE plus jolie.

Aperçu en direct (de surcharge thermique)

vue en temps réel de l'effet de la modification peut grandement améliorer workflow. Beaucoup etc. React ou d'un projet Gatsby a construit cette fonctionnalité, mais si seulement pour créer une page Web simple (HTML, CSS et JavaScript), puis comme un atome, supports ou éditeur VSCode peut modifier en temps réel aperçu de la page affichée en parallèle une autre fenêtre.

Les gens comme moi aiment dans une impasse très espoir qui utilisent également cette fonctionnalité dans vim. Bien qu'il existe plusieurs plug-ins pour atteindre, mais j'ai décidé de choisir une autre façon.

J'ai décidé de ne pas mettre en uvre un programme dépend de l'éditeur. L'idée de base est d'exécuter un serveur local, de surveiller les changements de fichiers, puis actualisez la page sur le serveur chaque fois que le fichier est mis à jour.

Cela semble très compliqué, mais en fait est très simple, ne doivent installer et exécuter la synchronisation du navigateur dans le dossier du projet.

Je suppose que vous avez installé les nodejs, donc seulement besoin d'installer la synchronisation du navigateur dans le monde.

NPM installer -g navigateur synchronisation

Après avoir installé la synchronisation du navigateur, vous pouvez exécuter dans un dossier, créez un serveur local, puis affiche automatiquement le fichier index.html dans le dossier.

navigateur Lancer la synchronisation --server --files.

Si vous utilisez Linux, Bane peut simplifier le processus de création d'un alias pour démarrer le serveur. Ouvrez le fichier .bashrc dans votre répertoire, ajouter ce qui suit:

# Alias de ligne de commande pour démarrer le serveur de synchronisation du navigateur alias servent = « navigateur Lancer la synchronisation --server --files. »

Je permet en outre d'autres machines sur le réseau local pour accéder à mon serveur, afin que vous puissiez le tester sur un autre appareil:

# Config navigateur synchronisation # Obtenez le IP local actuel dd ress export SERVER_IP = `nom d'hôte -i` # L'alias de commande pour démarrer le serveur de synchronisation du navigateur alias = servent "navigateur de synchronisation commencent --server --files. --no-notify SERVER_IP de $ --host --port 9000"

Merci pour la lecture!

Original: https: //dev.to/fidelve/using-vim-as-your-main-editor-for-web-development-5a 73

Auteur: Fidel Sanchez-Bueno, ingénieur chimiste, programmeur autodidacte.

Cet article traduction RPSC, s'il vous plaît indiquer la source de la source.

[Fin]