JavaScript dans Visual Studio 2017JavaScript in Visual Studio 2017

JavaScript est un langage de premier ordre dans Visual Studio.JavaScript is a first-class language in Visual Studio. Vous pouvez utiliser la plupart ou toutes les aides standard de modification (extraits de code, IntelliSense, etc.) lorsque vous écrivez du code JavaScript dans l'IDE de Visual Studio.You can use most or all of the standard editing aids (code snippets, IntelliSense, and so on) when you write JavaScript code in the Visual Studio IDE. Vous pouvez écrire du code JavaScript pour de nombreux types d'applications et services.You can write JavaScript code for many application types and services.

Note

Nous nous sommes joints aux efforts de la communauté afin de faire de MDN web docs la ressource de développement unique et de premier plan du web, en redirigeant la totalité de la documentation de référence sur les API JavaScript de Microsoft (plus de 500 pages) depuis docs.microsoft.com vers les supports MDN équivalents.We have joined the community-wide effort to make MDN web docs the web’s one-stop, premiere development resource, by redirecting all (500+ pages) of Microsoft’s JavaScript API reference from docs.microsoft.com to their MDN counterparts. Pour plus d’informations, consultez cette annonce.For details, see this announcement.

Prise en charge d’ECMAScript 2015 (ES6) et ultérieurSupport for ECMAScript 2015 (ES6) and beyond

Visual Studio prend désormais en charge la syntaxe des mises à jour de langage ECMAScript, par exemple ECMAScript 2015/2016.Visual Studio now supports syntax for ECMAScript language updates such as ECMAScript 2015/2016.

En quoi consiste ECMAScript 2015 ?What is ECMAScript 2015?

JavaScript est un langage de programmation en constante évolution, et TC39 est le comité en charge des mises à jour.JavaScript is still evolving as a programming language and TC39 is the committee responsible for making updates. ECMAScript 2015 est une mise à jour du langage JavaScript qui introduit de nouvelles fonctionnalités et de nouveaux éléments de syntaxe pratiques.ECMAScript 2015 is an update to the JavaScript language that brings helpful new syntax and functionality. Pour une présentation approfondie des fonctionnalités d’ES6, consultez ce site de référence.For a deep dive on ES6 features, check out this reference site.

Outre ECMAScript 2015, Visual Studio prend en charge ECMAScript 2016 et toutes les nouvelles versions d’ECMAScript dès leur publication.In addition to support for ECMAScript 2015, Visual Studio also supports ECMAScript 2016 and will have support for future versions of ECMAScript as they are released. Pour vous tenir informé des derniers changements dans ECMAScript, suivez les travaux de TC39 sur github.To keep up with TC39 and the latest changes in ECMAScript, follow their work on github.

Transpiler du JavaScriptTranspile JavaScript

Le problème qui revient souvent avec JavaScript, c’est que les dernières fonctionnalités du langage ES6+ qui vous aident à être plus productif ne sont pas prises en charge par vos environnements d’exécution (souvent des navigateurs).A common problem with JavaScript is that you want to use the latest ES6+ language features because they help you be more productive, but your runtime environments (often browsers) don't yet support these new features. Vous devez donc soit déterminer les fonctionnalités prises en charge par les navigateurs (ce qui peut être fastidieux), soit trouver un moyen de convertir votre code ES6+ en une version comprise par vos runtimes cibles (en général ES5).This means that you either have to keep track of which browsers support what features (which can be tedious), or you need a way to convert your ES6+ code into a version that your target runtimes understand (usually ES5). La conversion de votre code en une version comprise par le runtime est communément appelée « transpilation ».Converting your code to a version that the runtime understands is commonly referred to as "transpiling".

