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.
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.
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.
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.
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.
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 -> 🎜>
Fichier -> Paramètres -> github, entrez et modifiez le compte github. vous n'en avez pas besoin.
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)
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
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.
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
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
'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'éditeurAlt + #[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!
Comment agrandir Webstorm
Comment résoudre le crash du Webstorm
Pourquoi Webstorm ne peut pas exécuter le fichier
webstorm ajuster la taille de la police
Comment créer du HTML avec Webstorm
Comment créer un nouveau dossier dans Webstorm
Méthode de projet de démarrage Webstorm
webstorm a été remplacé par la version chinoise
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
