The code viewer is the heart of SonarQube: it displays the source code of a file (both source and test files), and its high-level statistics:

• Lines
• Issues (generated by the rules activated on the quality profile)
• Test coverage by unit or integration tests
  
• Duplications within the same file or in other files
• SCM information like who last committed a specific line and when
• All tests of a given test file, along with their execution time and their status

You will land on the code viewer:

• when drilling down from the Measures and Code pages.
• when reviewing issues on the Issues page.
• when searching for a particular file using the search input at the top-right.

The code viewer has two aspects, the current file and pinned files.

Current File

Layout

The code viewer is composed of 2 parts:

• The header lies across the top of the file. It displays useful information and offers decoration and filtering actions.
• The source code is in the center, decorated with additional information based on the options chosen in the header.

Image Removed

Header

The header can contain up to four data blocks, one per main axis: Lines, Issues, Coverage (for source files) or Tests (for test files), and Duplications. Data blocks which aren't relevant to the current file won't be shown. For instance, if the project has no tests, the coverage number will be omitted. Similarly, the duplications block will be omitted if there are no duplications.

The source code

The main purpose of the code viewer is to show source code and its effort to fix it. For that reason, issue, duplication, and test decorations are always visible, but issues may be collapsed if you don't come to the code viewer from the Issues page, and the marker for new code only appears when a differential has been applied:

Image Removed

Additional actions

The actions menu at the top-right of the code viewer header offers additional options. 

Image Removed

The most notable of these is "Show Details", which opens a modal popup with additional data on the file:

Image Removed

Pinned Files

Both source files and rule descriptions can be pinned directly:

Image Removed

or from another file's duplication detail:

Image Removed

Similarly, test files can be pinned from coverage detail, and rule descriptions can be pinned from issue messages:

Image Removed

You can adjust the height of the currently-active pinned window, minimize it, maximize it, and close it. The currently-active window will automatically be minimized if you change contexts or pin another file.

Further Reading

To learn more about the code viewer, please see :

코드 뷰어(code viewer)는 SonarQube의 핵심입니다. 파일의 소스 코드(소스 및 테스트 파일) 및 해당 파일의 상위 통계 정보를 표시합니다:

• 라인(Lines)
• 이슈(Issues): 품질 프로파일에 활성화 된 규칙에 대한 위반 사항
• 테스트 커버리지(Test coverage) : 단위 테스트 및 통합 테스트 별 테스트 커버리지
  
• 코드 중복(Duplications): 동일 파일 혹은 다른 파일 사이의 코드 중복
• SCM 정보(SCM information): 해당 라인을 가장 최근 커밋한 사람과 커밋한 날짜
• 테스트 파일의 모든 테스트 케이스(tests) 및 해당 테스트 케이스의 실행 시간, 실행 상태

코드 뷰어 화면에는 아래와 같은 방법으로 진입할 수 있습니다:

• Measures 및 Code 페이지로부터 들릴 다운
• Issues page 에서 이슈 클릭
• 웹 인터페이스 최상단 오른쪽의 검색 창에서 특정한 파일을 검색

코드 뷰어는 현재 파일(current file)과 고정 파일(pinned file)의 두 가지 뷰를 제공합니다.

현재 파일

레이아웃

코드 뷰어는 2개 파트로 구성되어 있습니다:

• 헤더(header)는 파일 맨 윗 부분에 위치하며, 유용한 정보를 표시하고, 데코레이션(decoration) 및 필터링 기능을 제공합니다.
• 소스 코드(source code)는 중앙에 위치하며, 헤더에서 설정한 데코레이션에 따라 추가적인 정보들을 함께 표시합니다.

Image Added

헤더

헤더(header)는 최대 4개의 데이터 블록을 표시할 수 있으며, 라인(Lines), 이슈(Issues), 커버리지 확인하기(소스 파일의 경우) 혹은 테스트 케이스(테스트 파일의 경우), 코드 중복을 표시합니다. 현재 파일과 관계 없는 데이터 블록은 표시되지 않습니다. 예를 들면, 프로젝트에 테스트 케이스가 존재하지 않는 경우 커버리지 데이터는 생략됩니다. 마찬가지로 코드 중복이 없는 경우, 코드 중복 블럭도 표시하지 않습니다.

소스 코드

코드 뷰어의 주 목적은 소스 코드 및 해당 이슈를 수정하는 데 소요되는 공수를 표시하는 것입니다. 따라서 이슈, 코드 중복 및 테스트 케이스 데코레이션은 항상 표시됩니다. 하지만 이슈의 경우 Issue 페이지에서 코드 뷰어로 접근해야만 펼쳐진 상태로 보여지며, 신규 코드의 경우 차이(differential) 기능이 적용된 경우에만 표시됩니다:

Image Added

추가 액션

코드 뷰어 헤더의 우측 상장에 위치한 액션 메뉴를 통해 추가 옵션을 선택할 수 있습니다: 

Image Added

"Shot Details" 메뉴가 가장 눈에 띄는 기능이며, 해당 링크를 클릭하면 선택한 파일에 대한 추가 정보를 포함한 모달 팝업이 표시됩니다:

Image Added

고정 파일(Pinned Files)

소스 파일 및 규칙 설명을 직접 고정하거나(pin):

Image Added

혹은 다른 파일의 코드 중복 상세 팝업에서 고정할 수 있습니다:

Image Added

마찬가지로, 테스트 파일 역시 커버리지 상세 화면에서 고정할 수 있고, 이슈 메시지에서 규칙 설명을 고정할 수 있습니다:

Image Added

현재 액티브 상태로 고정된 윈도우의 크기를 축소/확대하거나 윈도우를 닫을 수 있습니다. 현재 액티브 상태인 윈도우는 컨텍스트를 변경하거나 다른 파일을 고정하는 경우 자동으로 최소화됩니다.

관련 정보

코드 뷰어와 관련한 더 많은 정보는 아래 페이지를 참조합니다:

• 커버리지 확인하기
• 테스트케이스 확인하기
• 중복 확인하기