JavaScript 및 TypeScript 도구

JavaScript 또는 TypeScript를 사용해 애플리케이션 논리의 일부 또는 전체를 프로그래밍할 경우, ReSharper에서 도움을 받을 수 있습니다. ReSharper의 기능은 .js, .ts, .d.ts, .json 파일, HTML 파일에 포함된 JavaScript 코드를 비롯해 JSX 구문에서 사용할 수 있습니다.

JavaScript에 지원되는 코드 검사 및 빠른 수정

코드 분석

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

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

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

ReSharper를 사용해 JavaScript 심볼에서 이동

탐색 및 검색

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 구문을 인식합니다.

TypeScript에 지원되는 ReSharper의 코드 완성

코드 완성

코드 완성 기능을 이용하면 JavaScript/TypeScript 코드를 더 빠르게 작성할 수 있습니다. 코드가 입력되면 ReSharper에서 최근 입력된 주변의 컨텍스트와 심볼을 분석하여 완성 목록에서 적합한 값을 제안합니다. 예를 들어, ReSharper는 기본 제공 JavaScript 메서드 및 속성을 비롯해 현재 프로젝트에서 참조된 JavaScript 라이브러리의 심볼을 찾도록 도울 수 있습니다.

TypeScript에 지원되는 ReSharper의 컨텍스트 액션

컨텍스트 액션 및 기타 헬퍼

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

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

JSDoc에 지원되는 ReSharper 기능

JSDoc 지원

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

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

ReSharper는 JavaScript 및 TypeScript에 정규식을 지원

정규식 지원

ReSharper의 정규식 지원에는 JavaScript/TypeScript 정규식에 대한 완벽한 이해가 포함됩니다. 기본적으로 정규식은 정규식 리터럴, RegExp 생성자 및 메서드를 비롯하여 String 객체 메서드인 match(), search(), replace(), split() 등의 형태로 인식됩니다. ReSharper는 언제든지 문자열 리터럴을 정규식으로 분석하도록 설정할 수 있습니다.

JavaScript/TypeScript에 지원되는 ReSharper 리팩터링 - 리소스로 이동

리팩터링

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 구문에서도 사용할 수 있습니다.

JavaScript/TypeScript에서 사용 위치로부터 코드 생성

사용 위치에서 생성

ReSharper에서는 지원되는 거의 모든 언어에서, 존재하지 않는 심볼을 사용한 다음 그 사용 위치에 따라 적절한 구현을 생성할 수 있습니다. JavaScript 및 TypeScript에서 예외가 적용되는 경우는 없습니다. 어떤 해결되지 않은 심볼이든 ReSharper가 하나 이상의 생성 방법을 제안합니다.

TypeScript에서 생성자 생성

생성자 생성

TypeScript 유형 선언에서 Alt+Insert를 누르면 ReSharper가 이 유형의 생성자를 빠르게 생성합니다. 생성자 생성 마법사가 유형 및 기본 유형에서 선택한 필드를 매개변수로 사용해 비기본 생성자를 만듭니다.

TypeScript 유형 멤버 재정의

멤버 구현/재정의

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

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

코드 템플릿

ReSharper는 JavaScript및 TypeScript에서 자주 사용되는 모든 코드 구문을 포함하는 수십 가지의 라이브 템플릿을 제공합니다. 또한 TypeScript 및 JavaScript를 위한 접미어 템플릿과 TypeScript 클래스, 인터페이스 및 모듈을 위한 파일 템플릿도 제공합니다. 고유한 사용자 지정 템플릿을 이용해 기본 템플릿 모음을 확장할 수 있습니다.

JavaScript에서 서식 지정 규칙 구성

코드 스타일 지원

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

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

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

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

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

JavaScript에 지원되는 유닛 테스트 기능

유닛 테스트 지원

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

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

ReSharper의 JSLint, ESLint 및 TSLint 지원

JSLint, ESLint 및 TSLint

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

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

JSON 값 헬퍼

JSON 값 헬퍼 및 스키마 카탈로그

JSON 값 헬퍼를 통해 사용자 지정 JSON 파일에 코드 완성 또는 검사 기능을 제공하도록 ReSharper에 요청할 수 있습니다. JSON Value Helpers(JSON 값 헬퍼) 옵션 페이지에서 파일 이름 마스크 및/또는 스키마 일치에 따라 알맞은 헬퍼를 추가할 수 있습니다. 또한 JSON 옵션에서 사용자 지정 JSON 스키마 카탈로그를 추가할 수도 있습니다.

단축키 참고사항

이 페이지에 나온 모든 키보드 단축키는 ReSharper의 기본 'Visual Studio' 단축키에서 제공됩니다. ReSharper의 2가지 단축키에 관한 자세한 내용은 ReSharper 문서를 참조하세요.