정보실

웹학교

정보실

기타 VSCode Glean 확장프로그램 소개

본문

이 확장 기능은 React 코드베이스를 위한 리팩토링 도구를 제공합니다. JSX를 새로운 컴포넌트로 추출하고 클래스 컴포넌트를 함수 컴포넌트로 변환하는 등 다양한 기능을 제공합니다! 또한 파일간에 기존 Javascript / Typescript 코드를 추출 할 수 있으며, 이전 위치에서 선택한 코드를 내보내고 새 코드를 가져 오는 것을 처리 할 수 ​​있습니다!


https://marketplace.visualstudio.com/items?itemName=wix.glean#wixglean 


Highlights 

  • JSX를 새로운 컴포넌트로 추출 할 수 있습니다
  • 클래스 컴포넌트를 함수 컴포넌트로 또는 그 반대로 변환 할 수 있습니다
  • 조건부로 JSX 랩핑 가능
  • 파일 간 코드 이동
  • 타이프 스크립트 지원
  • ES2015 모듈 지원
  • CommonJS 모듈 지원


설치 


아래 링크로 이동하여 설치를 클릭하십시오.


https://marketplace.visualstudio.com/items?itemName=wix.glean


특징


새로운 컴포넌트로 JSX 추출 


Glean을 사용하면 JSX를 새로운 React 컴포넌트로 쉽게 추출 할 수 있습니다. 추출 할 JSX를 선택하면 Glean이 나머지를 모두 처리합니다.

  • 추출 된 JSX가 계속 작동하도록 상태 저장 또는 상태 비 저장 구성 요소를 생성하십시오.
  • 새로 작성된 구성 요소에 대한 모든 입력을 식별합니다.
  • 추출 된 JSX를 새로 작성된 컴포넌트로 바꾸고 모든 소품을 제공하십시오.

Example of JSX extraction 


함수형 구성 요소를 상태 저장 구성 요소로 변환 


Example of Stateless to Stateful Component Conversion 


상태 저장 구성 요소를 함수형 구성 요소로 변환 


Example of Stateful to Stateless Component Conversion 


경고!!! 이 리팩토링은 모든 Lifecycle 메소드와 setState 호출을 삭제합니다!


조건부로 렌더링 


Example of Render Conditionally 


파일로 추출 


텍스트를 추출하려면 텍스트와 VSCode의 코드 제안 (일명 "전구") 또는 명령 팔레트 ( '파일로 추출'명령)를 선택하십시오.


Example of Javascript Extraction 


Experiments Features 


모든 실험 기능은 옵트 인 되어 있으며 구성을 통해 활성화해야 합니다.


클래스 컴포넌트에서 함수형 컴포넌트 리팩토링에 대한 후크 지원 


Example of Hooks Support 


구성 옵션 


glean.jsModuleSystem (Default: 'esm') 


선택한 코드를 내보내거나 가져 오는 방법을 결정합니다. 유효한 옵션은 'esm'및 'commonjs'입니다.


glean.jsFilesExtensions (Default: [ "js", "jsx", "ts", "tsx" ]) 


자바 스크립트 파일로 처리해야 하는 파일 확장자 목록입니다. 스니펫을 내보내고 가져올 지 여부를 결정합니다. 스니펫은 원본 및 대상 파일의 확장자가 이 목록에 있는 경우에만 자바 스크립트로 처리됩니다.


glean.switchToTarget (Default: false) 


추출 후 VSCode가 대상 파일로 전환해야 하는지 여부를 결정합니다.


glean.experiments (Default: []) 


사용 가능한 실험 기능의 목록입니다. 사용 가능한 실험 기능 :

  • "hooksForFunctionalComponents"-후크 지원

glean.showConversionWarning (Default: true) 


Stateful Component를 Functional Component로 변환 할 때 VSCode가 변환 경고를 표시해야 하는지 여부를 결정합니다.


시작하기 


작업을 시작하려면 다음을 수행하십시오.


$ git clone git@github.com:wix/vscode-glean.git
$ cd vscode-glean
$ npm install
$ code .


확장 실행 

  • VSCode 디버그 사이드 바로 이동
  • 드롭 다운에서 확장을 선택하십시오
  • F5 클릭

테스트 실행 

  • VSCode 디버그 사이드 바로 이동
  • 드롭 다운에서 확장 테스트를 선택하십시오.
  • F5 클릭












페이지 정보

조회 86회 ]  작성일19-10-16 15:47

웹학교