Résumé de l'utilisation d'introduction de WebStorm

Cet article partage avec vous un résumé de l'utilisation introductive de WebStorm. Le contenu a une certaine valeur de référence. Les amis dans le besoin peuvent y jeter un œil.

WebStorm est construit sur la plateforme open source IntelliJ, que JetBrains a développée et perfectionnée depuis plus de 15 ans. Il fournit une interface utilisateur unifiée qui fonctionne avec de nombreux systèmes de contrôle de version populaires, garantissant une expérience utilisateur cohérente sur git, GitHub, SVN, Mercurial et Perforce. WebStorm propose des fonctionnalités personnalisables, ajustez-les pour qu'elles s'adaptent parfaitement à votre style de codage, des raccourcis, polices et thèmes visuels aux fenêtres d'outils et à la disposition de l'éditeur.

Assistance au codage intelligent

WebStorm vous aide à écrire du code de qualité. Son éditeur intelligent propose la complétion de code, l'analyse dynamique du code, le formatage du code et la refactorisation pour augmenter votre productivité et amener votre expérience de développement à un tout autre niveau.

Langages et frameworks pris en charge

WebStorm fournit la meilleure aide de codage de sa catégorie pour JavaScript, ECMAScript 6, TypeScript, CoffeeScript, Dart et Flow.

WebStorm peut vous aider à écrire du code HTML, CSS, Less, Sass et Stylus.

Mieux encore, vous bénéficiez d'une prise en charge avancée de Node.js et des frameworks populaires tels que React, Angular, Vue.js, Meteor, etc.

Assistance intelligente au code

WebStorm analyse votre projet pour fournir les meilleurs résultats de complétion de code pour toutes les méthodes, fonctions, modules, variables et classes définis dans votre application. L'assistance au Сodage est contextuelle et peut également être spécifique au framework.

Profitez de la complétion du code pour les propriétés et leurs valeurs lorsque vous travaillez avec CSS dans WebStorm. Dans Less et Sass, obtenez l'aide des mixins. Bien sûr, en HTML, vous obtenez la complétion du code pour toutes les balises et attributs.

Analyse et détection de la qualité du code

WebStorm dispose de centaines de contrôles intégrés couvrant tous les langages pris en charge. En dehors de cela, vous pouvez également utiliser ESLint, TSLint, Stylelint, JSCS, JSHint et JSLint.

WebStorm Editor signale toutes les erreurs et tous les avertissements directement au fur et à mesure que vous tapez et propose de nombreuses options de correction rapide.

Toutes les lignes de code présentant des problèmes possibles avec WebStorm sont marquées dans la gouttière de droite de l'éditeur, afin que vous puissiez facilement repérer les erreurs et les avertissements dans les fichiers longs.

Vous pouvez également utiliser WebStorm pour exécuter une analyse de la qualité du code pour l'ensemble de votre projet et appliquer automatiquement les correctifs rapides sélectionnés.

Conseils d'utilisation de Webstorm

• Comment changer le thème (police et couleur) de WebStorm :
  Fichier -> Éditeur -> couleurs&fonts -> 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 -> projet au démarrage.

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

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

• Comment WebStorm effectue automatiquement le retour à la ligne du code :
  Fichier -> paramètres -> L'option "Utiliser les retours à la ligne souples dans l'éditeur" est cochée et le code sera automatiquement renvoyé

• Comment cliquer sur le curseur et afficher WebStorm en fin de ligne :
  Fichier -> Paramètres->Éditeur Décochez simplement "Autoriser le placement du curseur après la fin de la ligne".

• Comment modifier les touches de raccourci WebStorm :
  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

• Comment remplacer WebStorm par les touches de raccourci de votre éditeur familier :
  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 dans WebStorm, j'ai constaté que ctrl + return est requis pour sélectionner l'option candidate :
  Fichier -> Paramètres -> Achèvement du code -> au lieu de "Toujours"

• L'invite js dans WebStorm est relativement lente. La définition de la stratégie
  Achèvement du code de fichier -> 🎜>

• Configuration de Git dans WebStorm :

  Fichier -> Paramètres -> github, entrez et modifiez le compte github. vous n'en avez pas besoin.
  

• Installation du plug-in WebStorm :

  Fichier ->plugins, puis sélectionnez les plug-ins puissants et installez-les (Le "css-X. -fire" le plug-in est utilisé pour modifier le CSS dans l'éditeur lors de l'utilisation de Firebug pour modifier les attributs CSS. Le code changera également)
  

