Quelques techniques associées à l'utilisation de WebStorm

Cet article vous apporte quelques compétences liées à l'utilisation de WebStorm. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Il y a des touches de raccourci plus complètes ci-dessous, familiarisez-vous avec elles lentement...

WebStorm mashup svn

WebStorm mashup nodeJS

Utiliser moins et mashup -js comme exemple

Comment utiliser npm pour télécharger des modules en root

Une brève introduction à webstorm

Adresse officielle du site Web : http://www. jetbrains.com/webstorm /features/index.html

Si vous voulez bien faire votre travail, vous devez d'abord affûter vos outils, comme mentionné. J'ai vu un article sur Internet présentant webstrom, et j'ai senti que la fonction est vraiment puissante. Je sais aussi pourquoi les fichiers téléchargés sur github par le front-end d'Alibaba ont un fichier .idea (on dit que Taobao recommande en interne d'utiliser webstrom. lors de l'écriture de js)

On peut comprendre que l'IDE intègre de nombreuses fonctions que vous voulez, ou des fonctions que vous ne voulez pas. En d’autres termes, il s’agit d’un éditeur avec de nombreux plug-ins installés, jusqu’à présent, je ne pense pas qu’il soit nécessaire d’installer des plug-ins pour celui-ci.

Présentons ensuite les fonctionnalités spéciales de webstrom :

WebStorm est un outil de développement JavaScript commercial lancé par JetBrains

1. Tout éditeur doit enregistrer (ctrl + s). Il s'agit d'une fonctionnalité de tous les logiciels d'édition sur la plateforme Win, mais il n'y a pas de * familier dans le coin supérieur droit du fichier d'édition Webstorm.
   Avantages : après avoir éliminé le besoin de ctrl + s, lorsqu'il est combiné avec vim de Firefox, vous pouvez essentiellement voir la page de résultats sans déplacer la souris.
   Inconvénients : il n'y a pas de marque * précédente, et elle sera immédiatement stockée en cas de mauvaise utilisation du clavier.

2. Tout éditeur n'a pas d'historique tant que le fichier est fermé, mais Webstorm en a un. vcs->Historique local -> Afficher l'historique (touche de raccourci : ALT+~ -〉7)
   Avantage : Tant que webstorm n'est pas fermé, votre fichier peut être renvoyé à l'opération précédente à tout moment (c'est pourquoi ctrl dans webstorm +y est la raison de la suppression d'une ligne).
   Inconvénients : ces enregistrements historiques disparaîtront après la fermeture et le redémarrage de Webstorm ; un autre inconvénient est que la consommation de mémoire qui en résultera sera inévitablement relativement importante.

3. Tout éditeur, à l'exception du serveur svn, ne dispose pas de version locale, mais webstorm fournit un historique local des modifications de fichiers (touche de raccourci : ALT+SHIFT+c, ALT+Option+c sur Mac) . Vous pouvez également utiliser Ctrl + E pour afficher les fichiers récemment ouverts.
   Avantages : Équivalent au svn local.
   Inconvénients : La consommation de mémoire sera forcément relativement importante.

4. Zencoding intégré, HTML5, ftp, édition instantanée (chrome), saisie semi-automatique, débogueur JavaScript basé sur Mozilla, JSLint, moins de support, support CoffeeScript, Node.js, tests unitaires, Intégrez des fonctionnalités telles que Git et le contrôle de version svn.

5. Lors de l'écriture de CSS, le chemin de divers fichiers et images sera intelligemment demandé, il n'est donc pas nécessaire de confirmer si le fichier existe.

D'autres fonctionnalités ont été introduites. Si vous souhaitez en savoir plus, vous pouvez vous rendre sur le site officiel de webstrom pour continuer la recherche. Après avoir lu cette introduction et tant de fonctionnalités puissantes, avez-vous envie d’essayer immédiatement cet artefact front-end légendaire ? Euh.

Téléchargez d'abord webstrom à partir de la page de téléchargement officielle, cliquez sur Installer, puis passez à l'étape suivante. Enfin, une interface nécessitant un code d'enregistrement apparaîtra, car webstrom est un IDE commercial, et bien sûr chinois. Le front-end de Diaosi n'a pas beaucoup d'argent à acheter. C'est un artefact coûteux, ne vous inquiétez pas, nous pouvons utiliser la clé de WebStorm pour apprendre à utiliser cet artefact front-end. Hehe~~~~

