tutorial - Visual Studio 2015 JSX/ES2015 resaltado de sintaxis

visual studio code tutorial español pdf

Question

¿Cómo puedo obtener un resaltado de sintaxis adecuado en Visual Studio 2015 para JSX con código ES2015?

Funciona bien si import export palabras clave de import y export :

Acabo de actualizar a Visual Studio 2015 Enterprise Update 1, pero sigue siendo el mismo.

Answer 1

En VS2015 Update-3 y NTVS 1.2 instalados, simplemente configurar TypeScript Editor como el editor predeterminado para la extensión de archivo jsx me ayudó.

1) Abra Herramientas> Opciones> Editor de texto> Extensión de archivo .

2) Escriba jsx en Extensión, seleccione Editor de TypeScript como Editor y haga clic en Aplicar.

Answer 2

Mientras intentaba investigar esto, me di cuenta de una manera simple de trabajar con archivos jsx en todas las versiones de Visual Studio. No es perfecto pero funciona para mí.

Descargue el último código de Visual Studio [ https://code.visualstudio.com/updates ], luego haga clic derecho en un archivo jsx dentro de cualquier versión de Visual Studio que tenga y seleccione ''Abrir con ...''. Seleccione ''Agregar'' y busque el código de Visual Studio que descargó recientemente y haga que este sea el predeterminado.

Espero que ayude a las personas a preocuparse por tener que actualizarse.

Answer 3

Se menciona en los comentarios anteriores por @TheQuickBrownFox, pero está oculto de forma predeterminada (es necesario expandirlo todo para verlo), por lo que resume lo que hice para solucionar el problema en la última actualización de Visual Studio 2015 Community 3:

100% de la Solución 1 de Adam Weber : https://.com/a/34110461/1633913 (configurando el nivel de lenguaje JavaScript en ReSharper para ECMAScript 2016 , y marque Habilitar JSX ... en la misma ventana + deshabilitar Mostrar errores de sintaxis en Opciones de VS JavaScript IntelliSense)

Solución 2 por Adam Weber : https://.com/a/34110461/1633913 , pero ligeramente modificado; el archivo de destino donde debe reemplazar:

esto: var transformed = reactTools.transformWithDetails(code, { elementMap: true });

con esto: var transformed = reactTools.transformWithDetails(code, { elementMap: true, es6module: "--es6module", harmony: "--harmony" });

de hecho está aquí: C:/Program Files (x86)/Microsoft Visual Studio 14.0/Web/External/vs-task-server/react-commands.js

reinicie VS y ya está.

Answer 4

ACTUALIZACIÓN (2017-02)

Node Tools for Visual Studio (NTVS) ha estado utilizando el motor de análisis Salsa desde v1.2 y es probable que usar NTVS sea el camino de menor resistencia para el soporte de JSX.

https://github.com/Microsoft/nodejstools

Lea (y vote) esta respuesta para obtener más detalles: https://.com/a/41996170/9324

RESPUESTA ORIGINAL

Me encontré con el mismo problema y encontré dos soluciones: una usando ReSharper y otra modificando las herramientas web externas de Visual Studio.

SOLUCION 1

En ReSharper 10:

• abrir el cuadro de diálogo Opciones
• en Edición de código> JavaScript> Inspecciones, elija ECMAScript 6 en el menú desplegable de nivel de lenguaje JavaScript
• asegúrese de que también esté seleccionada la opción Habilitar sintaxis JSX en archivos .JS (suponiendo que use la sintaxis JSX).
• También debe deshabilitar los errores de sintaxis de JavaScript en Visual Studio de la siguiente manera:
  • vaya a Herramientas> Opciones> Editor de texto> JavaScript> IntelliSense
  • desmarque la casilla Mostrar errores de sintaxis y haga clic en Aceptar.
• recargar la solución VS

Después de recargar la solución, los squigglies rojos se fueron para mí. Sin embargo, el resaltado de sintaxis para JSX no funciona. El segmento de apertura de cualquier elemento que declare en la función de render no tiene el color adecuado, pero eso es fácil de ignorar.

También debo mencionar que los archivos javascript deben tener la extensión .js . Si les das la extensión .jsx , obtendrás garabatos rojos en tu primera declaración de importación. El mensaje de error será JSX Parser: illegal import declaration . (Esto se puede solucionar con la solución n. ° 2 a continuación)

ACTUALIZACIÓN: gracias a @SntsDev por esta solución alternativa Hay una manera de evitar nombrar los archivos .jsx como .js :

• en Visual Studio, vaya a Opciones> Editor de texto> Extensión de archivo
• agregue jsx y asígnelo al editor de Javascript

SOLUCIÓN 2

La curiosidad se apoderó de mí y quería explorar si había o no una solución que no sea ReSharper. Visual Studio utiliza un módulo de servidor de nodo que se ejecuta localmente llamado react-server para analizar JSX sobre la marcha. Este módulo se puede encontrar aquí:

C:/Program Files (x86)/Microsoft Visual Studio
14.0/Common7/IDE/Extensions/Microsoft/Web Tools/External/react-server

ACTUALIZACIÓN para Visual Studio 2015 Update 3 Gracias a @TheQuickBrownFox por el comentario / actualización. Para la Actualización 3, la ubicación de los comandos react-server ahora está en este archivo:

C:/Program Files (x86)/Microsoft Visual Studio 
14.0/Web/External/vs-task-server/react-commands.js

Examinando más a fondo el server.js o react-commands.js server.js de las carpetas mencionadas anteriormente, hay una función llamada transformJsxFromPost o transformJsx . Este método contiene la siguiente línea: var transformed = reactTools.transformWithDetails(code, { elementMap: true }); . Esta es una referencia al módulo react-tools ( https://www.npmjs.com/package/react-tools ), que tiene más opciones disponibles para analizar ES6.

Por lo tanto:

• reemplace esta línea:

  var transformed = reactTools.transformWithDetails(code, { elementMap: true });

• con lo siguiente:

  var transformed = reactTools.transformWithDetails(code, { elementMap: true, es6module: "--es6module", harmony: "--harmony" });

  Observe la adición de los --es6module y --es6module , que indican a react-tools traten el código entrante como ES6.

• deshabilite los errores de sintaxis de javascript en Visual Studio de la siguiente manera:

  • en Visual Studio, vaya a Herramientas> Opciones> Editor de texto> JavaScript> IntelliSense
  • desmarque la casilla Mostrar errores de sintaxis y OK

• IMPORTANTE: reinicie Visual Studio. Sus archivos .jsx con código ES6 ya no deberían tener garabatos rojos en su código ES6.

NOTAS

• No sé si el cambio descrito en la SOLUCIÓN 2 al archivo server.js afectará el código que no sea ES6. Implemente bajo su propio riesgo.
• Además, es muy posible / probable que su cambio se sobrescriba con una actualización posterior de Visual Studio.
• Sería genial / divertido reemplazar el uso de react-tools react-server dentro react-server con la CLI de Babel. ACTUALIZACIÓN: Gracias a @NickDewitt, parece que pudo hacer que esto funcione: https://.com/a/36321109/9324

Answer 5

EDITAR : Visuals studio 15 cambia su nombre a Visual Studio 2017: puede obtener el RC aquí: https://www.visualstudio.com/vs/visual-studio-2017-rc/

Solución futura:

Visual Studio "15" Vista previa 2 compatible con JSX es Reaccionar fuera de la caja. Puede habilitar la misma biblioteca del Servicio Javascript (Salsa) como VS Code.

Aquí las notas de la versión: https://www.visualstudio.com/en-us/news/releasenotes/vs15/vs15-relnotes

Salsa: https://github.com/Microsoft/TypeScript/wiki/Using-the-Salsa-Preview-in-Visual-Studio-15-Preview

Answer 6

SOLUCIÓN ''3'':

Gracias a las ideas de Adam en su respuesta, he conseguido que esto funcione con babel y sus complementos / ajustes preestablecidos. Vale la pena leer su respuesta primero si estás intentando esto.

Necesita nodeJs y npm antes de continuar, y tal vez hacer una copia de seguridad de los archivos antes de modificarlos.

Estoy usando complementos es2015 , es2015 con presets de stage1 aquí, pero puedes usar los plugins quieras

1. Powershell a C:/Program Files (x86)/Microsoft Visual Studio 14.0/Common7/IDE/Extensions/Microsoft/Web Tools/External/react-server

2. Instale los siguientes paquetes:

   npm install babel-core --save-dev
   npm install babel-preset-es2015 --save-dev
   npm install babel-preset-react --save-dev
   npm install babel-preset-stage-1 --save-dev

3. Agregue las dependencias a server.js debajo de childProcess

   var childProcess = require(''child_process''); //already there
   var babel = require(''babel-core'');
   var es2015 = require(''babel-preset-es2015'');
   var react = require(''babel-preset-react'');
   var stage1 = require(''babel-preset-stage-1'');

4. Reemplace la sección try{}catch{} de la req.on(''end'' en la función transformJsxFromPost :

   try {
   
       var transformed = 
           babel.transform(
               code, 
               {
                   sourceMaps: true, 
                   presets: [
                       es2015, 
                       react, 
                       stage1
                   ]
               }
           );
   
       result = { 
           elementMappings: []
       }
       //I found it least buggy when returning an empty list of elementMappings
       //but i will leave the code i was using to try and dupe it, or 
       //recreate the elementMappings from react-tools
       //
       // result = { 
           // elementMappings: [{
               // ''start'': 1,
               // ''end'': transformed.code.length,
               // ''generatedCode'': transformed.code
           // }], 
           // map: transformed.map, 
           // code: transformed.code
       // }
   }
   catch (e) {
       //the error that react-tools was returning was slightly different, so
       //map the babel error back to the react-tools error that VS 2015 expects
        result = {
            column: e.loc.column,
            description: e.errorMessage,
            errorMessage: e.message + ".. :-(",
            index: e.pos,
            lineNumber: e.loc.line
        };
   }

5. Reinicie Visual Studio, cierre y vuelva a abrir cualquier archivo .jsx y disfrute del resaltado de sintaxis de Babel :-)

Notas
Dale al analizador la oportunidad de iniciarse después de comenzar, Visual Studio hará lo siguiente cuando cargues en un archivo .jsx la primera vez:

1. Cree una carpeta en %localappdata%/Temp/ con stderr.txt donde puede encontrar un registro de cualquier error y stdout.txt que le dirá en qué {port} está ejecutando el servidor y también registra otra información.
2. Inicie un servidor nodeJs, que se ejecuta en localhost:{port} que acepta JSX como POST en /transformJsxFromPost y devuelve el número de línea y el número de columna del primer error que encuentra como objeto json en Visual Studio

Tuve que desactivar Javascript Intellisense para archivos jsx como Adam muestra en la solución 1 en su respuesta:

En Visual Studio, vaya a Herramientas> Opciones> Editor de texto> JavaScript> IntelliSense, luego desactive la casilla Mostrar errores de sintaxis y haga clic en Aceptar.

Con javascript intellisense desactivado, tanto el servidor de reacción como el paquete con vs y babel, ya que lo estoy reemplazando aquí, ambos solo devuelven el primer error que encuentran, por lo que no debe esperar ver resaltado en todos los errores en su archivo, pero sí muestran mientras escribe, si mantiene el código libre de errores.

Supongo que ahora todo lo que queda por hacer es elementMappings correctamente los elementMappings : ¿quizás la solución 4? :-)