VSCodeでPrettier SQLを使う方法

採用はこちら

VSCodeでSQLを自動整形したい場合は、SQL専用のフォーマッター拡張機能を利用すると便利です。

以前は「Prettier SQL VSCode」という拡張機能がよく利用されていましたが、現在はメンテナンスされておらず、後継として「SQL Formatter VSCode」が案内されています。

そのため、これからVSCodeでSQLのフォーマット環境を構築するのであれば、基本的には「SQL Formatter VSCode」を利用する方法が分かりやすいでしょう。

ここでは、VSCodeでSQLを整形する方法について、インストール手順や自動整形の設定、SQL方言の指定方法、うまく動かない場合の対処法まで詳しく解説します。

目次

Prettier SQLとは

SQLを読みやすく整形するためのツール

SQLフォーマッターは、SQL文のインデントや改行、キーワードの大文字・小文字などを一定のルールで自動的に整えてくれるツールです。

たとえば、次のようなSQLがあるとします。

select id,name,email from users where status='active' order by created_at desc;

フォーマッターを実行すると、設定によって次のように読みやすい形へ整形できます。

SELECT
  id,
  name,
  email
FROM
  users
WHERE
  status = 'active'
ORDER BY
  created_at DESC;

SQLの処理内容を変更するものではなく、基本的にはコードの見た目を統一する目的で利用します。

特に複数人で開発する場合は、SQLの書き方をそろえやすくなる点がメリットです。

通常のPrettierとは別物

VSCodeでは「Prettier – Code formatter」という有名な拡張機能があります。

これは主にJavaScript、TypeScript、HTML、CSS、JSON、Markdownなどを整形するためのフォーマッターです。

一方、「Prettier SQL VSCode」は名前にPrettierと付いていますが、Prettier公式のSQL版というわけではありません。

内部ではSQL Formatter系の仕組みを利用してSQLを整形します。

そのため、通常のPrettierとSQL専用フォーマッターは別のものとして考えたほうが分かりやすいでしょう。

現在はSQL Formatter VSCodeの利用が有力

Prettier SQL VSCodeはメンテナンスされていない

従来は、次の拡張機能がよく利用されていました。

Prettier SQL
inferrinizzard.prettier-sql-vscode

しかし、この拡張機能は現在メンテナンスされていません。

現在は後継として、「SQL Formatter VSCode」が案内されています。

SQL Formatter VSCodeとは

現在利用する候補としては、次の拡張機能があります。

SQL Formatter VSCode
ReneSaarsoo.sql-formatter-vsc

SQL Formatter VSCodeは、sql-formatterライブラリを利用する公式VSCode拡張機能です。

従来のPrettier SQL VSCodeの直接的な後継として位置付けられています。

ただし、注意点もあります。

基盤となっているsql-formatterライブラリ自体は現在メンテナンスモードとなっており、積極的に新機能を追加するというより、必要なバグ修正を中心に維持されています。

それでも、幅広いSQL方言に対応しており、VSCode上でSQLを整形する用途では現在も実用的な選択肢です。

VSCodeにSQL Formatterをインストールする方法

拡張機能画面を開く

まずVSCodeを起動します。

WindowsまたはLinuxでは、次のショートカットで拡張機能画面を開けます。

Ctrl + Shift + X

macOSでは、次のショートカットです。

Command + Shift + X

左側のアクティビティバーにある「拡張機能」のアイコンをクリックしても構いません。

SQL Formatterを検索する

検索欄に次の文字列を入力します。

SQL Formatter

検索結果から「SQL Formatter VSCode」を選び、インストールします。

拡張機能IDは次のとおりです。

ReneSaarsoo.sql-formatter-vsc

同じような名前の拡張機能が複数表示される場合があるため、拡張機能IDも確認すると確実です。

参考サイト

VSCodeでSQLフォーマットするなら「SQL Formatter VSCode」で決まり! #VSCode – Qiita

SQLファイルを整形する方法

SQLファイルを開く

たとえば、次のようなSQLファイルを作成します。

query.sql

中身を次のように記述します。