Une fois l'installation réussie, vous vous sentirez certainement un peu mal à l'aise. Tout comme moi, je pense que cette palette de couleurs est vraiment excitante. Il y a aussi certains paramètres dont je ne veux pas non plus. Je vais donc lister ci-dessous les paramètres auxquels je suis habitué.

Conseils de configuration de Webstorm

• Comment changer le thème (police et couleur) :
  Fichier -> Éditeur -> ; nom du schéma.Adresse de téléchargement du thème

• Comment empêcher Webstorm d'ouvrir le fichier du projet au démarrage :
  Fichier ->Général supprimer Rouvrir le dernier projet au démarrage.

• Comment afficher parfaitement le chinois :
  Fichier -> Paramètres->Apparence, cochez Remplacer les polices par défaut par (non recommandé), définissez Nom : NSimSun, Taille : 12

• Comment afficher les numéros de ligne :
  Fichier -> Paramètres->Éditeur, cochez "Afficher les numéros de ligne" pour afficher les numéros de ligne

• Comment encapsuler automatiquement le code :
  Fichier -> paramètres -> Éditeur "Utiliser les enveloppes douces dans l'éditeur" est coché et le code sera automatiquement encapsulé

• Comment cliquez sur le curseur pour afficher A la fin de cette ligne :
  Fichier -> Paramètres->Editeur Décochez simplement "Autoriser le placement du curseur après la fin de la ligne".

• Comment modifier les touches de raccourci :
  Fichier -> Paramètres->Keymap, puis double-cliquez sur la fonction dont vous souhaitez modifier le raccourci, une boîte de dialogue apparaîtra , suivez les instructions

• Remplacez par les touches de raccourci que vous connaissez avec l'éditeur :
  Fichier ->Paramètres->Keymap, qui prend en charge les IDE grand public tels que Visual Studio, Eclipse et NetBeans.

• invite de la bibliothèque javascript.
  Fichier -> paramètres -> Javascript -> Sélectionnez ensuite la bibliothèque de classes javascript que vous utilisez souvent dans la liste, et enfin le téléchargement et l'installation sont ok.

• Lors du développement de js, j'ai constaté que ctrl + return est requis pour sélectionner l'option candidate :
  Fichier -> Paramètres -> Achèvement du code -> Toujours" "

• l'invite js est relativement lente
  Fichier -> Achèvement du code ->

  Configuration de git :
Fichier -> Paramètres -> Éditeur -> entrez et modifiez le compte github. Si vous n'avez pas git, vous n'en avez pas besoin. 🎜>

• Installation du plug-in :
  Fichier ->plugins, puis choisissez les plug-ins puissants et installez-les (le plug-in "css-X-fire" est utilisé lors de l'utilisation de Firebug. pour modifier les propriétés CSS, le code CSS dans l'éditeur changera également.)

• Mise à jour ultérieurement
  

• Expérience d'utilisation de Webstorm

Fonction Favoris :

Lorsque le répertoire du projet est énorme Parfois, certains sous-répertoires sont souvent ouverts, mais le niveau est très profond. À ce stade, vous pouvez ajouter le répertoire à vos favoris. est réussi, il y aura un menu "Favoris" sur la gauche

• Fil d'Ariane :
  En plus de la page du projet à gauche, où vous pouvez sélectionner un répertoire, il y a est un répertoire similaire au fil d'Ariane du site Web sous le menu supérieur qui peut également réaliser la même fonction. Cliquer sur chaque répertoire fera apparaître un menu déroulant pour afficher les sous-répertoires en dessous, ce qui est très pratique

• Interface du constructeur :
  Il apparaîtra si le commentaire correspond au. format. Si c'est un fichier js, ce sont les fonctions et objets de la classe js ; si c'est un fichier css, c'est un résumé du fichier css ; si c'est un fichier html, c'est le schéma de structure du nœud. Ceux-ci sont juste pour faciliter la visualisation de la structure du code

• interface todo :
  Ajoutez des commentaires todo au code et cette interface apparaîtra

<.>
• Interface de code à double colonne :

  Cliquez avec le bouton droit sur le fichier dans l'onglet Code, puis faites un clic droit -> renversé verticalement (écrans gauche et droit) ou renversé horizontalement (écrans supérieur et inférieur)
  

