비쥬얼 스튜디오에서 C#, XAML 코드 자동정렬 방법

C# WPF 프로젝트를 진행하면서 간단하게 코드 컨벤션과 코드 정렬을 하는 방법에 대해 알아보겠습니다.

협업을 하는 경우 코드스타일이 이왕이면 일관된 것을 선호하는 편입니다.

코드 컨벤션

공식 문서 에서 전반적으로 코딩 규칙에 대해 작성돼 있습니다.

코드 컨벤션은 위의 문서를 읽어보면 도움이 될 것이라 생각됩니다.

이번에 작성할 내용은 간단하게 포맷을 정렬하여 팀에서 코드 정렬과 관련한 스타일을 통일시키는 방법에 대해 알아보겠습니다.

Code Formatting

코드 정렬은 2개의 설정만 바꿔주면 됩니다. 생각보다 간단하기에 이렇게 쓰면 좋습니다.

cs 파일 formatting

코드를 일관성 있게 작성하는 것은 중요합니다. cs 파일의 경우 단축키(ctrl + k, ctrl + d)를 이용해서 파일을 수정할 수도 있지만 아래와 같은 방법을 사용하는 것을 추천드립니다.

환경설정의 옵션(Tools -> Options)에서 아래와 같이 설정해주면 됩니다.

위와 같이 설정을 하면 코드 정렬을 할 수 있습니다.

정보

위의 cs 파일 설정은 Visual Studio 2022 이상부터 지원하는 것 같아요. :(

xaml 파일 formatting

xaml 파일을 설정을 통해서도 정렬을 할 수 있지만 각 설정마다 아래와 같이 포맷이 다른 경우가 있습니다.

그러니.. 확장 프로그램에서 플러그인을 설치하는 것을 추천드립니다.

해당 플러그인을 설치 하면 코드 정렬을 자동으로 할 수 있습니다.

WPF로 작업할 때 위 2가지 설정만 해 놓으면 큰 문제 없이 코드 정렬 및 포맷에 대한 고민을 줄일 수 있습니다.

번외 1(Settings.XamlStyler)

XAML Styler 플러그인도 어느 정도 한계가 있습니다.

그것을 해결하기 위해서 위의 플러그인을 설치하고 프로젝트 최상단에 Settings.XamlStyler로 파일명을 추가한 후 아래와 같이 추가 커스텀을 할 수 있습니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
{
    "AttributesTolerance": 2,
    "KeepFirstAttributeOnSameLine": false,
    "MaxAttributeCharactersPerLine": 0,
    "MaxAttributesPerLine": 1,
    "NewlineExemptionElements": "RadialGradientBrush, GradientStop, LinearGradientBrush, ScaleTransform, SkewTransform, RotateTransform, TranslateTransform, Trigger, Condition, Setter",
    "SeparateByGroups": false,
    "AttributeIndentation": 0,
    "AttributeIndentationStyle": 1,
    "RemoveDesignTimeReferences":  false,
    "IgnoreDesignTimeReferencePrefix": false,
    "OrderAttributesByName": true,
    "EnableAttributeReordering": true,
    "AttributeOrderingRuleGroups": [
        "x:Class",
        "xmlns, xmlns:x",
        "xmlns:*",
        "x:Key, Key, x:Name, Name, x:Uid, Uid, Title",
        "Grid.Row, Grid.RowSpan, Grid.Column, Grid.ColumnSpan, Canvas.Left, Canvas.Top, Canvas.Right, Canvas.Bottom",
        "Width, Height, MinWidth, MinHeight, MaxWidth, MaxHeight",
        "Margin, Padding, HorizontalAlignment, VerticalAlignment, HorizontalContentAlignment, VerticalContentAlignment, Panel.ZIndex",
        "*:*, *",
        "PageSource, PageIndex, Offset, Color, TargetName, Property, Value, StartPoint, EndPoint",
        "mc:Ignorable, d:IsDataSource, d:LayoutOverrides, d:IsStaticText",
        "Storyboard.*, From, To, Duration"
    ],
    "FirstLineAttributes": "",
    "PutEndingBracketOnNewLine": false,
    "RemoveEndingTagOfEmptyElement": true,
    "SpaceBeforeClosingSlash": true,
    "RootElementLineBreakRule": 0,
    "ReorderVSM": 1,
    "ReorderGridChildren": false,
    "ReorderCanvasChildren": false,
    "ReorderSetters": 3,
    "FormatMarkupExtension": true,
    "NoNewLineMarkupExtensions": "x:Bind, Binding",
    "ThicknessSeparator": 2,
    "ThicknessAttributes": "Margin, Padding, BorderThickness, ThumbnailClipMargin",
    "FormatOnSave": true,
    "CommentPadding": 2,
}

제 경우에는 종종 스타일 지정할 때 <Setter Property="FontSize" Value="14" /> 이런식의 코드를 쓸 때가 있습니다.

이 경우는 XAML Styler 기본 속성으로는 정렬을 할 수 없지만 아래와 같이 설정하면 ReorderSetters값을 3으로 지정하면 알파벳 순서로 자동 정렬이 됩니다.

설정과 관련된 정보는 XAML Config 문서 를 보면 아래와 같이 속성에 대한 설명이 있습니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
AttributeIndentationStyle
    - Mixed = 0
    - Spaces = 1
    - RootElementLineBreakRule
Default = 0
    - Always = 1
    - Never = 2
ReorderVSM
    - None = 0
    - First = 1
    - Last = 2
ReorderSetters
    - None = 0
    - Property = 1
    - TargetName = 2
    - TargetNameThenProperty = 3
ThicknessSeparator
    - None = 0
    - Space = 1
    - Comma = 2

번외 2(.editorconfig)

위의 설정으로도 충분하지만 .editorconfig 파일을 통해 설정하는 방법입니다.

.editorconfig는 코드 스타일 및 포맷팅 규칙을 프로젝트 내에서 정의하고 유지하도록 도와주는 구성 파일입니다.

Visual Studio, Rider, VS Code 등 대부분의 IDE와 협력하여 일관된 코드 스타일을 유지할 수 있습니다.

다양한 개발 환경에서 협업하는 경우, 여러 사람이 동일한 파일을 편집하더라도 코드 스타일이 일관되게 유지되도록 설정할 수 있습니다.

.editorconfig 파일은 프로젝트 루트 디렉토리에 위치하며, 다음과 같은 내용을 추가하면 됩니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
root = true

[*.cs]
# 들여쓰기 스타일: 공백 사용
indent_style = space
# 들여쓰기 크기: 4칸
indent_size = 4
# 줄 끝 스타일: CRLF 사용 (Windows)
end_of_line = crlf
# 문자 인코딩: UTF-8
charset = utf-8
# 맨 끝에 공백 줄 추가
insert_final_newline = true

[*]
indent_size = 4
indent_style = space

위의 설정외에도 다른 여러 설정을 추가할 수 있습니다.

.editorconfig를 지정하면 협업시 팀의 코드 스타일을 통일할 수 있습니다.

제가 생각하기에는 cs 설정과 xaml styler 만 있어도 충분한 것 같습니다.

코드 컨벤션#

Code Formatting#

cs 파일 formatting#

xaml 파일 formatting#

번외 1(Settings.XamlStyler)#

번외 2(.editorconfig)#

참조#