Visual Studio 2015 JSX/ES2015 구문 강조

Visual Studio 2015 JSX/ES2015 구문 강조

ES2015 코드가 있는 JSX용 Visual Studio 2015에서 올바른 구문 강조 표시를 얻는 방법은 무엇입니까?

를 떼어내면 정상적으로 동작합니다.import ★★★★★★★★★★★★★★★★★」export키워드:

방금 Visual Studio 2015 Enterprise Update 1로 업데이트했지만 여전히 그대로입니다.

갱신(2017-02)

NTVS(Node Tools for Visual Studio)는 v1.2부터 Salsa 분석 엔진을 사용하고 있으며 NTVS를 사용하는 것이 JSX 지원을 위한 최소 저항 경로일 수 있습니다.

https://github.com/Microsoft/nodejstools

상세한 것에 대하여는, https://stackoverflow.com/a/41996170/9324 를 참조해 주세요.

---

원래의 회답

같은 문제에 부딪혀 두 가지 해결 방법을 찾았습니다. 하나는 ReSharper를 사용하고 다른 하나는 Visual Studio 외부 웹 도구를 수정하는 것입니다.

솔루션 1

ReSharper 10의 경우:

• 옵션 대화 상자 열기
• [ Code Editing ]> [ JavaScript ]> [ Inspections ]에서 JavaScript 언어 수준 드롭다운으로 [ECMAScript 6]를 선택합니다.
• 에서 [Enable JSX]구문을 확인합니다.JS 파일 옵션도 선택됩니다(JSX 구문을 사용하는 경우).
• javascript 。
  • [ Tools ] > [ Options ]> [ Text Editor ]> [ JavaScript ]> [ Intelli Sense ]으로 이동합니다.
  • [ Show syntax errors ]체크박스를 끄고 [OK out]를 선택합니다
• VS 솔루션을 새로고침하다

용액을 다시 로드한 후 빨간색 찌그러기가 사라졌습니다.JSX는 JSX를 사용합니다.에서 .render기능에는 적절한 색상이 없습니다만, 무시하기 쉬운 기능입니다.

javascript 파일에는 .js 확장자가 필요합니다.확장자를 .jsx로 지정하면 첫 번째 Import 스테이트먼트에 빨간색 스퀴글리가 표시됩니다.오류 메시지는 다음과 같습니다.JSX Parser: illegal import declaration는 다음 솔루션 할 수 (#2를 사용하여 해결할 수 있습니다.)

업데이트: 이 회피책의 @SntsDev 덕분에 .jsx 파일을 .js로 명명하지 않아도 됩니다.

• Visual Studio in 、 [ Options ]> [ Text - Editor ]> [ File Extension ]으로 이동합니다.
• jsx를 추가하여 Javascript Editor에 할당합니다.

솔루션 2

호기심에 이끌려 ReSharper가 아닌 솔루션이 있는지 알아보고 싶었습니다.는 Visual Studio라는 이름의 합니다.react-serverJSX를 사용하다은 다음URL에 .

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

Visual Studio 2015 Update 3 코멘트/업데이트 @TheQuickBrownFox 감사합니다.업데이트 3의 경우,react-server명령어는 다음 파일에 있습니다.

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

★★★★의 상세 server.js ★★★★★★★★★★★★★★★★★」react-commands.js에는, 「이러한 폴더」라고 하는 가 있습니다.transformJsxFromPost ★★★★★★★★★★★★★★★★★」transformJsx 방법에는 행이 있습니다.var transformed = reactTools.transformWithDetails(code, { elementMap: true });이것은, 에 대한 참조입니다.react-tools모듈(https://www.npmjs.com/package/react-tools),을 참조하십시오.이 모듈에는 ES6 해석에 사용할 수 있는 옵션이 더 있습니다.

그 때문에,

• 다음 행을 바꿉니다.

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

• 다음을 포함합니다.

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

  「 」의.--es6module ★★★★★★★★★★★★★★★★★」--harmony 「」, 「」를 합니다.react-toolsES6를 사용하다

• 다음과 같이 Visual Studio에서 javascript 구문 오류를 비활성화합니다.

  • Visual Studio in 、 [ Tools ]> [ Options ]> [ Text Editor ]> [ JavaScript ]> [ Intelli Sense ]으로 이동합니다.
  • [ Show syntax errors ]체크박스를 끄고 [OK]아웃]

• 중요: Visual Studio를 다시 시작합니다.당신의..jsxES6 코드가 있는 파일의 ES6 코드에 빨간색 스퀴글이 표시되지 않게 됩니다.

---

주의:

• 되어 있는 변경 이 루에에2로 되었는지 여부를수 없습니다.server.jsES6를 이용하다따라서 고객님의 책임 하에 구현하십시오.
• 또한 변경 내용을 나중에 Visual Studio로 업데이트하면 덮어쓸 수도 있습니다.
• 하다, 하다, 하다, 하다, 하다, , 하다, 하다, 하다, 하다, 하다, 하다, 하다, , 하다, 하다, 하다, 하다, 하다, 하다, , 하다, , 하다, 하다, 하다, 하다, 하다, 하다, 하다, 하다, 하다, 하다react-tools의 범위 내에서react-serverBabel CLI 를 사용합니다.업데이트: @NickDewitt 덕분에 이 작업을 수행할 수 있었던 것 같습니다.https://stackoverflow.com/a/36321109/9324

설치되어 있는 VS2015 Update-3 및 NTVS 1.2에서는 파일 확장자 jsx의 기본 에디터로 TypeScript Editor를 설정하기만 하면 됩니다.

1) [툴] > [옵션]를 엽니다.텍스트 에디터>파일 확장자