L’une des fonctionnalités clés de TypeScript est la possibilité de transpiler du code ES6+ vers ES5 ou ES3. Vous pouvez ainsi écrire du code qui optimise votre productivité et l’exécuter sur n’importe quelle plateforme.One of the key features of TypeScript is the ability transpile ES6+ code to ES5 or ES3 so that you can write the code that makes you most productive, but still run your code on any platform. Étant donné que JavaScript dans Visual Studio 2017Visual Studio 2017 utilise le même service de langage que TypeScript, il peut également tirer parti de la transpilation d’ES6+ vers ES5.Because JavaScript in Visual Studio 2017Visual Studio 2017 uses the same language service as TypeScript, it too can take advantage of ES6+ to ES5 transpilation.

Avant de configurer la transpilation, vous devez comprendre les options de configuration.Before transpilation can be set up, some understanding of the configuration options is required. TypeScript est configuré par le biais d’un fichier tsconfig.json.TypeScript is configured via a tsconfig.json file. En l’absence de ce fichier, certaines valeurs par défaut sont utilisées.In the absence of such a file, some default values are used. Pour des raisons de compatibilité, ces valeurs sont différentes si seuls sont présents des fichiers JavaScript (et, éventuellement, des fichiers .d.ts).For compatibility reasons, these defaults are different in a context where only JavaScript files (and optionally .d.ts files) are present. Pour compiler des fichiers JavaScript, vous devez ajouter un fichier tsconfig.json et définir explicitement certaines de ces options.To compile JavaScript files, a tsconfig.json file must be added, and some of these options must be set explicitly.

Les paramètres obligatoires pour le fichier tsconfig sont les suivants :The required settings for the tsconfig file are as follows:

  • allowJs : cette valeur doit être définie sur true pour les fichiers JavaScript à reconnaître.allowJs: This value must be set to true for JavaScript files to be recognized. La valeur par défaut est false, car TypeScript est compilé en JavaScript, et le compilateur ne doit pas inclure des fichiers qu’il vient de compiler.The default value is false, because TypeScript compiles to JavaScript, and the compiler should not include files it just compiled.
  • outDir : vous devez définir ce paramètre sur un emplacement non inclus dans le projet, afin que les fichiers JavaScript émis ne soient pas détectés, puis inclus dans le projet (voir exclude).outDir: This value should be set to a location not included in the project, in order that the emitted JavaScript files are not detected and then included in the project (see exclude).
  • module : si vous utilisez des modules, ce paramètre indique au compilateur le format de module que le code émis doit utiliser (par exemple commonjs pour Node, ou des outils de bundle comme Browserify).module: If using modules, this setting tells the compiler which module format the emitted code should use (for example commonjs for Node, or bundlers such as Browserify).
  • exclude : ce paramètre indique les dossiers à ne pas inclure dans le projet.exclude: This setting states which folders not to include in the project. L’emplacement de sortie, ainsi que les dossiers autres que les dossiers de projet tels que node_modules ou temp, doivent être ajoutés à ce paramètre.The output location, as well as non-project folders such as node_modules or temp, should be added to this setting.
  • enableAutoDiscovery : ce paramètre permet de détecter et télécharger automatiquement les fichiers de définition, comme indiqué précédemment.enableAutoDiscovery: This setting enables the automatic detection and download of definition files as outlined previously.
  • compileOnSave : ce paramètre indique au compilateur s’il doit réexécuter la compilation chaque fois qu’un fichier source est enregistré dans Visual Studio.compileOnSave: This setting tells the compiler if it should recompile any time a source file is saved in Visual Studio.
  • typeAcquisition : cet ensemble de paramètres contrôle le comportement de l’acquisition de type automatique (pour plus de détails, consultez cette section).typeAcquisition: This set of settings control the behavior of automatic type acquisition (further explain in this section)

Pour pouvoir convertir des fichiers JavaScript en modules CommonJS et les placer dans un dossier ./out, vous pouvez utiliser le fichier tsconfig.json suivant :In order to convert JavaScript files to CommonJS modules and place them in an ./out folder, you could use the following tsconfig.json file:

{
  "compilerOptions": {
    "module": "commonjs",
    "allowJs": true,
    "outDir": "out"
  },
  "exclude": [
    "node_modules",
    "wwwroot",
    "out"
  ],
  "compileOnSave": true,
  "typeAcquisition": {
    "enable": true
  }
}

Une fois les paramètres en place, s’il existe un fichier source (./app.js) contenant plusieurs fonctionnalités de langage ECMAScript 2015 comme suit :With the settings in place, if a source file (./app.js) existed and contained several ECMAScript 2015 language features as follows:

import {Subscription} from 'rxjs/Subscription';  // ES6 import

class Foo {  // ES6 Class
    sayHi(name) {
        return `Hi ${name}, welcome to Salsa!`;  // ES6 template string
    }
}

export let sqr = x => x * x;  //ES6 export, let, and arrow function
export default Subscription;  //ES6 default export

Un fichier ciblant ECMAScript 5 (par défaut) est alors émis vers ./out/app.js, qui se présente comme suit :Then a file would be emitted to ./out/app.js targeting ECMAScript 5 (the default) that looks something like the following:

"use strict";
var Subscription_1 = require('rxjs/Subscription');
var Foo = (function () {
    function Foo() {
    }
    Foo.prototype.sayHi = function (name) {
        return "Hi " + name + ", welcome to Salsa!";
    };
    return Foo;
}());
exports.sqr = function (x) { return x * x; };
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = Subscription_1.Subscription;

Fonctionnalités IntelliSense amélioréesBetter IntelliSense

JavaScript IntelliSense dans Visual Studio 2017Visual Studio 2017 affiche désormais beaucoup plus d’informations sur les listes de paramètres et de membres.JavaScript IntelliSense in Visual Studio 2017Visual Studio 2017 will now display a lot more information on parameters and member lists. Ces nouvelles informations sont fournies par le service de langage TypeScript, qui utilise l’analyse statique en arrière-plan pour mieux comprendre votre code.This new information is provided by the TypeScript language service, which uses static analysis behind the scenes to better understand your code. Vous trouverez plus d’informations sur la nouvelle expérience IntelliSense et son fonctionnement ici.You can read more about the new IntelliSense experience and how it works here.

Prise en charge de la syntaxe JSXJSX syntax support

JavaScript dans Visual Studio 2017Visual Studio 2017 offre une prise en charge étendue de la syntaxe JSX.JavaScript in Visual Studio 2017Visual Studio 2017 has rich support for the JSX syntax. JSX est un ensemble de syntaxes qui autorise les balises HTML dans les fichiers JavaScript.JSX is a syntax set that allows HTML tags within JavaScript files.

L’illustration suivante montre un composant React défini dans le fichier TypeScript comps.tsx, puis utilisé à partir du fichier app.jsx, où il est possible de recourir à IntelliSense pour les saisies semi-automatiques et la documentation dans les expressions JSX.The following illustration shows a React component defined in the comps.tsx TypeScript file, and then this component being used from the app.jsx file, complete with IntelliSense for completions and documentation within the JSX expressions. Vous n’avez pas besoin de TypeScript ici ; il se trouve simplement que cet exemple contient également du code TypeScript.You don't need TypeScript here, this specific example just happens to contain some TypeScript code as well.

Note

Pour convertir la syntaxe JSX en appels React, vous devez ajouter le paramètre "jsx": "react" à compilerOptions dans le fichier tsconfig.json.To convert the JSX syntax to React calls, the setting "jsx": "react" must be added to the compilerOptions in the tsconfig.json file.