Expérience d'utilisation de webstorm

• Fonction favoris de WebStorm :
  Lorsque le répertoire du projet est très volumineux, certains sous-répertoires sont souvent ouverts, mais la hiérarchie est Très profond. A ce moment, vous pouvez ajouter le répertoire à vos favoris. Une fois l'ajout réussi, il y aura un menu "Favoris" sur la gauche

• Fil d'Ariane de WebStorm :
  En plus de la gauche Sur la page du projet, en plus de sélectionner un répertoire, il existe un répertoire similaire au fil d'Ariane du site Web sous le menu supérieur pour obtenir 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 de WebStorm :
  Les commentaires apparaîtront s'ils correspondent 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. Ceci est juste pour faciliter la visualisation de la structure du code

• Interface de tâches de WebStorm :
  Ajoutez des commentaires de tâches au code et cette interface apparaîtra

.

• Interface de code à deux colonnes de WebStorm :
  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 de WebStorm :
  Un bon moyen de récupérer du code

Utilisation de git intégré par WebStorm

Seul git est intégré dans webstorm Opérations couramment utilisées et ne peut pas remplacer complètement les outils de ligne de commande. 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 -> référentiel à comparer.

Description de la touche de raccourci Webstorm

Touches de raccourci liées à l'édition pour WebStorm

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

• Ctrl + Maj + Entrée :
  Instruction complète Complétez 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 + souris sur le code
  Brèves informations Informations simples

• Ctrl + F1
  Afficher la description de l'erreur ou de l'avertissement au curseur Afficher la description de l'erreur ou de l'avertissement au curseur Afficher des informations d'erreur ou d'avertissement à l'emplacement du curseur

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

• Ctrl + O
  Remplacer les méthodes Remplacer les méthodes

• 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 le ligne de code sélectionnée, (* inclut if, while, try catch, etc.)

• Ctrl + /
  Commenter/décommenter avec le commentaire de ligne >Commenter/décommenter avec le bloc de commentaires commenter/décommenter le commentaire de bloc

• 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 Le retour en arrière de la touche de raccourci précédente, décrémenter le code de sélection

• Alt + Q
  Informations contextuelles informations contextuelles

• Alt + Entrée
  Afficher les actions d'intention et les solutions rapides Actions d'intention, résultats rapides

• Ctrl + Alt + L
  Reformater le code Formater le code selon format du modèle

• Tab/Shift + Tab
  Indent/annuler les lignes sélectionnées Indenter/annuler les lignes sélectionnées Traitement des lignes

• 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é vers l'aggloméré Copier la ligne actuelle ou le bloc sélectionné vers l'aggloméré

• Ctrl + V ou Maj + Insérer
  Coller depuis le presse-papiers Coller le contenu dans le 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 le bloc sélectionné

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

• Ctrl + Maj + J
  Jointure de ligne intelligente (HTML et JavaScript uniquement)Rejoindre la ligne intelligente (HTML et JavaScript)

• Ctrl + Entrée
  Partage de ligne intelligent (HTML et JavaScript uniquement)

• Maj + Entrée
  Commencer une nouvelle ligne Commencer une nouvelle ligne

• Ctrl + Maj + U
  Basculer la casse pour le mot au curseur ou au bloc sélectionné Conversion de la casse à la position du curseur

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

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

• Ctrl + Retour arrière
  Supprimer au début du mot 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 + Maj+Pad numérique+
  Développer tout

• Ctrl + Maj + Pavé numérique -
  Réduire Tout réduire

• Ctrl + F4
  Fermer l'onglet de l'éditeur actif Fermer l'onglet de l'éditeur actif

Touches de raccourci liées à la recherche/remplacement de WebStorm

• Ctrl + F
  Rechercher Rechercher rapidement le 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

• Maj + F3
  Rechercher le précédent Rechercher le précédent

• Ctrl + R
  Remplacer Remplacer le code dans le fichier actuel

• Ctrl + Maj + R
  Remplacer dans le chemin Remplacement par lots des codes dans les fichiers spécifiés

Touches de raccourci associées à la recherche d'utilisation de WebStorm

• Alt + F7/Ctrl + F7
  Rechercher les utilisations/Rechercher les utilisations dans le fichier Rechercher les utilisations/Rechercher les utilisations dans le fichier

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

• Ctrl + Alt + F7
  Afficher les utilisations Afficher l'utilisation