• Fonction d'historique local :

  Un bon moyen de récupérer du code
  

• WebStorm intègre l'utilisation de git

  
  Webstorm n'intègre que les usages communs opérations git, et ce n'est pas un outil de ligne de commande complètement alternatif. Vous pouvez vérifier dans quelle branche git vous vous trouvez dans le coin inférieur droit de l’interface. Vous pouvez également cliquer dessus pour changer ou créer une nouvelle branche.

Affichez les différences entre le code actuel et le code du référentiel :

Cliquez avec le bouton droit sur n'importe quelle zone de l'interface de code, sélectionnez git -> comparer avec, puis sélectionnez le référentiel à comparer.

Description de la touche de raccourci Webstorm

Modification des touches de raccourci associées

Ctrl + Espace : Complètement du code de base (le nom de n'importe quelle classe, méthode ou variable) complétion du code de base (n'importe quel nom de classe, de fonction ou de variable), remplacer par Alt+S

• Ctrl + Maj + Entrée :

  Instruction complète complète l'instruction actuelle
  

• Ctrl + P :

  Informations sur les paramètres (dans les arguments de l'appel de méthode) Les informations sur les paramètres incluent les paramètres d'appel de méthode
  

• Ctrl + passez la souris sur le code

  Brèves informations Informations simples
  

• Ctrl + F1

  Afficher la description de l'erreur ou de l'avertissement au curseur Afficher l'erreur ou l'avertissement à la position du curseur
  

• Alt + Insert

  Générer du code… (Getters, Setters, Constructeurs) Créez un nouveau fichier ou générez du code,…La fonction constructeur peut créer des méthodes getter et setter pour n'importe quel champ de la classe
  

• Ctrl + O

  Remplacer les méthodes Méthodes de surcharge
  

• Ctrl + I

  Méthodes d'implémentation Méthodes d'implémentation
  

• Ctrl + Alt + T

  Entourer avec… (if, else, try, catch, for, etc.) Utilisez * pour entourer la ligne de code sélectionnée, (* inclut if, while, try catch, etc.)
  

• Ctrl + /

  Commenter/décommenter avec la ligne commenter /décommenter avec bloquer le commentaire bloquer le commentaire/décommenter bloquer le commentaire
  

• Ctrl + W

  Sélectionner des blocs de code croissants successivement Sélectionner des blocs de code, généralement une sélection incrémentielle
  

• Ctrl + Maj + W

  Diminuer la sélection actuelle à l'état précédent Revenir à la touche de raccourci précédente, diminuer la sélection code
  

• Alt + Q

  Informations contextuelles informations contextuelles
  

• Alt + Entrée

  Afficher les actions d'intention et les correctifs rapides Actions d'intention , correctifs rapides
  

• Ctrl + Alt + L

  Reformater le code Formater le code selon le format du modèle
  

• Tab/ Maj + Tab

  Indenter/annuler l'indentation des lignes sélectionnées Indenter/annuler l'indentation des lignes sélectionnées
  

• Ctrl + X ou Maj + Suppr

  Couper la ligne actuelle ou le bloc sélectionné dans le presse-papiers Couper la ligne actuelle ou le bloc sélectionné dans le presse-papiers
  

• Ctrl + C ou Ctrl + Insérer

  Copier la ligne actuelle ou le bloc sélectionné sur l'aggloméré Copier la ligne actuelle ou le bloc sélectionné sur l'aggloméré
  

• Ctrl + V ou Maj + Insérer

  Coller depuis le presse-papiers Coller le contenu du presse-papiers
  

• Ctrl + Shift + V
  Coller à partir des tampons récents Coller le dernier contenu dans le tampon

• Ctrl + D
  Dupliquer la ligne actuelle ou bloc sélectionné Copie la ligne actuelle ou le bloc de code sélectionné

• Ctrl + Y
  Supprimer la ligne au curseur Supprimer la ligne à la position du curseur

• Ctrl + Maj + J
  Rejoindre une ligne intelligente (HTML et JavaScript uniquement)Rejoindre une ligne intelligente (HTML et JavaScript uniquement)

• Ctrl + Entrée
  Scission de ligne intelligente ( HTML et JavaScript uniquement) Lignes intelligentes séparées (HTML et JavaScript)

• Maj + Entrée
  Démarrer une nouvelle ligne

• Ctrl + Maj + U
  Changer la casse pour le mot au niveau du signe d'insertion ou du bloc sélectionné Conversion de la casse à la position du curseur

• Ctrl + Maj + ]/[
  Sélectionner jusqu'à la fin/le début du bloc de code Sélectionner jusqu'à code Fin/Début du bloc

• Ctrl + Supprimer
  Supprimer à la fin du mot Supprimer la fin du texte

• Ctrl + Retour arrière
  Supprimer à fin du mot début Supprimer le début du texte

• Ctrl + Pavé numérique+/-
  Développer/réduire le bloc de code Développer/réduire le bloc de code

• Ctrl + Shift+NumPad+
  Tout développer Tout développer

• Ctrl + Shift+NumPad -
  Réduire Tout réduire

• Ctrl + F4
  Fermer l'onglet d'édition actif Fermer l'onglet d'édition actif

Rechercher/remplacerRechercher/remplacer les touches de raccourci associées

• Ctrl + F
  Rechercher Rechercher rapidement du code dans le fichier actuel

• Ctrl + Maj + F
  Rechercher dans le chemin Rechercher le chemin dans le fichier spécifié

• F3
  Rechercher le suivant Rechercher le suivant Remplacer le code dans le fichier

• Ctrl + Maj + R
  Remplacer dans le chemin Spécifier le remplacement par lots de code dans le fichier

• 
  Recherche d'utilisation Rechercher les touches de raccourci associées

• 
  Alt + F7/Ctrl + F7

  Rechercher des utilisations/Rechercher des utilisations dans le fichier Rechercher utilisation/Rechercher l'utilisation dans le fichier

Ctrl + Maj + F7 Mettre en surbrillance les utilisations dans le fichier

• Ctrl + Alt + F7
  Afficher les utilisations Afficher les utilisations

• 
  En cours d'exécution

• 
  Alt + Shift + F10

  Sélectionnez la configuration et exécutez Sélectionnez la configuration et exécutez

Alt + Shift + F9 Sélectionnez la configuration et déboguez Sélectionnez l'architecture et corrigez la vulnérabilité

• Shift + F10
  Exécuter Exécuter

• Maj + F9
  Vulnérabilité du correctif de débogage

• Ctrl + Maj + F10
  Exécuter la configuration du contexte à partir de l'éditeur Exécuter le contexte configuration depuis l'éditeur

• Ctrl + Maj + >
  F8

  Passez sans entrer dans la fonction

• 
  F7

  Pas à pas dans l'exécution en une seule étape

• 
  Maj + F7

  Pas intelligent dans le pas intelligent dans

Maj + F8 Sortez

• Alt + F9
  Exécuter vers le curseur Exécuter vers le curseur

• Alt+ F8
  Évaluer l'expression Évaluer l'expression

• F9
  Reprendre le programme Redémarrer le programme

• Ctrl + F8
  Basculer le point d'arrêt Changer de point d'arrêt

• Ctrl + Maj + F8
  Afficher les points d'arrêt Afficher les points d'arrêt

• 
  Touches de raccourci liées au positionnement de la navigation

• 
  Ctrl + N

  Aller à la classe, accéder à la classe spécifiée

• 
  Ctrl + Maj + N

  Aller au fichier Rechercher rapidement des fichiers dans le projet par nom de fichier

• 
  Ctrl + Alt + Maj + N

  Aller au symbole Rechercher la position de la fonction par un caractère

Alt + Droite/gauche Aller à l'éditeur suivant/précédent onglet Aller à l'option d'éditeur suivante/précédente

• F12
  Revenir à la fenêtre d'outil précédente Aller à la fenêtre d'outil précédente

• Esc
  Aller à l'éditeur (à partir de la fenêtre d'outils) Aller à l'éditeur à partir de la fenêtre d'outils

