Remarque : PhpStorm comprend toutes les fonctionnalités HTML, CSS et JavaScript de WebStorm.
La saisie automatique de code JavaScript, HTML et CSS pour les balises, mots clés, étiquettes, variables, paramètres et fonctions, est basée sur DOM et prend en charge les spécificités des navigateurs les plus courants comme Firefox et Chrome.
La saisie automatique est disponible pour les fonctions standards et définies par l'utilisateur des fichiers *.js, des gestionnaires d'événements HTML et de tout autre contexte approprié.
Sass, SCSS, Less, Stylus, Compass, CoffeeScript, TypeScript, Dart et les autres technologies de développement web de pointe sont pris en charge.
Live Editing Preview vous fait gagner beaucoup de temps et vous évite de nombreuses manipulations. Ouvrez une page dans l'éditeur et dans le navigateur afin de visualiser les deux et activez Live Edit pendant une session de débogage JavaScript. Commencez à éditer le code et voyez les modifications se répercuter instantanément dans le navigateur, même quand vous parcourez les propositions de la saisie automatique de code.
PhpStorm enregistre automatiquement les modifications et le navigateur actualise intelligemment la page à la volée pour refléter ces modifications.
Profitez des avantages de la saisie automatique/transpilation des langues de développement web modernes pour coder en JavaScript (depuis CoffeeScript, TypeScript, Dart, etc) ou en CSS (from Sass, SCSS, Less, Stylus, Compass, etc.) avec File Watchers.
L'éditeur vous permet d'utiliser toute la puissance d'Emmet (appelé auparavant Zen Coding). Définissez vos propres abréviations (extraits de code) grâce aux modèles dynamiques, ou utilisez celles qui sont prédéfinies pour PHP, HTML, CSS, JS et d'autres langages.
PhpStorm détecte et suggère des correctifs automatiques pour certains problèmes : attributs obligatoires manquants, attributs non valides ou valeurs illégales, mauvaises références vers les fichiers dans des liens, doublons d'attributs, format du sélectionneur CSS non valide, propriétés CSS non valides, définitions de classes CSS inutilisées, ancres locales non valides, et bien d'autres.
Les possibilités de refactorisation fournies pour le JavaScript vous permettent de modifier facilement la structure du code et d'annuler les modifications. Voici certaines des refactorisations disponibles pour JS : Rename, Extract Variable/Function, Inline Variable/Function, Move/Copy, Safe Delete, Extract embedded script into file.
Les outils de qualité de code JavaScript sont intégrés à l'éditeur JavaScript pour vérifier votre code pendant que vous le modifiez. Ouvrez Settings, saisissez JSLint/JSHint, activez une inspection et votre code sera vérifié au niveau de ces inspections pendant la frappe.
PhpStorm prend intégralement en charge Node.js avec un plugin gratuit disponible dans le référentiel. Elle propose la saisie automatique de code, le surlignage, la navigation, la vérification d'erreurs, le débogage, la gestion des packages avec npm, et plus encore.
Pour ceux qui préfèrent avoir une longueur d'avance, PhpStorm offre la prise en charge d'ECNAScript Harmony. Pour essayer les nouvelles fonctionnalités, définissez ECMAScript Harmony comme version de langage JavaScript dans les paramètres de l'IDE.
PhpStorm prend en charge le moteur de modèle EJS (surlignage de la syntaxe, assistance saisie, mise en forme, etc.) et propose la mise en forme et la mise en évidence des éléments de syntaxe pour les modèles Handlebars et Mustache, ainsi que la fermeture automatique des balises.
La prise en charge initiale des composants web est également assurée.
La prise en charge d'Angular de PhpStorm comprend la saisie automatique de code et la navigation pour les directives et les liaisons, mais également la compréhension des nouveaux attributs d'événement pour TypeScript ou ECMAScript 2015.
Vous pouvez utiliser les annotations de type que Flow ajoute à JavaScript. Si vous utilisez des méthodes et fonctions annotées, vous recevez des infos sur les types de paramètres dans la saisie automatique de code.
PhpStorm assure l'intégration avec TSLint, un linter pour code TypeScript. Activez-le pour afficher les avertissements et erreurs de TSLint directement dans l'éditeur, pendant la frappe.
Profitez de l'assistance au codage pour le langage de modèle Vue et le langage de votre choix dans les blocs style et script d'un fichier .vue. L'IDE complète automatiquement les composants Vue et ajoute les importations requises pour ces derniers.