select id,name,email from users where status='active' and age>=20 order by created_at desc;

ドキュメントのフォーマットを実行する

WindowsまたはLinuxでは、一般的に次のショートカットでフォーマットできます。

Shift + Alt + F

macOSでは次のショートカットです。

Shift + Option + F

または、エディター上で右クリックし、

Format Document

日本語表示では、

ドキュメントのフォーマット

を選択します。

設定に応じて、次のような形に整形されます。

SELECT
  id,
  name,
  email
FROM
  users
WHERE
  status = 'active'
  AND age >= 20
ORDER BY
  created_at DESC;

SQL Formatterをデフォルトフォーマッターに設定する

複数のフォーマッターがある場合は指定する

VSCodeに複数のフォーマッターをインストールしている場合、どのフォーマッターを使うか聞かれることがあります。

その場合は、

Format Document With...

を選択します。

続いて、

Configure Default Formatter...

を選択し、「SQL Formatter VSCode」を指定します。

これにより、SQLファイルをフォーマットするときにSQL Formatterが優先的に使用されます。

保存時にSQLを自動整形する方法

editor.formatOnSaveを有効にする

毎回ショートカットを押すのが面倒な場合は、保存時に自動フォーマットする設定を有効にすると便利です。

VSCodeの設定画面を、

Ctrl + ,

で開きます。

検索欄に、

format on save

と入力し、

Editor: Format On Save

を有効にします。

これで、ファイルを保存するたびに自動でフォーマットされます。

SQLファイルだけ自動整形する

ほかの言語では自動フォーマットしたくない場合、SQLだけに設定を限定できます。

settings.jsonに次のように記述します。

{
  "[sql]": {
    "editor.formatOnSave": true
  }
}

さらにデフォルトフォーマッターも指定する場合は、次のような設定にできます。

{
  "[sql]": {
    "editor.defaultFormatter": "ReneSaarsoo.sql-formatter-vsc",
    "editor.formatOnSave": true
  }
}

この設定により、SQLファイルではSQL Formatterを使用し、保存時に自動整形できます。

SQL方言を設定する

SQLはデータベースごとに文法が異なる

SQLはすべてのデータベースで完全に同じ文法ではありません。

たとえば、次のようなSQL方言があります。

MySQL
PostgreSQL
SQLite
BigQuery
Snowflake
Transact-SQL
DuckDB
PL/SQL

データベース独自の構文を含む場合は、利用しているSQL方言を正しく指定したほうがフォーマット精度を高められます。

dialectを設定する

VSCodeの設定画面で、

SQL Formatter

と検索します。

その中にあるdialect関連の設定から、利用しているデータベースに合わせたSQL方言を選択します。

SQL方言を判別できない場合は、汎用的なgeneric SQLとして処理されます。

単純なSQLなら問題にならないこともありますが、データベース固有の構文を利用している場合は、方言を指定するのがおすすめです。

MySQLで利用する場合

MySQLの方言を指定する

MySQLを利用している場合は、SQL FormatterのdialectをMySQLに設定します。

たとえば、次のSQLがあるとします。

select u.id,u.name,count(o.id) order_count from users u left join orders o on u.id=o.user_id where u.status='active' group by u.id,u.name order by order_count desc;

整形すると、設定によって次のような形になります。

SELECT
  u.id,
  u.name,
  count(o.id) AS order_count
FROM
  users AS u
  LEFT JOIN orders AS o ON u.id = o.user_id
WHERE
  u.status = 'active'
GROUP BY
  u.id,
  u.name
ORDER BY
  order_count DESC;

長いSQLでも構造を把握しやすくなります。

PostgreSQLで利用する場合

PostgreSQL独自の構文に対応しやすくなる

PostgreSQLでは、汎用SQLにはない独自機能を使用することがあります。

たとえば、

RETURNING

などの構文です。

PostgreSQLを利用している場合は、dialectをPostgreSQLに設定しておくと、独自構文をより適切に解析しやすくなります。

SQL Serverで利用する場合

TransactSQLを選択する

Microsoft SQL Serverでは、一般的にT-SQLと呼ばれるSQL方言を使用します。

