J'ai vu un article introduisant Webstrom sur Internet et j'ai pensé que la fonction est vraiment puissante. Je sais également pourquoi les fichiers transmis à GitHub sur la frontale d'Alibaba ont un fichier .IDEA. (On dit que Taobao recommande d'écrire JS pour utiliser Webstrom à l'intérieur)
Nous pouvons comprendre qu'IDE intègre de nombreuses fonctionnalités que vous souhaitez ou des fonctionnalités que vous ne souhaitez pas. En d'autres termes, les éditeurs avec de nombreux plug-ins sont installés, donc jusqu'à présent, je pense toujours qu'il n'est pas nécessaire d'installer des plug-ins pour cela.
Ensuite, commençons à introduire les fonctionnalités spéciales de Webstrom :
WebStorm est un outil de développement JavaScript commercial lancé par JetBrains
Tout éditeur doit être enregistré (CTRL + S), qui est la fonctionnalité de l'édition de logiciels sur toutes les plates-formes Win, mais le coin supérieur droit du fichier d'édition de WebStorm n'a pas ce familier *.
Avantages: Après avoir éliminé Ctrl + S, vous pouvez voir la page de résultat sans déplacer la souris.
Inconvénient: sans le logo * précédent, il sera stocké immédiatement si le clavier est mal opéré.
Tant que le fichier est fermé, il n'y aura pas d'historique pour un éditeur, mais Webstorm l'a. VCS-> Historique local -> Afficher l'histoire (clé 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 + Y est la raison pour laquelle dans WebStorm, c'est à cause de la suppression d'une ligne).
Inconvénients: ces enregistrements historiques ont disparu après la fermeture et le redémarrage de la ligne de bière; Un autre inconvénient est que la consommation de mémoire causée par cela sera inévitablement relativement importante.
Tout éditeur n'a pas de version locale sauf Server SVN, mais WebStorm fournit un historique de modification de fichiers local (clé de raccourci: Alt + Shift + C). Vous pouvez également Ctrl + E pour faire apparaître le fichier récemment ouvert.
Avantages: Équivalent au SVN local.
Inconvénient: la consommation de mémoire doit être relativement importante.
Intègre Zencoding, HTML5, FTP, édition instantanée (Chrome), complétion automatique, Debugger JavaScript basé à Mozilla, JSLinnt, moins de support, support CoffeeScript, Node.js, test unitaire, Contrôle de version GIT et SVN intégré et autres fonctionnalités.
Lors de l'écriture de CSS, vous inviterez intelligemment divers fichiers et images, vous n'avez donc plus besoin de confirmer si ce fichier existe.
D'autres fonctionnalités sont introduites. Si vous voulez en savoir plus, vous pouvez vous rendre sur le site officiel du Webstrom pour continuer à rechercher. Après avoir lu cette introduction et tant de fonctionnalités puissantes, êtes-vous invité à essayer ce légendaire artefact frontal tout de suite? Um.
Tout d'abord, après avoir téléchargé Webstrom sur la page de téléchargement officielle, cliquez sur Installer, puis continuez à l'étape suivante. Enfin, l'interface de code d'enregistrement apparaîtra, car Webstrom est un IDE commercial, et bien sûr, le frontal en soie du Tianchao n'a pas cet argent pour acheter un artefact aussi cher. Ne vous inquiétez pas, nous pouvons utiliser la touche WebStorm pour apprendre à utiliser cet artefact frontal. Hehe ~~~~
Une fois l'installation réussie, je me sentirai certainement un peu mal à l'aise, tout comme je pense que cette palette de couleurs est vraiment trop sensée. Il y a des paramètres que je ne veux pas non plus. Ensuite, ci-dessous, je vais énumérer les paramètres auxquels je suis habitué.
Quelques conseils de configuration après l'installation de Webstor :
Comment changer le thème (Polices et Color Scheme):
Fichier -> Paramètres -> Éditeur -> Couleurs et polices -> Nom du schéma. Adresse de téléchargement du thème
Comment empêcher WebStorm d'ouvrir des fichiers de projet au démarrage:
Fichier -> Paramètres-> Général Supprimer Référer le dernier projet au démarrage.
Comment afficher parfaitement le chinois:
Vérifiez les polices par défaut de remplacement par (non recommandées) dans le fichier -> Paramètres-> Apparence, nom de définition: nsimsun, taille: 12
Comment afficher les numéros de ligne:
Fichier -> Paramètres-> Éditeur, "Afficher les numéros de ligne" Vérifiez-le et le numéro de ligne sera affiché.
Comment envelopper automatiquement le code:
Fichier -> Paramètres -> L'éditeur "Utiliser des wraps soft dans l'éditeur" est accroché et le code enveloppera automatiquement la ligne
Comment cliquer sur le curseur, il sera affiché à la fin de cette ligne:
Fichier -> Paramètres-> Éditeur "Autoriser le placement de Caret après la fin de la ligne" Il suffit de supprimer le crochet.
Comment modifier la clé rapide:
Fichier -> Paramètres-> keymap, puis double-cliquez sur la fonction que vous souhaitez modifier rapidement. Il y aura une boîte invite. Suivez les invites.
Passez aux touches rapides que vous connaissez l'éditeur:
Fichier -> Paramètres-> KeyMAP prend en charge les IDE traditionnels tels que Visual Studio, Eclipse et NetBeans.
Invites de bibliothèque de classe JavaScript.
Fichier -> Paramètres -> JavaScript -> Libraries -> Sélectionnez ensuite la bibliothèque de classe JavaScript que vous utilisez souvent dans la liste, et enfin télécharger et installer sera OK.
Lors du développement de JS, il est constaté que le retour CTRL + est nécessaire pour sélectionner les candidats:
Fichier -> Paramètres -> Éditeur -> Achèvement du code -> Préservez la première suggestion: "Smart" à "Always"
L'invite js est lente
Fichier -> Complétion du code -> Autopopup en 1000 à 0
Configuration GIT:
Fichier -> Paramètres -> Éditeur -> github, allez et modifiez le compte GitHub, s'il n'y a pas de git, vous n'en avez pas besoin.
Installation du plugin:
Fichier -> Plugins, puis sélectionnez les plugins puissants et installez-les. (Le plugin "CSS-X-FIRE" est utilisé pour modifier les attributs CSS à l'aide de Firebug, le code CSS dans l'éditeur changera également.)
Mettre à jour plus tard
Expérience d'utilisation de Webstorm
Fonction des favoris:
Lorsque le répertoire du projet est énorme, certaines sous-répertoires sont ouvertes très souvent, mais les niveaux sont très profonds. Pour le moment, vous pouvez ajouter le répertoire à vos favoris. Après un ajout réussi, il y a un menu "Favoris" à gauche.
Navigation sur la chapelure:
En plus de la page du projet à gauche, vous pouvez sélectionner un répertoire, sous le menu supérieur, un répertoire similaire à la navigation sur le pain du site Web peut également atteindre la même fonction. Cliquer sur chaque répertoire aura un menu déroulant pour afficher les sous-répertoires en dessous, ce qui est très pratique.
Interface du constructeur:
Si les commentaires sont conformes au format, il apparaîtra. S'il s'agit d'un fichier JS, c'est une fonction et un objet de la classe JS; S'il s'agit d'un fichier CSS, il s'agit d'un résumé du fichier CSS; S'il s'agit d'un fichier HTML, il s'agit d'un diagramme de structure de nœud. Soit dit en passant, il s'agit de la commodité de visualiser la structure du code.
Interface TODO:
Cette interface apparaîtra si vous ajoutez des commentaires à Todo au code
Interface de code double colonne:
Cliquez avec le bouton droit sur le fichier sur l'onglet Code, et cliquez avec le bouton droit -> renversé verticalement (deux écrans à gauche et à droite) ou renversé horizontalement (deux écrans en supérieur et inférieur)
Caractéristiques de l'histoire locale:
Une bonne façon de récupérer le code
Utiliser Git
WebStorm intègre uniquement les opérations communes de GIT et ne peut pas remplacer complètement les outils de ligne de commande. Dans le coin inférieur droit de l'interface, vous pouvez vérifier dans quelle branche GIT vous vous trouvez. Vous pouvez également cliquer pour changer ou créer une nouvelle branche ci-dessus.
Vérifiez la différence 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 -> Comparez avec et sélectionnez la bibliothèque de versions que vous souhaitez comparer.
Description de la clé de raccourci Webstorm:
Édition de clés de raccourci liées à l'édition
Ctrl + espace:
Achèvement de code de base (nom de toute classe, méthode ou variable) Complétion du code de base (toute classe, fonction ou nom de variable), changé en alt + s
Ctrl + Shift + Entrée:
Déclaration complète Terminez l'instruction actuelle
Ctrl + P:
Informations sur les paramètres (dans les arguments d'appel de méthode) Les informations des paramètres incluent les paramètres d'appel de la méthode
Ctrl + souris sur le code
Brèves informations Informations simples
Ctrl + F1
Afficher la description de l'erreur ou l'avertissement aux soins Afficher l'erreur ou l'avertissement aux soins
ALT +
Générer du code… (Getters, Setters, Constructeurs) Créez un nouveau fichier ou générez du code,… Constructeurs, vous pouvez créer des méthodes Getters et Définir pour n'importe quel champ de la classe
Ctrl + o
Méthode de surcharge des méthodes de remplacement
Ctrl + i
Mettre en œuvre la méthode de mise en œuvre des méthodes
Ctrl + alt + t
Entourer de… (si, sinon, essayez, attrapez, pour, etc.) utilise * pour entourer la ligne de code sélectionnée, (* inclut si, tandis que, essayez Catch, etc.)
Ctrl + /
Commentaire / inconnu avec la ligne de commentaire de commentaire comment commentaire / inconnu
Ctrl + shift + /
Commentaire / inconnu avec le bloc de commentaire Bloc commentaire / inconnu
Ctrl + w
Sélectionnez l'augmentation avec succès des blocs de code Sélectionnez des blocs de code, généralement une sélection incrémentale
Ctrl + shift + w
Diminuer la sélection de courant à l'état précédent La secours de la clé de raccourci précédente, le code de sélection décrément
Alt + q
Informations de contexte Informations contextuelles
Alt + Entrez
Montrer des actions d'intention et des fixes rapides
Ctrl + alt + l
Code des formats de code Reformat Selon le format du modèle
Onglet / Shift + Tab
Lignes sélectionnées à un indent / non-indent
Ctrl + x ou shift + supprimer
Coupez la ligne actuelle ou le bloc sélectionné dans le presse-papiers
Ctrl + C ou Ctrl +
Copiez la ligne actuelle ou le bloc sélectionné sur le panneau de puce Copier la ligne actuelle ou le bloc de code sélectionné dans le presse-papiers
Ctrl + V ou Shift + INSERT
Coller du presse-papiers
Ctrl + Shift + V
Coller à partir de tampons récents collez le dernier contenu du tampon
Ctrl + d
Dupliquer la ligne actuelle ou le bloc sélectionné Copier la ligne actuelle ou le bloc de code sélectionné
Ctrl + y
Supprimer la ligne à Care Supprimer la ligne au curseur
Ctrl + Shift + J
Smart Line Join (HTML et JavaScript uniquement)
Ctrl + Entrée
Smart Line Split (HTML et JavaScript uniquement)
Shift + Entrée
Démarrer une nouvelle ligne
Ctrl + shift + u
Basculer le dossier pour les soins ou la conversion de cas de bloc sélectionné
Ctrl + shift +] / [
Sélectionnez jusqu'à la fin du bloc de code / Démarrage jusqu'à la fin / démarrage du bloc de code
Ctrl + Supprimer
Supprimer à la fin du mot Supprimer la fin du texte
Ctrl + arrière
Supprimer sur le mot Démarrer Supprimer le texte Démarrer
Ctrl + numpad +/-
Bloc de code élargissant / effondrer
Ctrl + Shift + Numpad +
Développer tout
Ctrl + shift + numpad-
S'effondrer tout
Ctrl + F4
Embarquer l'onglet Éditeur actif Closez la balise d'édition active
Rechercher / remplacer la recherche / remplacer les touches de raccourci associées
Ctrl + f
Trouver un code de recherche rapide dans le fichier actuel
Ctrl + shift + f
Rechercher dans le chemin Spécifiez le chemin à trouver dans le fichier
F3
Trouver ensuite
Shift + F3
Trouver précédemment
Ctrl + r
Remplacez le remplacement du code dans le fichier actuel
Ctrl + shift + r
Remplacer le chemin Spécifiez la substitution par lots du code dans le fichier
Touches de raccourci liées à la recherche de recherche d'utilisation
Alt + F7 / Ctrl + F7
Trouver des usages / trouver des usages dans le fichier trouver l'utilisation / trouver l'utilisation
Ctrl + Shift + F7
Mettre en évidence les usages dans le fichier
Ctrl + Alt + F7
Utilisation de la montre
En cours d'exécution
Alt + Shift + F10
Sélectionnez la configuration et l'exécution
Alt + Shift + F9
Sélectionnez Configuration et débogage Sélectionnez l'architecture pour corriger les vulnérabilités
Shift + F10
Courir
Shift + F9
Débogage des vulnérabilités de patch
Ctrl + Shift + F10
Exécuter la configuration du contexte à partir de l'éditeur Exécuter l'architecture de contenu de l'éditeur
Ctrl + shift + x
Exécuter la ligne de commande
Débogage des touches de raccourci liées à débogage
F8
Step over n'entre pas la fonction
F7
Entrez étape par étape
Shift + F7
Étape intelligente dans un pas intelligent
Shift + F8
Sortir
Alt + F9
Courez vers le curseur courir vers le curseur
Alt + F8
Évaluer l'expression
F9
Le programme de CV redémarre le programme
Ctrl + F8
Point de rupture de point de rupture à bascule
Ctrl + Shift + F8
Afficher les points d'arrêt
Clés de raccourci liées au positionnement de la navigation
Ctrl + n
Allez en classe sauter à la classe spécifiée
Ctrl + shift + n
Allez dans le fichier trouver rapidement des fichiers dans un projet via des noms de fichiers
Ctrl + alt + shift + n
Aller au symbole trouver la position de la fonction par un caractère
Alt + droit / gauche
Accédez à l'onglet éditeur suivant / précédent, allez à l'option Editor suivante / précédente
F12
Revenez à la fenêtre de l'outil précédent
Échap
Allez dans l'éditeur (à partir de la fenêtre d'outil) Entrez l'éditeur à partir de la fenêtre d'outil
Shift + ESC
Masquer une fenêtre active ou active
Ctrl + Shift + F4
Fermer une activité active RUN / MESSAGE / Find /… TAB CLOSE….
Ctrl + g
Aller à la ligne de sauter à la ligne
Ctrl + e
Fichiers récents contextuels du fichier récemment ouvert
Ctrl + alt + gauche / droite
Naviguer en arrière / avant naviguer vers l'avant / le dos
Ctrl + Shift + Backspace
Accédez à Last Edit Emplacement Naviguez vers Last Edit Lieu
Alt + F1
Sélectionnez le fichier ou le symbole actuel dans n'importe quelle vue Recherchez l'emplacement du code ou du fichier actuellement sélectionné dans d'autres modules d'interface
Ctrl + B ou Ctrl + Click
Aller à la déclaration de la Définition
Ctrl + alt + b
Accédez à Implémentation (S) Méthode de saut Lieu d'implémentation
Ctrl + shift + b
Accédez à la définition de la méthode de saut de la déclaration de type
Ctrl + shift + i
Ouvrir la recherche rapide de définition ouverte Définition Quick Search
Ctrl + u
Accédez à une méthode de saut / super-classe Super-Method / Super-Class / Super-Class
Alt + Up / Down
Accédez à la méthode précédente / suivante déplacer rapidement le positionnement entre les méthodes
Ctrl +] / [
Déplacez-vous vers le bloc de code fin / démarrage du saut à la fin / début du bloc d'encodage
Ctrl + F12
Structure de fichiers contextuelle de la structure de fichiers Perspépliés
Ctrl + h
Hiérarchie de type hiérarchie
Ctrl + alt + h
Hiérarchie d'appel Hiérarchie
F2 / Shift + F2
Suivant / précédent Erreur mise en évidence Sautez à l'erreur suivante / précédente, mettez en surbrillance l'erreur ou l'avertissement pour localiser rapidement, utilisez cette touche de raccourci pour sauter rapidement entre les mauvaises instructions.
F4 / Ctrl + Entrée
Modifier la source / la source Source Modifier la source / vue de la vue
ALT + HOME
Afficher la barre de navigation
F11
Bouetter à basculer le marqueur de basculement
Ctrl + F11
Boucler les signets avec mnémonique
Ctrl + # [0-9]
Allez dans le signet numéroté de sauter à la marque numérotée
Shift + F11
Exposer les signets
Refactorisation des clés de raccourci liées à la refactorisation
F5
Copie
F6
Se déplacer
Alt + supprimer
Supprimer en toute sécurité Supprimer
Shift + F6
Renommer de la renommée
Ctrl + alt + n
Variables d'intégration variable en ligne
Ctrl + alt + m
Extraire Méthode (JavaScript uniquement) Extrait de la fonction d'extraction
Ctrl + alt + v
Variable d'introduction
Ctrl + alt + f
Champ d'introduction
Ctrl + alt + c
Introduction constante
VCS / Historique local Système de contrôle de version / touches de raccourci liées à l'historique local
Alt + backquote ()
«VCS'quick popup vcs rapidement
Ctrl + k
Commissez le projet à VCS Soumettre le projet à VCS
Ctrl + t
Mettre à jour le projet à partir du projet de mise à jour VCS à partir de VCS
Alt + shift + c
Voir les changements récents Voir les derniers changements
Clés de raccourci connexes couramment utilisées pour le général
Ctrl + shift + a
Trouver l'action la fonction de trouver et d'appeler l'éditeur
Alt + # [0-9]
Ouvrir la fenêtre d'outil correspondante commutant rapidement pour ouvrir le module d'interface
Ctrl + alt + f11
Mode à bascule en mode plein écran Mode plein écran
Ctrl + Shift + F12
Toggle maximisation de l'éditeur
Alt + shift + f
Ajouter aux favoris Ajoutez le fichier actuel à vos favoris
Alt + shift + i
Inspectez le fichier actuel avec le profil actuel Vérifiez le fichier actuel avec le profil actuel
Ctrl + backquote ()
Schéma de courant de courant rapide du schéma de courant rapide
Ctrl + alt + s
Ouvrir la boîte de dialogue des paramètres Ouvrez la boîte de dialogue Paramètres
Onglet Ctrl +
Communiquez entre les onglets et la conversion des fenêtres d'outils (conflits avec les touches de raccourci Windows)
Avez-vous déjà connu cet outil de développement JavaScript Webstrom? J'ai hâte de l'essayer, et je vous garantis que vous l'aimerez après l'avoir utilisé.