2) Extension에 jsx를 입력하고 Editor로 TypeScript Editor를 선택한 후 Apply를 클릭합니다.

편집: Visual Studio 15는 Visual Studio 2017으로 이름이 변경되었습니다.RC는 이쪽에서 입수할 수 있습니다.https://www.visualstudio.com/vs/visual-studio-2017-rc/

장래의 솔루션:

Visual Studio "15" Preview 2는 개봉 즉시 JSX en React를 지원합니다.VS Code와 동일한 (Salsa) Javascript Service 라이브러리를 사용할 수 있습니다.

릴리스 노트: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

솔루션 '3':

Adam의 답변에 대한 통찰력 덕분에 babel과 플러그인/preset을 사용할 수 있게 되었습니다.이걸 해보면 그의 답을 먼저 읽어볼 가치가 있어요.

더 나아가기 전에 nodeJs와 npm을 설치해야 합니다.또한 파일을 수정하기 전에 모든 파일을 백업해야 합니다.

1단계 프리셋으로 리액트 es2015 플러그인을 사용하고 있습니다만, 원하는 플러그인을 사용하실 수 있습니다.

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

2. 다음 패키지를 설치합니다.

   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. 종속성을 에 추가합니다.server.js아래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. 를 교환해 주세요.try{}catch{}의 섹션req.on('end'의 할당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. Visual Studio를 재시작하여 .jsx 파일을 닫았다가 다시 열고 babel 구문을 강조 표시하여 :-)

메모들
처음 .jsx 파일에 로드하면 비주얼 스튜디오가 다음을 수행합니다.

1. 「 」에 합니다.%localappdata%\Temp\stderr.txt 및 에러 를 확인할 수 .stdout.txt으로 을 알 수 있다{port}서버가 실행 중이고 다른 정보도 기록합니다.
2. 합니다.JS, JS, JSlocalhost:{port} POST의 로서 JSX를 ./transformJsxFromPost의 행 열를 비주얼 json으로 합니다.

Adam이 솔루션 1에서 제시한 바와 같이 jsx 파일의 javascript intelisense를 해제해야 했습니다.

Visual Studio > 、 [ Tools ]> [ Options ]> [ Text Editor ]> [ JavaScript ]> [ IntelliSense ]순서로 이동하여 [Show synthax errors]체크박스를 끄고 [OK]아웃]을 하겠습니다

javascript intellisense가 꺼지면 vs와 함께 패키징된 react-server와 여기서 교체한 babel 둘 다 처음 발생한 오류만 반환되므로 파일 전체에서 모든 오류가 강조 표시되어서는 안 되지만 코드를 자유롭게 유지하면 입력 시 표시됩니다.

건 내 the the the the the the the the the the the the the the i i i i i i i i i i i i i i i i i i i i i i i?elementMappings4 ) - - 루 4 ? :-)

이것을 조사하면서, 저는 모든 버전의 Visual Studio에서 jsx 파일을 사용하는 간단한 방법을 알게 되었습니다.완벽하진 않지만 나한테는 효과가 있어.

최신 Visual Studio Code [ https://code.visualstudio.com/updates ]를 다운로드한 다음 Visual Studio의 모든 버전에 있는 jsx 파일을 마우스 오른쪽 버튼으로 클릭하고 'Open With...'를 선택합니다. 'Add'를 선택하고 최근에 다운로드한 Visual Studio 코드를 찾아 기본값으로 설정하십시오.

업그레이드를 걱정하는 사람들에게 도움이 되길 바랍니다.

위의 코멘트에는 @TheQuickBrownFox가 언급하고 있지만 기본적으로는 숨겨져 있습니다(모두 확장해야 표시 가능). 따라서 최신 Visual Studio 2015 커뮤니티 업데이트 3에서 이 문제를 해결하기 위해 수행한 작업을 요약합니다.

솔루션 1 by Adam Weber: https://stackoverflow.com/a/34110461/1633913 (ReSharper에서 JavaScript 언어 레벨을 ECMAScript 2016으로 설정하고 같은 창에서 [JSX 활성화]체크박스를 켜겠습니다+ VS JavaScript IntelliSense에서 구문 오류 표시 옵션을 비활성화합니다)

솔루션 2 by Adam Weber: https://stackoverflow.com/a/34110461/1633913, 하지만 약간 수정되었습니다.교체 대상 파일:

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

다음과 같이 입력합니다.var transformed = reactTools.transformWithDetails(code, { elementMap: true, es6module: "--es6module", harmony: "--harmony" });

있다: ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」C:\Program Files (x86)\Microsoft Visual Studio 14.0\Web\External\vs-task-server\react-commands.js

VS를 재시작하면 끝입니다.

언급URL : https://stackoverflow.com/questions/34097915/visual-studio-2015-jsx-es2015-syntax-highlighting