SQL Formatterでは、

TransactSQL

を指定します。

SQL Serverでは、

TOP

など独自の構文が利用されるため、汎用SQLではなくTransactSQLを指定しておくのが適切です。

BigQueryで利用する場合

BigQuery用の方言を指定する

Google BigQueryを利用している場合は、dialectにBigQueryを指定します。

BigQueryはSQLをベースにしていますが、独自の関数や構文も多く存在します。

そのため、専用の方言を設定したほうが安定してフォーマットしやすくなります。

SQLキーワードの大文字・小文字を変更する

keywordCaseを設定する

SQL FormatterにはkeywordCaseという設定があります。

これを利用すると、SQLキーワードの表記を統一できます。

たとえば、

select id from users where status='active';

を大文字設定でフォーマットすると、

SELECT
  id
FROM
  users
WHERE
  status = 'active';

のようになります。

反対に、すべて小文字へ統一することも可能です。

関数名やデータ型の表記も変更できる

functionCaseやdataTypeCaseを利用する

現在のSQL Formatterでは、SQLキーワード以外にも表記を調整できる設定があります。

たとえば、

functionCase
dataTypeCase
identifierCase

などです。

関数名やデータ型、識別子の表記ルールをプロジェクト内で統一したい場合に便利です。

インデント幅を変更する

VSCode側の設定を利用できる

SQL Formatterは基本的に、VSCode側の次の設定を利用できます。

editor.tabSize
editor.insertSpaces

たとえば、スペース2個でインデントするか、4個でインデントするかを調整できます。

SQL Formatter独自の設定も利用できる

必要に応じて、

ignoreTabSettings
tabSizeOverride
insertSpacesOverride

などの設定を利用できます。

通常はVSCode全体のインデント設定を利用すれば問題ありません。

SQLだけ別のインデント幅にしたい場合に、これらの設定を使うと便利です。

ANDやORの改行位置を変更する

logicalOperatorNewlineを利用する

SQL FormatterにはlogicalOperatorNewlineという設定があります。

これを利用すると、ANDやORを改行の前後どちらに配置するか調整できます。

たとえば、

WHERE
  status = 'active'
  AND age >= 20
  AND deleted_at IS NULL

のような形式に統一できます。

WHERE句の条件が多いSQLでは、特に読みやすさが向上します。

SQLの改行幅を調整する

expressionWidthを設定する

expressionWidthを利用すると、式をどの程度の幅まで1行に収めるかを調整できます。

ただし、これは厳密な最大行長を指定する設定というより、SQL Formatterが改行を判断するときの目安です。

複雑なSQLが横に長くなりすぎる場合に調整すると便利です。

複数のSQL文の間隔を変更する

linesBetweenQueriesを利用する

1つのSQLファイルに複数のクエリを書く場合は、linesBetweenQueriesを利用できます。

たとえば、

SELECT *
FROM users;

SELECT *
FROM orders;

のようなSQL文同士の間に、何行の空行を入れるか調整できます。

SQLファイル全体の見た目を統一するのに役立ちます。

通常のPrettierとSQL Formatterを併用する

言語ごとにフォーマッターを分ける

Web開発では、通常のPrettierとSQL Formatterを併用する方法も実用的です。

たとえば、次のように分けられます。

JavaScript → Prettier
TypeScript → Prettier
HTML → Prettier
CSS → Prettier
JSON → Prettier
SQL → SQL Formatter

VSCodeでは言語ごとにデフォルトフォーマッターを指定できるため、SQLだけ専用フォーマッターを利用できます。

無理にすべての言語を1つのフォーマッターへ統一する必要はありません。

PrettierからSQLを整形する方法もある

prettier-plugin-sql-cstを利用する

SQL専用のVSCode拡張機能を使うのではなく、通常のPrettierにSQL用プラグインを追加する方法もあります。

その代表例が、

prettier-plugin-sql-cst

です。

npmでは、たとえば次のように導入できます。

npm install --save-dev prettier prettier-plugin-sql-cst

PrettierをCLIやCI/CDでも利用しているプロジェクトでは、SQLも同じ仕組みに統一できるメリットがあります。

