コードを整形する方法 (Formatter) [VSCode]

導入

参考：

VSCode で完全自動フォーマットする話 | Takeaki

使い方

Shift + Alt + F / Shift + Option + F ：ファイルを自動整形する

参考：

整形のショートカットキーと保存時に自動整形する設定 | ONE NOTES

VSCode で自動整形するコマンド – Qiita

Visual Studio Code で整形機能を使う | らくがきちょう

保存時に自動整形する

設定ファイル settings.json で、editor.formatOnSave を有効に設定する。また、editor.defaultFormatter でデフォルトフォーマッターを設定する。デフォルトフォーマッターはファイルの種類別に設定することができる。

{
    // ...
    "editor.formatOnSave": true,
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[php]": {
        "editor.defaultFormatter": "persoderlind.vscode-phpcbf"
    }
    // ...
}Code language: JSON / JSON with Comments (json)

参考：

VSCode でコード整形ツールを使用する – Qiita

Visual Studio Code で保存時自動整形の設定方法 – Qiita

VS Code のフォーマッターで自動整形する (editor.formatOnSave) | まくろぐ

Visual Studio Code でいろんな言語を自動フォーマットする | K2SS

JavaScript を自動整形する

• ESLint
• Prettier
• Prettier ESLint

参考：

ESLint & Prettier | sawao

VSCode でファイル保存時に Prettier と ESLint でフォーマットをかけても、1回でフォーマットしきらないときの対処法 | 樹脂が固まる前に

Vue.js

参考：

続・VSCode 上で Vue ファイルに対して ESLint と Prettier が快適に動作する設定 – Qiita

ESLint と Prettier という名前だけ知っているような Web フロント初学者が、Vue.js やろうとして最初の設定でハマったので、備忘録として一連の設定をまとめてみた | 株式会社プロトソリューション

XML を自動整形する

• XML
• XML Tools

参考：

VSCode で XML を自動整形する | FROM ME TO YOU

XML ファイルの整形 | Ticketnote

Python を自動整形する

参考：

Python のコードを快適に書くための設定をまとめてみる | K2SS

VSCode の formatOnSave で autopep8 を使って整形する | tech weblog

Formatting | Python in Visual Studio Code

Format Document not working (autopep8, python, vscode) · Issue #6495 · microsoft/vscode-python – GitHub

autopep8 formatter – Stack Overflow

Ruby を自動整形する

• Ruby
• rufo
• endwise

参考：

VSCode で Ruby を書く準備 – Qiita

VScode で ruby-rubocop が動かなくなったら executePath を設定してみよう – Qiita

VScode で Ruby の自動整形を使いたいが 「フォーマッタがインストールされていません」と出てしまう – スタック・オーバーフロー

how to auto correct on save? (vscode-ruby + rubocop) – Stack Overflow

rubocop on VScode not working.Error “rubocop is not executable” – Stack Overflow

Prettier

入手：

Prettier – Code Formatter | Visual Studio Marketplace [Official]

参考：

VSCode の拡張機能 Prettier でソースコードを整形する | bnote

TypeScript コードを Prettier で自動整形する | まくろぐ

Visual Studio Code で Prettier を使用してコードをフォーマットする方法 | DigitalOcean

Beautify

動画：

Running Beautify in Visual Studio Code

入手：

Beautify | Visual Studio Marketplace [Official]

参考：

Beautify 拡張機能を使ってコードを自動フォーマット | SMART

コード整形で困った改行位置／Prettier から Beautify に変更したお話 | suzunonlog

VSCode でインデントを整える Beautify って知ってますか！ | エンジニアブログ

Ruby

入手：

Ruby | Visual Studio Marketplace [Official]

リポジトリ：

rubyide/vscode-ruby: Provides Ruby language and debugging support for Visual Studio Code – GitHub

ruby-rubocop

入手：

ruby-rubocop | Visual Studio Marketplace [Official]

リポジトリ：

misogi/vscode-ruby-rubocop: Rubocop extension for Visual Studio Code – GitHub

rufo

入手：

rufo – Ruby Formatter | Visual Studio Marketplace [Official]

リポジトリ：

ruby-formatter/rufo: The Ruby Formatter – GitHub

参考：

Double quotes ? · Issue #103 · ruby-formatter/rufo – GitHub

vscode-endwise

入手：

endwise | Visual Studio Marketplace [Official]

リポジトリ：

kaiwood/vscode-endwise: Wisely add “end” in Ruby – GitHub

XML

XML Language Support by Red Hat

動画：

XML VS Code Extension Demo

入手：

XML | Visual Studio Marketplace [Official]

リポジトリ：

redhat-developer/vscode-xml: Editing XML in Visual Studio Code made easy – GitHub

XML Tools

• Formatting
• Tree View
• XPath
• XQuery

入手：

XML Tools | Visual Studio Marketplace [Official]

リポジトリ：

DotJoshJohnson/vscode-xml: XML Tools for Visual Studio Code – GitHub

参考：

Visual Studio Code で整形機能を使う | らくがきちょう