Windows GUIプログラミング入門25 コード整形

# ■はじめに

今回はコードの整形ツールを紹介します。

# ■開発環境

* Windows 10
* Visual Studio Community 2019 （Version 16.6.3）
* WPF App （.NET Core）

# ■整形前後のXamlコード

先に整形前後のXamlサンプルをお見せします。

## ◇整形前

一行に複数のプロパティやイベントハンドラが書かれていて、右にスクロールしないと全部見えません。

```Xml
<Window x:Class="WpfApp20200705.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp20200705"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800" ResizeMode="CanResizeWithGrip">
    <Window.Resources>
        <!-- ツールボタンスタイル -->
        <Style x:Key="ToolButtonStyle" TargetType="Button">
            <Setter Property="Margin" Value="5"/>
            <Setter Property="Padding" Value="15,5"/>
        </Style>
    </Window.Resources>
    <Grid>
        <!-- グリッドのカラム定義 -->
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="4*"/>
        </Grid.ColumnDefinitions>
        <!-- グリッドの行定義 -->
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        
        <!-- ツールバー -->
        <StackPanel Orientation="Horizontal" Grid.ColumnSpan="2" Background="Honeydew">
            <Button x:Name="newButton" Content="新規" Style="{StaticResource ToolButtonStyle}" Click="newButton_Click"/>
            <Button x:Name="openButton" Content="開く" Style="{StaticResource ToolButtonStyle}" Click="openButton_Click"/>
            <Button x:Name="saveButton" Content="保存" Style="{StaticResource ToolButtonStyle}" Click="saveButton_Click"/>
            <Button x:Name="helpButton" Content="ヘルプ" Style="{StaticResource ToolButtonStyle}" Click="helpButton_Click"/>
        </StackPanel>
        
        <!-- 左のリスト -->
        <ListBox x:Name="hogehogeList" Grid.Row="1" Background="LightCyan" SelectionChanged="hogehogeList_SelectionChanged"/>
        
        <!-- 右の編集エリア -->
        <TextBox x:Name="editText" Grid.Column="1" Grid.Row="1" Text="こんにちは" TextWrapping="Wrap" VerticalScrollBarVisibility="Visible" FontSize="18"/>

    </Grid>
</Window>
```

## ◇整形後

綺麗に整いました。
なるべく一行に一つの要素だけ書くようにしておくと、見やすいし修正前後の差分も確認しやすくなります。

```Xml
<Window
    x:Class="WpfApp20200705.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:WpfApp20200705"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="800"
    Height="450"
    ResizeMode="CanResizeWithGrip"
    mc:Ignorable="d">
    <Window.Resources>
        <!--  ツールボタンスタイル  -->
        <Style x:Key="ToolButtonStyle" TargetType="Button">
            <Setter Property="Margin" Value="5" />
            <Setter Property="Padding" Value="15,5" />
        </Style>
    </Window.Resources>
    <Grid>
        <!--  グリッドのカラム定義  -->
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="4*" />
        </Grid.ColumnDefinitions>
        <!--  グリッドの行定義  -->
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>

        <!--  ツールバー  -->
        <StackPanel
            Grid.ColumnSpan="2"
            Background="Honeydew"
            Orientation="Horizontal">
            <Button
                x:Name="newButton"
                Click="newButton_Click"
                Content="新規"
                Style="{StaticResource ToolButtonStyle}" />
            <Button
                x:Name="openButton"
                Click="openButton_Click"
                Content="開く"
                Style="{StaticResource ToolButtonStyle}" />
            <Button
                x:Name="saveButton"
                Click="saveButton_Click"
                Content="保存"
                Style="{StaticResource ToolButtonStyle}" />
            <Button
                x:Name="helpButton"
                Click="helpButton_Click"
                Content="ヘルプ"
                Style="{StaticResource ToolButtonStyle}" />
        </StackPanel>

        <!--  左のリスト  -->
        <ListBox
            x:Name="hogehogeList"
            Grid.Row="1"
            Background="LightCyan"
            SelectionChanged="hogehogeList_SelectionChanged" />

        <!--  右の編集エリア  -->
        <TextBox
            x:Name="editText"
            Grid.Row="1"
            Grid.Column="1"
            FontSize="18"
            Text="こんにちは"
            TextWrapping="Wrap"
            VerticalScrollBarVisibility="Visible" />

    </Grid>
</Window>
```

# ■拡張機能のインストール

Visual Studioのメニュー、`拡張機能` - `拡張機能の管理`を選択します。
![001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/3b10793b-b2cf-97e4-cc56-46f4692734aa.png)

左の一覧で`Visual Studio Marketplace`を選択し、検索ボックスに`xaml styler`を入力します。
`XAML Styler`のダウンロードボタンを押します。
![002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/2f75e214-2463-1430-1cd9-e912b0d3e38b.png)
Visual Studioを終了します。
VSIX Installerの画面が出てくるので`Modify`ボタンを押します。
![003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/67f00005-5732-7cf5-5f65-50401f544cae.png)
インストールが終わったらVisual Studioを起動します。

