JavaScript 및 TypeScript 도구

ReSharper의 코드 분석 기능은 약 100가지의 JavaScript 및 TypeScript 코드용 코드 검사와 약 50가지의 TypeScript 전용 검사를 통해 오류와 문제를 빠르게 찾아 수정할 수 있도록 도와줍니다. 탐지된 문제 대부분은 빠른 수정 기능으로 즉시 수정할 수 있습니다.

제시된 예와 같이 ==가 올 자리에 =를 입력하면 감지하기 매우 어려운 버그가 발생할 수 있지만 ReSharper에서는 그렇지 않습니다.

코드를 분석할 때 ReSharper는 구성 가능한 언어 수준을 고려합니다. 기본적으로 언어 수준은 프로젝트 설정에 따라 선택되지만, 필요한 경우 설정을 재정의할 수 있습니다.

ReSharper의 탐색 및 검색 기능 대부분을 JavaScript 및 TypeScript에서 사용할 수 있습니다. 언제나 그렇듯이 특정 심볼에서 이동하기 위한 모든 명령어는 Navigate To(다음으로 이동)의 단축키인 Alt+'를 눌러 이용할 수 있습니다.

Ctrl+T(Go to Everything/Type(모든 항목/유형으로 이동)) 및 Ctrl+Shift+T(Go to File(파일로 이동)) 등의 모든 즐겨찾기 검색 명령어도 사용할 수 있습니다. 지원되는 모든 탐색 및 검색 기능은 JavaScript 및 TypeScript 구문의 특성을 고려합니다. 예를 들어, 매개변수의 데이터 유형이 XML 문서에 명시된 경우 해당 유형이 File Structure(파일 구조)에 표시됩니다.

Structural Search and Replace(구조 검색 및 바꾸기) 기능 역시 JavaScript/TypeScript 구문을 인식합니다.

ReSharper는 50가지의 JavaScript 및 TypeScript용 컨텍스트 액션과 약 20가지의 TypeScript 전용 액션을 통해 JavaScript/TypeScript 코드를 빠르게 변환할 수 있도록 도와줍니다.

또한, ReSharper 코딩 지원의 몇 가지 예인 구문 강조 표시, 코드 재배열, 선택 항목 확장/축소를 비롯해 그 밖의 모든 코딩 지원 기능을 JavaScript 및 TypeScript 코드에서 자유롭게 이용할 수 있습니다.

ReSharper는 구문 강조 표시 기능을 통해 JSDoc 주석의 가독성을 크게 높여주고 JSDoc 주석 작성 시 코드 완성 기능을 지원합니다. 예를 들어 함수 위에 /**을 입력할 경우, ReSharper가 모든 매개변수 및 반환값에 대한 문서 스텁을 생성합니다. JSDoc 유형, typedefs 및 콜백 또한 적절히 강조 표시되고 코드 완성에서 사용할 수 있습니다.

뿐만 아니라 심볼에 대한 모든 JSDoc 주석을 빠른 문서 팝업에서 해당 심볼의 사용 위치에서 사용할 수 있습니다.

JavaScript 및 TypeScript 코드에서 Inline Variable(변수 인라인화), Introduce Variable(변수 삽입), Introduce Variable for Substring(하위 문자열에 변수 삽입), Rename(이름 변경) 등, C#에서와 동일하게 작동하는 여러 가지의 리팩터링을 이용할 수 있습니다.

TypeScript의 경우, 유형에 대해 Copy Type(유형 복사), Introduce Field(필드 삽입), Move Type to Another File or Namespace(다른 파일 또는 네임스페이스로 유형 이동), Move to Folder(폴더로 이동) 등의 리팩터링을 사용할 수 있습니다.

JavaScript/TypeScript 전용 리팩터링인 Move to Resource(리소스로 이동)도 있습니다. 이 리팩터링은 Visual Studio 템플릿(예: Apache Cordova)에서 생성된 JavaScript/TypeScript 프로젝트에서 작동하며, 문자열 리터럴을 리소스 파일로 이동할 수 있습니다.

모든 JavaScript/TypeScript 리팩터링은 JSX 구문에서도 사용할 수 있습니다.

상속된 유형의 경우, 관련된 2가지 코드 생성 기능이 있습니다.

• Implement missing members(누락된 멤버 구현)는 현재 클래스로부터 모든 인터페이스 멤버 또는 추상 멤버를 구현합니다.
• Override members(멤버 재정의)는 동일한 기능을 수행하지만, 해당하는 경우 가상 멤버도 재정의합니다.

ReSharper는 JavaScript 및 TypeScript 코드에서 2가지 코드 스타일 기반인 코드 서식 지정 규칙 및 이름 지정 규칙을 자동으로 유지할 수 있도록 도와줍니다.

사실 코드 서식 지정은 C#에서보다 훨씬 더 효과적으로 작동합니다. 선택한 코드 블록에서 Alt+Enter를 누르고 Format selection(서식 선택) | Configure(구성)를 선택하면 선택한 블록에 영향을 주는 모든 서식 지정 규칙을 확인하고 구성할 수 있습니다.

JavaScript 및 TypeScript 고유의 코드 스타일 환경 설정을 이용할 수도 있습니다. 문자열 리터럴을 처리하는 작은따옴표(') 또는 큰따옴표(")의 사용 위치를 일관되게 유지하고 구문에서 세미콜론을 선택적으로 자동 추가 또는 제거할 수 있습니다.

추가로 TypeScript에서는 선언 유형의 지정 방식(명시적 유형 이름, var 또는 any), public 한정자를 명시적으로 사용할지 여부, 모듈 가져오기 방식을 자동으로 제어할 수 있습니다.

빠른 수정이나 코드 정리를 사용해 한 가지 명령어로 모든 JavaScript 및 TypeScript 코드의 스타일 환경 설정을 원하는 범위에 적용할 수 있습니다.

ReSharper는 QUnit 및 Jasmine을 토대로 Visual Studio에서 바로 유닛 테스트를 검색하여 실행할 수 있게 도와줍니다. JavaScript/TypeScript 테스트를 실행하는 데 사용할 브라우저를 선택하거나 PhantomJS로 헤드 없는 테스트를 실행할 수 있습니다.

.NET 유닛 테스트와 유사하게, Unit Test Explorer(유닛 테스트 탐색기)를 사용해 솔루션에서 JavaScript/TypeScript 테스트를 탐색하고, 그 창에서 또는 Solution Explorer(솔루션 탐색기)에서 또는 에디터에서 바로 실행하고, 여러 유닛 테스트 세션을 사용할 수 있습니다.

ReSharper는 3개의 정적 분석 도구에 대한 지원을 통해 기본 제공 코드 분석 규칙을 확장합니다. JSLint, ESLint, TSLint. 이러한 모든 linter는 JavaScript 및 TypeScript 코드의 가독성과 유지보수를 보장합니다. 또한 사용자 지정 규칙을 추가해 ReSharper 코드 분석에 포함시킬 수 있습니다.

Node.js 변환기가 시스템에서 이미 구성된 경우, 도구 | 웹 Linter의 ReSharper 설정에서 linter를 활성화할 수 있습니다.