対応方言には注意が必要

prettier-plugin-sql-cstはすべてのSQL方言が同じ成熟度でサポートされているわけではありません。

SQLiteやBigQueryなどは比較的対応が進んでいますが、MySQLやPostgreSQLなど一部の方言はExperimentalとして扱われることがあります。

そのため、単純にVSCode上で幅広いSQL方言を整形したい場合は、SQL Formatter VSCodeのほうが扱いやすいケースがあります。

SQL Formatterが動かない場合の対処法

ファイルの言語モードを確認する

まず、VSCode右下に表示されている言語モードを確認します。

SQLファイルなら通常、

SQL

と表示されます。

もし、

Plain Text

になっている場合は、SQL Formatterが動作しないことがあります。

右下の言語名をクリックし、

SQL

へ変更してください。

デフォルトフォーマッターを確認する

右クリックして、

Format Document With...

を選択します。

SQL Formatterが一覧に表示されているか確認し、

Configure Default Formatter...

からSQL Formatterを指定します。

他のフォーマッターとの競合を確認する

SQL関連の拡張機能を複数インストールしている場合、どのフォーマッターを使用するか競合することがあります。

たとえば、

Prettier SQL
SQL Formatter
ほかのSQL拡張機能

などを同時に導入している場合です。

不要なSQLフォーマッターを無効化するか、SQL用のデフォルトフォーマッターを明示的に指定すると改善することがあります。

SQL方言を確認する

フォーマット時にエラーが発生する場合や、期待どおりに整形されない場合は、SQL方言の設定も確認します。

たとえば、PostgreSQL独自のSQLをMySQLとして解析すると、正しく処理できない可能性があります。

実際に利用しているデータベースとdialect設定を一致させることが重要です。

VSCodeでPrettier SQLを使うときのおすすめ設定

SQL Formatterと通常のPrettierを使い分ける

一般的なWeb開発環境であれば、次のような構成が分かりやすいでしょう。

JavaScript・TypeScript・HTML・CSS
↓
Prettier

SQL
↓
SQL Formatter VSCode

さらに、

SQL Formatterのdialect
↓
利用しているDBに合わせる

editor.formatOnSave
↓
true

としておけば、SQLファイルを保存するだけで自動整形できます。

プロジェクト全体で設定を共有する

チーム開発では、VSCodeのワークスペース設定を利用し、.vscode/settings.jsonにフォーマット設定を保存する方法もおすすめです。

たとえば、

{
  "[sql]": {
    "editor.defaultFormatter": "ReneSaarsoo.sql-formatter-vsc",
    "editor.formatOnSave": true
  }
}

のように設定しておけば、プロジェクト内でフォーマッターを統一しやすくなります。

VSCodeでPrettier SQLを使う方法のまとめ

VSCodeでSQLを自動整形したい場合は、SQL Formatter VSCodeを利用する方法がシンプルです。

従来の「Prettier SQL VSCode」は現在メンテナンスされていないため、新しく導入するのであれば後継のSQL Formatter VSCodeを検討するとよいでしょう。

基本的な導入手順は次のとおりです。

  1. SQL Formatter VSCodeをインストールする
  2. SQL Formatterをデフォルトフォーマッターに設定する
  3. 利用しているデータベースに合わせてdialectを設定する
  4. 必要に応じてeditor.formatOnSaveを有効にする
  5. Shift + Alt + FなどでSQLをフォーマットする

特にMySQL、PostgreSQL、SQLite、SQL Server、BigQuery、Snowflakeなどは、それぞれSQL構文に違いがあります。

そのため、使用しているデータベースに合ったSQL方言を指定しておくことが重要です。

また、通常のPrettierとSQL Formatterを言語ごとに使い分ける方法も実用的です。

JavaScriptやTypeScriptなどは通常のPrettier、SQLファイルはSQL Formatterという構成にすると、VSCode上でコード全体を効率よく整形できます。

以上、VSCodeでPrettier SQLを使う方法についてでした。

最後までお読みいただき、ありがとうございました。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次