Opération en cours d'exécution de WebStorm

• 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, corrigez la vulnérabilité

• Maj + F10
  Exécuter

• Maj + F9
  Déboguer le patch de la vulnérabilité

• Ctrl + Shift + F10
  Exécuter la configuration du contexte depuis l'éditeur

• Ctrl + Shift + X
  Exécuter la ligne de commande

Débogage touches de raccourci associées pour WebStorm

• F8
  Pas à pas n'entre pas dans la fonction

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

• Maj + F7
  Pas intelligent dans l'exécution intelligente de l'étape

• 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 de redémarrage du programme

• Ctrl + F8
  Basculer le point d'arrêt du commutateur 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 navigation de WebStorm

• Ctrl + N
  Aller à la classe Aller à la classe spécifiée

• Ctrl + Shift + N
  Aller au fichier Recherchez rapidement les fichiers du projet par nom de fichier

• Ctrl + Alt + Shift + N
  Aller au symbole Rechercher la position de la fonction par un caractère

• Alt + Droite/gauche
  Aller à l'onglet de l'éditeur suivant/précédent Aller à l'option de l'éditeur suivant/précédent

• F12
  Retourner à la fenêtre outil précédente Revenir à la fenêtre outil précédente

• Esc
  Aller à l'éditeur (depuis la fenêtre outil ) Entrez dans l'éditeur depuis la fenêtre outil

• Shift + Esc
  Masquer la fenêtre active ou la dernière fenêtre active Masquer la fenêtre active

• Ctrl + Shift + F4
  Fermer l'onglet actif/message/recherche/… Fermer l'onglet actif…

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

• Ctrl + E
  Popup des fichiers récents Affiche le fichier récemment ouvert

• Ctrl + Alt + Gauche/Droite
  Naviguer en arrière/avant Naviguer vers l'avant /retour

• Ctrl + Maj + Retour arrière
  Accéder au dernier emplacement de modification Accédez au 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 Aller à la définition

• Ctrl + Alt + B
  Aller à la ou aux implémentation(s) Aller à l'implémentation de la méthode

• Ctrl + Shift + B
  Accéder à la définition de la méthode de saut de déclaration de type

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

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

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

• Ctrl + ]/[
  Déplacer vers la fin/le début du bloc de code Passer à la fin/le début du bloc d'encodage

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

• Ctrl + H
  Type de hiérarchie type Hiérarchie

• Ctrl + Alt + H
  Appel hiérarchie

• F2/ Shift + F2
  L'erreur suivante/précédente en surbrillance passe à l'erreur suivante/précédente, met en évidence les erreurs ou les avertissements et les localise rapidement. Utilisez cette touche de raccourci pour passer rapidement. entre des 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 avec le mnémonique à l'aide de la marque du commutateur de mémoire

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

• Maj + F11
  Afficher le signet Afficher le signet

• Touches de raccourci de refactoring de WebStorm
  

F5

Copier la copie

• F6
  Déplacer Déplacer

• Alt + Suppr
  Suppression sécurisée Supprimer en toute sécurité

• Maj + F6
  Renommer Renommer

• Ctrl + Alt + N
  Variable intégrée variable en ligne

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

• Ctrl + Alt + V
  Introduire la variable

• Ctrl + Alt + F
  Introduire le champ

• Ctrl + Alt + C
  Introduire la constante Présentation des constantes

• Système de contrôle de version VCS/Historique local/raccourcis liés à l'histoire locale dans WebStorm Key
  

Alt + BackQuote( )

'VCS'popup rapide VCS

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

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

• Alt + Shift + C
  Afficher les modifications récentes Afficher les dernières modifications

• Touches de raccourci générales couramment utilisées lors de l'utilisation de WebStorm
  

Ctrl + Maj +A

Rechercher une action Rechercher et appeler la fonction de l'éditeur

• Alt + #[0-9]
  Ouvrir la fenêtre de l'outil correspondante Basculer rapidement pour ouvrir le module d'interface

• Ctrl + Alt + F11
  Basculer en plein écran mode Changer le mode plein écran

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

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

• Alt + Maj + I
  Inspecter le fichier actuel avec le profil actuel Vérifier le fichier actuel à l'aide des propriétés actuelles

• Ctrl + BackQuote( )
  Changer rapidement le schéma actuel Changer rapidement les combinaisons existantes

• 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 la fenêtre outil (avec les touches de raccourci Windows Conflit)

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!