• Maj + Échap
  Masquer la fenêtre active ou la dernière fenêtre active Masquer la fenêtre active

• Ctrl + Shift + F4
  Fermer l'exécution active /message/find/…onglet Fermer l'activité….Tab

• Ctrl + G
  Aller à la ligne Sauter à la ligne

• Ctrl + E
  Popup des fichiers récents Popup des fichiers récemment ouverts

• Ctrl + Alt + Gauche/Droite
  Naviguer en arrière/en avant Naviguer en avant/en arrière

• Ctrl + Maj + Retour arrière
  Naviguer vers le dernier emplacement de modification Naviguer vers le dernier emplacement de modification

• Alt + F1
  Sélectionner le fichier ou le symbole actuel dans n'importe quelle vue Rechercher l'emplacement du code ou du fichier actuellement sélectionné dans d'autres modules d'interface

• Ctrl + B ou Ctrl + Clic
  Aller à la déclaration, passer à la définition

• Ctrl + Alt + B
  Aller à la ou aux implémentations, passer à l'implémentation de la méthode

• Ctrl + Shift + B
  Aller au saut de déclaration de type Définition de la méthode de transfert

• Ctrl + Maj + I
  Ouvrir la recherche de définition rapide Ouvrir la recherche de définition rapide

• Ctrl + U
  Aller à super-méthode/super -class Méthode de saut/super classe