プロジェクトを開いてから拡張機能が読み込まれるまで少し時間がかかります。
拡張機能が読み込まれたら、XAMLエディター上で右クリックするとメニュー項目に`Format XAML`が出てくるので選択します。
![004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/40e0c744-3559-4efa-e809-e884b48075df.png)
※`Format XAML`を実行しなくても、Xamlファイルの保存時には自動的に整形されます。

## ◇設定

メニューの`ツール` - `オプション`の`XAML Styler`で色々設定できます。
![005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/40539a9f-d51e-631c-3844-35a7c8ffd7b9.png)

### ◎Attribute Formatting

属性の書式設定

|設定項目                         |説明
|---------------------------------|-----------------
|Attribute indentation            |属性のインデント
|Attribute indentation style      |属性のインデントスタイル
|Attribute tolerance              |1行で許容する属性の最大数
|Keep first attribute on same line|最初の属性を同じ行に保持する
|Max attribute characters per line|開始タグの後の各行の属性の最大文字数<br/>注)「`1` < `Max attribute per line`」 かつ 「`2` < `Attribute tolerance`」の場合のみ有効
|Max attributes per line          |属性の数が`Attribute tolerance`の設定値を超えた場合、開始タグの後の各行で持つことができる属性の最大数。<br/>1未満は制限なし。
|Newline exemption elements       |改行除外要素
|Remove design-time references    |デザイン時参照を削除する
|Separate by groups               |グループ別に分離

### ◎Attribute Reordering

属性の並べ替え

|設定項目                         |説明
|---------------------------------|-----------------
|Attribute ordering rule groups|属性順序ルール グループ
|Enable Attribute Reordering   |属性の並べ替えを有効にする
|First-line attributes         |1行目の属性
|Order attributes by name      |名前で属性を並べ替える

### ◎Element Formatting

要素の書式設定

|設定項目                         |説明
|---------------------------------|-----------------
|Put ending brackets on new line| 終了括弧を新しい行に配置する
|Remove ending tag of empty elements| 空の要素の終了タグを削除する
|Root element line breaks between attributes| 属性間のルート要素の改行
|Space before ending slash in self-closing elements| 空要素タグの`/`前の空白

### ◎Element Reordering

要素の並べ替え

|設定項目                      |説明
|------------------------------|-----------------
|Reorder canvas panel children| Canvasパネルの子の順序を変更する
|Reorder grid panel children  |     Gridパネルの子の順序を変更する
|Reorder setters              |     Setterの並べ替え
|Reorder visual state manager |     VisualStateManagerの順序変更

### ◎Markup Extension

マークアップ拡張

|設定項目                      |説明
|------------------------------|-----------------
|Enable markup extension formatting|マークアップ拡張機能の書式設定を有効にする
|Keep markup extensions of these types on one line|これらの型のマークアップ拡張機能を1行に保持する

### ◎Misc

その他

|設定項目                      |説明
|------------------------------|-----------------
|Automatically save and close documents opened by XAML Styler|    XAML Stylerによって開かれたドキュメントを自動的に保存して閉じる
|Comment padding                                            |         コメントタグの余白数
|Format XAML on save                                        |         保存時にXAMLの書式設定を行う

### ◎Thickness formatting

余白・太さの書式設定

|設定項目              |説明
|---------------------|-----------------
|Thickness attributes |余白・太さの属性名
|Thickness separator  |区切り記号

### ◎XAML Styler Configuration

XAML Stylerの構成

|設定項目                     |説明
|----------------------------|-----------------
|External configuration file |外部構成ファイル
|Reset to default            |デフォルトにリセット
|Search to drives root       |ドライブのルートを検索

# ■おまけ（C#コード整形）

C#コードの整形はコードエディタ上で<kbd><kbd>Ctrl</kbd>+<kbd>K</kbd></kbd> , <kbd><kbd>Ctrl</kbd>+<kbd>D</kbd></kbd>（`Ctrl`を押しながら`K`、`Ctrl`は押し続けたまま`K`を離して`D`を押す）で出来ます。
こちらは標準機能です。

おしまい

---

[＜＜ 最初の記事](http://qiita.com/Kosen-amai/items/f9e3df2aa80363f5af5b "Windows GUIプログラミング入門1 メッセージボックス表示") 　 [＜ 前の記事](https://qiita.com/Kosen-amai/items/231969eef137c770cc8c "Windows GUIプログラミング入門24 ドラッグ＆ドロップ") 　 [次の記事 ＞](https://qiita.com/Kosen-amai/items/e852840f8f4b30680458 "Windows GUIプログラミング入門26 画面キャプチャ")