Le fichier JavaScript créé à l’emplacement « ./out/app.js » au moment de la génération doit contenir le code :The JavaScript file created at `./out/app.js' upon build would contain the code:

"use strict";
var comps_1 = require('./comps');
var x = React.createElement(comps_1.RepoDisplay, {description: "test"});

Configurer votre projet JavaScriptConfigure your JavaScript project

Le service de langage, qui repose sur l’analyse statique, analyse votre code source sans l’exécuter pour retourner les résultats d’IntelliSense et proposer d’autres fonctionnalités d’édition.The language service is powered by static analysis, which means it analyzes your source code without actually executing it in order to return IntelliSense results and provide other editing features. Par conséquent, plus la quantité et la taille des fichiers inclus dans votre contexte de projet sont importantes, plus la mémoire et le processeur sont mis à contribution durant l’analyse.Therefore, the larger the quantity and size of files that are included your project context, the more memory and CPU will be used during analysis. Pour cette raison, quelques hypothèses par défaut sont émises sur la forme de votre projet :Because of this, there are a few default assumptions that are made about your project shape:

  • Les listes package.json et bower.json répertorient les dépendances utilisées par votre projet, et sont incluses par défaut dans l’acquisition de type automatique (ATA).package.json and bower.json list dependencies used by your project and by default are included in Automatic Type Acquisition (ATA)
  • Un dossier node_modules de premier niveau contient le code source de la bibliothèque, et son contenu est exclu du contexte du projet par défautA top level node_modules folder contains library source code and its contents are excluded from the project context by default
  • Tout autre fichier .js, .jsx, .ts et .tsx peut être l’un de vos propres fichiers sources et doit être inclus dans le contexte du projetEvery other .js, .jsx, .ts, and .tsx file is possibly one of your own source files and must be included in project context

Dans la plupart des cas, vous pouvez simplement ouvrir votre projet et obtenir de bons résultats avec la configuration de projet par défaut.In most cases, you will be able to just open your project and have great experience using the default project configuration. Cependant, dans les projets de grande ampleur ou avec des structures de dossiers différentes, il peut être souhaitable d’affiner la configuration du service de langage pour mieux cibler vos propres fichiers sources.However, in projects that are large or have different folder structures, it may be desirable to further configure the language service to better focus only on your own source files.

Remplacer les options par défautOverride defaults

Vous pouvez remplacer la configuration par défaut en ajoutant un fichier tsconfig.json à la racine de votre projet.You can override the default configuration by adding a tsconfig.json file to your project root. Un fichier tsconfig.json comprend plusieurs options vous permettant de manipuler le contexte de votre projet.A tsconfig.json has several different options that can manipulate your project context. Certaines d’entre elles sont répertoriées ci-dessous. Pour obtenir l’ensemble complet de toutes les options disponibles, consultez le magasin de schémas.A few of them are listed below, but for a full set of all options available, see the schema store.

Options importantes de tsconfig.jsonImportant tsconfig.json options

{
  "compilerOptions": {
    "allowJs": true,          // include .js and .jsx in project context (defaults to only .ts and .tsx)
    "noEmit": true            // turns off downlevel compiler
  },
  "files": [],                // list of explicit files to include in the project context. Highest priority.
  "include": [],              // list of folders or glob patterns to include in the project context.
  "exclude": [],              // list of folders or glob patterns to exclude. Overridden by files array.
  "typeAcquisition": {
    "enable": true,           // Defaulted to "false" with a tsconfig. Enables better IntelliSense in JS.
    "include": [ "jquery" ],  // Specific libs to fetch .d.ts files that weren't picked up by ATA
    "exclude": [ "node" ]     // Specific libs to not fetch .d.ts files for
  }
}

Exemple de configuration de projetExample project configuration

Pour un projet donné avec la configuration suivante :Given a project with the following setup:

  • Les fichiers sources du projet sont dans wwwroot/jsproject's source files are in wwwroot/js
  • Les fichiers lib du projet sont dans wwwroot/libproject's lib files are in wwwroot/lib
  • bootstrap, jquery, jquery-validation et jquery-validation-unobtrusive sont répertoriés dans bower.jsonbootstrap, jquery, jquery-validation, and jquery-validation-unobtrusive are listed in the bower.json
  • kendo-ui a été ajouté manuellement au dossier libkendo-ui has been manually added to the lib folder

Structure des dossiers

Vous pouvez utiliser le fichier tsconfig.json suivant pour vérifier, d’une part, que le service de langage analyse uniquement vos fichiers sources dans le dossier js et, d’autre part, qu’il récupère et utilise toujours les fichiers .d.ts pour les bibliothèques dans votre dossier lib.You could use the following tsconfig.json to make sure the language service only analyzes your source files in the js folder, but still fetches and uses .d.ts files for the libraries in your lib folder.

{
  "compilerOptions": {
    "allowJs": true,
    "noEmit": true
  },
  "exclude": ["wwwroot/lib"],  //ignore lib folders, we will get IntelliSense via ATA
  "typeAcquisition": {
    "enable": true,
    "include": [ "kendo-ui" ]  //kendo-ui wasn't added via bower, so we need to list it here
  }
}

Résolution des problèmes : le service de langage JavaScript a été désactivé pour le ou les projets suivantsTroubleshooting The JavaScript language service has been disabled for the following project(s)

Quand vous ouvrez un projet JavaScript qui a une très grande quantité de contenu, vous pouvez obtenir le message suivant : « Le service de langage JavaScript a été désactivé pour le ou les projets suivants ».When you open a JavaScript project that has a very large amount of content, you might get a message that reads "The JavaScript language service has been disabled for the following project(s)". La raison la plus courante de la présence d’une très grande quantité de code source JavaScript est l’inclusion de bibliothèques avec du code source dépassant la limite de 20 Mo pour un projet.The most common reason for having a very large amount of JavaScript source is due to including libraries with source code that exceeds a 20MB project limit.

Un moyen simple pour optimiser votre projet consiste à ajouter un fichier tsconfig.json à la racine du projet pour indiquer au service de langage les fichiers qui peuvent être ignorés sans problème.A simple way to optimize your project is to add a tsconfig.json file in your project root to let the language service know which files are safe to ignore. Utilisez l’exemple ci-dessous pour exclure les répertoires les plus courants où sont stockées les bibliothèques :Use the sample below to exclude the most common directories where libraries are stored:

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "maxNodeModuleJsDepth": 2,
    "noEmit": true,
    "skipLibCheck": true
  },
  "exclude": [
    "**/bin",
    "**/bower_components",
    "**/jspm_packages",
    "**/node_modules",
    "**/obj",
    "**/platforms"
  ]
}

Ajoutez d’autres répertoires selon vos besoins.Add more directories as you see fit. D’autres exemples incluent les répertoires « vendor » ou « wwwroot/lib ».Some other examples include "vendor" or "wwwroot/lib" directories.

Note

La propriété du compilateur disableSizeLimit peut également être utilisée pour désactiver la vérification de la limite de 20 Mo.The compiler property disableSizeLimit can be used as well to disable the 20MB check limit. Prenez des précautions particulières lors de l’utilisation de cette propriété, car la désactivation de la limite peut bloquer le service de langage.Take special precautions when using this property because disabling the limit might crash the language service.

Changements notables par rapport à Visual Studio 2015Notable Changes from Visual Studio 2015

Visual Studio 2017Visual Studio 2017 propose un tout nouveau service de langage : certains comportements ont disparu, tandis que d’autres comportements sont différents de ceux de l’expérience précédente.As Visual Studio 2017Visual Studio 2017 features a completely new language service, there are a few behaviors that will be different or absent from the previous experience. Le remplacement de VSDoc par JSDoc, la suppression des extensions .intellisense.js personnalisées et la limitation d’IntelliSense pour des modèles de code spécifiques constituent les changements les plus importants.The most notable changes are the replacement of VSDoc with JSDoc, the removal of custom .intellisense.js extensions, and limited IntelliSense for specific code patterns.

Disparition de ///<references/> et de _references.jsNo more ///<references/> or _references.js

Par le passé, il était assez difficile de savoir quels fichiers figuraient dans votre portée IntelliSense à un moment donné.Previously it was fairly complicated to understand at any given moment which files were in your IntelliSense scope. Selon les cas, il était préférable ou non d’avoir tous les fichiers dans l’étendue. Il en résultait des configurations complexes qui nécessitaient la gestion manuelle des références.Sometimes it was desirable to have all your files in scope and other times it wasn't, and this led to complex configurations involving manual reference management. Dorénavant, vous n’avez plus besoin de vous soucier de la gestion des références et vous n’êtes plus obligé d’utiliser des commentaires pour les références à trois barres obliques ou des fichiers _references.js.Going forward you no longer need to think about reference management and so you don't need triple slash references comments or _references.js files.

Pour plus d’informations sur le fonctionnement d’IntelliSense, consultez la page JavaScript IntelliSense.See the JavaScript IntelliSense page for more info on how IntelliSense works.

VSDocVSDoc

Avant, vous pouviez utiliser des commentaires de documentation XML, appelés parfois VSDocs, pour décorer votre code source avec des données supplémentaires utilisées pour enrichir les résultats d’IntelliSense.XML documentation comments, sometimes referred to as VSDocs, could previously be used to decorate your source code with additional data that would be used to buff up IntelliSense results. VSDoc n’est plus pris en charge. Il est désormais remplacé par JSDoc, standard accepté pour JavaScript, qui est plus facile à écrire.VSDoc is no longer supported in favor of JSDoc which is easier to write and the accepted standard for JavaScript.

Extensions .intellisense.js.intellisense.js extensions

Avant , vous pouviez créer des extensions IntelliSense pour ajouter des résultats de saisie semi-automatique personnalisés pour des bibliothèques tierces.Previously, you could author IntelliSense extensions which would allow you to add custom completion results for third-party libraries. Ces extensions étaient assez difficiles à écrire, et leur installation et leur référencement étaient peu pratiques. Le nouveau service de langage ne prend donc plus en charge ces fichiers.These extensions were fairly difficult to write and installing and referencing them was cumbersome, so going forward the new language service won't support these files. Une autre méthode plus simple consiste à écrire un fichier de définition TypeScript pour offrir les mêmes fonctionnalités IntelliSense que les anciennes extensions .intellisense.js.As an easier alternative, you can write a TypeScript definition file to provide the same IntelliSense benefits as the old .intellisense.js extensions. Pour en savoir plus sur la création de fichiers de déclaration (.d.ts), cliquez ici.You can learn more about declaration (.d.ts) file authoring here.

Modèles non pris en chargeUnsupported patterns

Étant donné que le nouveau service de langage repose sur l’analyse statique et non sur un moteur d’exécution (pour plus d’informations sur les différences, lisez ce problème), quelques modèles JavaScript ne peuvent plus être détectés.Because the new language service is powered by static analysis rather than an execution engine (read this issue for information of the differences), there are a few JavaScript patterns that no longer can be detected. Le modèle le plus courant est le modèle « expando ».The most common pattern is the "expando" pattern. Le service de langage ne peut pas fournir la fonctionnalité IntelliSense sur des objets auxquels des propriétés ont été ajoutées après la déclaration.Currently the language service cannot provide IntelliSense on objects that have properties tacked on after declaration. Exemple :For example:

var obj = {};
obj.a = 10;
obj.b = "hello world";
obj. // IntelliSense won't show properties a or b

Vous pouvez contourner ce problème en déclarant les propriétés durant la création des objets :You can get around this by declaring the properties during object creation:

var obj = {
    "a": 10,
    "b": "hello world"
}
obj. // IntelliSense shows properties a and b

Vous pouvez aussi ajouter un commentaire JSDoc comme suit :You can also add a JSDoc comment as follows:

/**
 * @type {{a: number, b: string}}
 */
var obj = {};
obj.a = 10;
obj.b = "hello world";
obj. // IntelliSense shows properties a and b