• Alt + Haut/Bas
  Aller à la méthode précédente/suivante Déplacer rapidement la position entre les méthodes

• Ctrl + ]/[
  Déplacer vers la fin/le début du bloc de code Aller à la fin/au début du bloc de codage

• Ctrl + F12
  Popup de structure de fichier popup de structure de fichier

• Ctrl + H
  Hiérarchie des types Hiérarchie des types

• Ctrl + Alt + H
  Hiérarchie des appels Hiérarchie des appels

• F2/Maj + F2
  Erreur en surbrillance suivante/précédente Passez à l'erreur suivante/précédente, mettez en surbrillance les erreurs ou les avertissements pour les localiser rapidement, utilisez cette touche de raccourci pour naviguer rapidement entre les déclarations erronées.

• F4/Ctrl + Entrée
  Modifier la source/Afficher la source Modifier le code source/Afficher le code source

• Alt + Accueil
  Afficher la barre de navigation Afficher la barre de navigation

• F11
  Basculer le signet Basculer la marque

• Ctrl + F11
  Basculer le signet avec mnémonique en utilisant la mémoire Changer de marque

• Ctrl + #[0-9]
  Aller au signet numéroté Aller au signet numéroté

• Maj + F11
  Afficher le signet Afficher le signet

Refactoring Touches de raccourci liées à la refactorisation

• F5
  Copier la copie

• F6
  Déplacer Déplacer

• Alt + Supprimer
  Supprimer en toute sécurité Supprimer en toute sécurité

• Maj + F6
  Renommer Renommer

• Ctrl + Alt + N
  Variable en ligne Intégrer la variable

• Ctrl + Alt + M
  Méthode d'extraction (Javascript uniquement) Fonction d'extraction

• Ctrl + Alt + V
  Introduire la variable Introduire la variable

• Ctrl + Alt + F
  Introduire le champ

• Ctrl + Alt + C
  Introduire la constante Introduire la constante

Système de contrôle de version VCS/Historique local /Touches de raccourci liées à l'histoire locale

• Alt + BackQuote( )
  'VCS'quick popup Apparaît rapidement VCS

• Ctrl + K
  Commettre le projet dans VCS Soumettre le projet à VCS

• Ctrl + T
  Mettre à jour le projet depuis VCS Mettre à jour le projet depuis VCS

• Alt + Maj + C
  Afficher les modifications récentes Afficher les modifications récentes

Général Touches de raccourci associées fréquemment utilisées

• Ctrl + Shift +A
  Rechercher une action Rechercher et appeler la fonction de l'éditeur

• Alt + #[0-9]
  Ouvrir rapidement la fenêtre de l'outil correspondante passer au module d'interface ouvert

• Ctrl + Alt + F11
  Basculer en mode plein écran Passer en mode plein écran

• Ctrl + Maj + F12
  Basculer l'éditeur de maximisation Changer l'éditeur de maximisation

• Alt + Shift + F
  Ajouter aux favoris Ajouter le fichier actuel aux favoris

• Alt + Shift + I
  Inspecter le fichier actuel avec le profil actuel Utiliser les propriétés actuelles pour inspecter le fichier actuel

• Ctrl + BackQuote( )
  Changer rapidement le schéma actuel Convertir rapidement l'existant combinaisons

• Ctrl + Alt + S
  Ouvrir la boîte de dialogue de configuration Ouvrir la boîte de dialogue de configuration

• Ctrl + Tab
  Basculer entre les onglets et l'outil fenêtre (conflits avec les touches de raccourci Windows)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!