Tabs

2025-06-06

プログラミングでは、コードの構造を視覚的に分かりやすくするためにインデントを使用します。このインデントには主に2つの方法があります。

スペース（Spaces）: 複数の半角スペースを組み合わせてインデントを作成する方法です。例えば、2スペースや4スペースで1つのインデントレベルを表します。
タブ（Tabs）: タブ文字（\t）を使用してインデントを作成する方法です。

Prettierでは、これらのインデント方法と、タブを使用する場合のその幅を細かく設定できます。

主な設定オプションは以下の2つです。

tabWidth:
- 役割: 1つのインデントレベルを何文字（スペース換算）として扱うかを定義します。
- 値: 数値（デフォルトは 2）。
- 例（.prettierrc ファイル）:
```
{
  "tabWidth": 4
}
```
  この設定にすると、Prettierはインデントを4スペースとして扱います。
useTabs:
- 役割: インデントにスペースを使用するか、タブを使用するかを決定します。
- 値:
  - false (デフォルト): インデントにスペースを使用します。
  - true: インデントにタブを使用します。
- 例（.prettierrc ファイル）:
```
{
  "useTabs": true
}
```
  この設定にすると、Prettierはコードのインデントにタブ文字を使用します。

useTabs と tabWidth の関係性

useTabs が true (タブを使用) の場合、インデント自体はタブ文字で行われます。このとき、tabWidth はエディタがタブ文字を何スペースとして表示するかをPrettierに伝える役割を果たします。つまり、Prettierはタブでインデントを行いますが、そのタブが視覚的にどれくらいの幅に見えるべきかを示します。これにより、Prettierが生成するコードの整形が、エディタの設定と一致するように調整されます。
useTabs が false (スペースを使用) の場合、tabWidth は1つのインデントレベルが何スペースになるかを直接決定します。例えば、tabWidth: 2 なら2スペース、tabWidth: 4 なら4スペースでインデントされます。

なぜこれらの設定が重要なのか？

アクセシビリティ: 特にタブは、視覚に障害を持つ開発者にとって重要です。タブ文字は、エディタの設定によって表示される幅を自由に調整できるため、個人の視覚的な好みに合わせてインデント幅を変えることができます。一方、スペースでインデントされたコードは、その幅が固定されてしまうため、視覚的な調整ができません。
一貫性: チームで開発する場合、全員が同じインデントルールを使用することで、コードの見た目を統一し、可読性を高めることができます。インデントのばらつきは、コードレビューを難しくしたり、バージョン管理システムでの差分（diff）を読みにくくしたりする原因になります。

コードのインデントが意図した通りにならない

症状:

エディタ上では正しく見えるのに、Prettier でフォーマットするとずれる。
タブでインデントしたいのにスペースが使われる、またはその逆。
Prettier を実行しても、タブの幅が設定した通りにならない（例: tabWidth: 4 に設定しているのに2スペースでインデントされる）。

原因と解決策:

prettier-ignore コメントや .prettierignore ファイルによる無視:
- 原因: コードの一部に // prettier-ignore のようなコメントがある、または .prettierignore ファイルで特定のファイルやディレクトリがフォーマット対象から除外されている可能性があります。
- 解決策: これらの無視設定が意図したものであるか確認します。
Prettier のバージョンが古い、または読み込まれていない:
- 原因: Prettier のバージョンが古い、またはVS CodeなどのエディタでPrettierが正しくロードされていない場合、設定が適用されないことがあります。
- 解決策:
  - プロジェクトの package.json で Prettier のバージョンを確認し、必要に応じて最新版にアップデートします (npm install prettier@latest または yarn add prettier@latest)。
  - VS Code の場合、Prettier 拡張機能が有効になっているか、最新版であるかを確認し、必要であれば再インストールします。
  - VS Code を再起動すると問題が解決することがあります。
.editorconfig ファイルとの競合:
- 原因: プロジェクトのルートディレクトリに .editorconfig ファイルが存在する場合、これが Prettier やエディタのインデント設定を上書きしている可能性があります。
- 解決策: .editorconfig ファイルを確認し、indent_style (space or tab) や indent_size (tab width) の設定が意図した通りになっているか確認します。必要に応じて .editorconfig の設定を Prettier に合わせるか、Prettier がこれを無視するように設定を調整します。
Prettier の設定ファイル (.prettierrcなど) とエディタの設定の不一致:
- 原因: Prettierの設定と、VS Code などのエディタのインデント設定（editor.tabSize、editor.insertSpacesなど）が競合している場合、予期せぬインデントになります。
- 解決策:
  - Prettier の設定を確認: まず、プロジェクトの .prettierrc ファイル（またはpackage.jsonのprettierフィールドなど）で、useTabs と tabWidth が意図した通りに設定されているかを確認します。
```
// .prettierrc
{
  "useTabs": true, // タブを使用する場合
  "tabWidth": 4   // タブの幅（スペース換算）
}
```
    または
```
// .prettierrc
{
  "useTabs": false, // スペースを使用する場合
  "tabWidth": 2   // スペースの幅
}
```
  - エディタの設定を Prettier に合わせる: 使用しているエディタ（VS Codeなど）のインデント設定を、Prettier の設定と一致させます。
    - VS Codeの場合:
      - File (または Code on macOS) > Preferences > Settings を開きます。
      - 検索バーで tab size と insert spaces を検索します。
      - Editor: Tab Size を Prettier の tabWidth に合わせます。
      - Editor: Insert Spaces を Prettier の useTabs に合わせます (useTabs: true なら false、useTabs: false なら true)。
      - または、VS Code の Prettier 拡張機能の設定を確認し、Prettier: Use Tabs や Prettier: Tab Width が適切に設定されているか確認します。
    - Prettier 拡張機能の「Format On Save」が有効になっているか確認する: editor.formatOnSave が true になっているか確認します。

ESLintなどのリンターとの競合

症状:

Prettier でフォーマットすると ESLint がエラーを出し、ESLint で修正すると Prettier が元に戻す、というような無限ループが発生する。
Prettier と ESLint を併用している場合、インデントに関する警告やエラーが両方から表示される。

原因と解決策:

インデントルールに関する競合:
- 原因: Prettier はコードの整形（見た目）に特化しており、ESLint はコードの品質（潜在的なバグ、スタイルの一貫性）をチェックするツールです。両者がインデントに関する異なるルールを持っていると競合が発生します。
- 解決策:
  - eslint-config-prettier の導入: これが最も一般的な解決策です。eslint-config-prettier は、Prettier と競合するESLintの整形ルールを無効にするための設定です。
```
npm install --save-dev eslint-config-prettier
# または
yarn add --dev eslint-config-prettier
```
    その後、.eslintrc.json の extends 配列の末尾に "prettier" を追加します。
```
// .eslintrc.json
{
  "extends": [
    // ...他の設定
    "prettier" // これを必ず最後に追加
  ]
}
```
    これにより、ESLint はインデントや改行など、Prettier が担当するフォーマットに関するルールを無効にし、Prettier に一任するようになります。
  - eslint-plugin-prettier の導入 (非推奨): 以前は eslint-plugin-prettier を使用して Prettier のルールを ESLint のルールとして実行する方法もありましたが、これは推奨されなくなりました。Prettier をフォーマッターとして、ESLint をリンターとして役割を明確に分ける eslint-config-prettier の方がシンプルで問題が少ないです。

YAMLファイルなど、特定のファイルタイプでのタブの問題

症状:

JavaScriptやTypeScriptファイルでは Prettier がうまく動作するのに、YAMLファイルやMarkdownファイルなど、特定のファイルタイプでインデントが崩れる、またはフォーマットされない。

原因と解決策:

Prettier がデフォルトで対応していない、またはプラグインが必要:
- 原因: Prettier は多くの言語をサポートしていますが、一部の言語や特定の設定では、追加のプラグインが必要になる場合があります。特に YAML はインデントが非常に重要で、Prettier がタブとスペースの混合を正しく扱えないことがあります。
- 解決策:
  - 対象のファイルタイプが Prettier でサポートされているか確認します。
  - 必要な場合は、その言語用の Prettier プラグインをインストールします。例えば、YAML の場合は特別なプラグインは通常不要ですが、稀に問題が報告されることがあります。
  - YAML の場合、タブの使用は一般的に非推奨です。YAML の標準ではスペースインデントが推奨されており、タブを使用するとパースエラーになることがあります。可能であればスペースに統一することを検討してください。
  - Prettier のバージョンが古い場合、新しい言語機能やフォーマットに対応していないことがあります。最新版にアップデートしてみてください。

VS Code の出力パネルを確認: VS Code の「出力」パネル（View -> Output、ドロップダウンから「Prettier」を選択）にエラーメッセージや警告が表示されることがあります。これらは問題解決の手がかりになります。
prettier --check で確認: コマンドラインで npx prettier --check . を実行すると、フォーマットが必要なファイルや、Prettier の設定に問題がある場合にその情報が表示されます。
キャッシュのクリア: 稀に、Node.js やエディタのキャッシュが原因で問題が発生することがあります。node_modules ディレクトリを削除し、npm install (または yarn install) を再度実行してみてください。
シンプルな設定から試す: 多くの設定オプションがある場合、一旦シンプルな .prettierrc を作成し、そこから徐々にオプションを追加していくことで、問題の原因を特定しやすくなります。

useTabs: false (デフォルト) と tabWidth: 2 の場合

これはPrettierのデフォルト設定であり、インデントに2つの半角スペースを使用します。

.prettierrc の設定

{
  "useTabs": false,
  "tabWidth": 2
}

整形前のコード (JavaScriptの例)

function greet(name) {
    if (name) {
        console.log("Hello, " + name + "!");
    } else {
        console.log("Hello, world!");
    }
}

Prettier による整形後のコード

function greet(name) {
  if (name) {
    console.log("Hello, " + name + "!");
  } else {
    console.log("Hello, world!");
  }
}

解説
各インデントレベルが2つの半角スペースで表現されています。if文やelse文のブロック、console.logの部分が2スペースずつ字下げされているのがわかります。

useTabs: false と tabWidth: 4 の場合

インデントに4つの半角スペースを使用します。

.prettierrc の設定

{
  "useTabs": false,
  "tabWidth": 4
}

整形前のコード (上記と同じ)

function greet(name) {
    if (name) {
        console.log("Hello, " + name + "!");
    } else {
        console.log("Hello, world!");
    }
}

Prettier による整形後のコード

function greet(name) {
    if (name) {
        console.log("Hello, " + name + "!");
    } else {
        console.log("Hello, world!");
    }
}

解説
各インデントレベルが4つの半角スペースで表現されています。前の例と比べて、字下げの幅が広くなっているのが視覚的にわかります。

useTabs: true と tabWidth: 4 の場合

インデントにタブ文字を使用し、そのタブ文字が視覚的に4スペース分の幅として扱われることをPrettierに伝えます。

.prettierrc の設定

{
  "useTabs": true,
  "tabWidth": 4
}

整形前のコード (上記と同じ)

function greet(name) {
    if (name) {
        console.log("Hello, " + name + "!");
    } else {
        console.log("Hello, world!");
    }
}

Prettier による整形後のコード

function greet(name) {
	if (name) {
		console.log("Hello, " + name + "!");
	} else {
		console.log("Hello, world!");
	}
}

解説
この例では、インデントがタブ文字 (\t) で表現されています。GitHubなどのウェブ上や、タブ文字を2スペースとして表示するよう設定されたエディタでこのコードを見ると、インデントが2スペースに見えるかもしれません。しかし、タブ文字を4スペースとして表示するよう設定されたエディタで見ると、上記の「tabWidth: 4 でスペースインデント」の例と同じように、4スペースの幅で表示されます。

インデントにタブ文字を使用し、そのタブ文字が視覚的に2スペース分の幅として扱われることをPrettierに伝えます。

.prettierrc の設定

{
  "useTabs": true,
  "tabWidth": 2
}

整形前のコード (上記と同じ)

function greet(name) {
    if (name) {
        console.log("Hello, " + name + "!");
    } else {
        console.log("Hello, world!");
    }
}

Prettier による整形後のコード

function greet(name) {
  if (name) {
    console.log("Hello, " + name + "!");
  } else {
    console.log("Hello, world!");
  }
}

解説
これもインデントはタブ文字で行われます。しかし、あなたのエディタがタブを2スペースとして表示するように設定されている場合、上記の「tabWidth: 2 でスペースインデント」の例と全く同じ見た目になります。

ここが重要です。useTabs: true の場合、tabWidth は整形結果の見た目をエディタがどのように解釈すべきかをPrettierに伝えるものであり、Prettierが挿入する実際の文字は常にタブ文字です。

useTabs: true: インデントにタブ文字 (\t) を挿入します。tabWidth は、そのタブ文字が視覚的に何スペース分の幅として扱われるかをPrettierに伝え、それに従ってPrettierはタブを配置します。
useTabs: false: インデントに半角スペースを挿入します。tabWidth はそのスペースの数を直接指定します。

これらの設定を適切に行うことで、プロジェクト全体で一貫したインデントスタイルを維持し、コードの可読性を高めることができます。 Prettierにおける「Tabs（タブ）」に関連するプログラミングの例は、主にPrettierの設定ファイルでインデントの挙動を制御する方法を示すことになります。

Prettierの設定ファイル (`.prettierrc`など)

Prettierは、プロジェクトのルートディレクトリに配置された設定ファイル（例: .prettierrc, .prettierrc.json, .prettierrc.js, .prettierrc.yaml, package.jsonのprettierフィールドなど）に基づいてコードをフォーマットします。

スペースでインデントする場合 (推奨される設定)

ほとんどのJavaScriptコミュニティでは、スペースによるインデントが推奨されています。Prettierのデフォルト設定もスペースを使用します。

.prettierrc.json の例

{
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "semi": true,
  "trailingComma": "es5"
}

解説

"trailingComma": "es5": ES5で有効な場所（オブジェクト、配列など）に末尾のカンマを追加します。
"semi": true: 文の終わりにセミコロン (;) を追加します。
"singleQuote": true: 文字列リテラルにシングルクォーテーション (') を使用します。
"useTabs": false: インデントにタブ文字ではなく、スペースを使用することを明示的に指定します。
"tabWidth": 2: 1つのインデントレベルを2つの半角スペースで表現します。

フォーマットされるコードの例 (JavaScript)

フォーマット前 (.prettierrc.jsonが上記の場合)

// bad indentation and mixed quotes
function greet( name, age ){
  if( age > 18 ) {
    console.log( "Hello, " + name + "!" );
  } else {
      console.log('Hi there!');
  }
}

const myObject = {
    key1: 'value1',
    key2: 'value2'
};

Prettier でフォーマット後

function greet(name, age) {
  if (age > 18) {
    console.log('Hello, ' + name + '!');
  } else {
    console.log('Hi there!');
  }
}

const myObject = {
  key1: 'value1',
  key2: 'value2',
};

上記の例では、全てのインデントが2つのスペースに統一され、文字列はシングルクォーテーションに、オブジェクトの末尾にはカンマが追加されています。

タブでインデントする場合

もしプロジェクトやチームの規約でタブインデントが必須である場合は、useTabsをtrueに設定します。

.prettierrc.json の例

{
  "tabWidth": 4,
  "useTabs": true,
  "singleQuote": true,
  "semi": true,
  "trailingComma": "all"
}

解説

"useTabs": true: インデントにタブ文字を使用します。
"tabWidth": 4: タブ文字1つが4つの半角スペース分の幅として扱われることを示します。Prettierは実際にタブ文字 (\t) を挿入しますが、エディタでの表示はtabWidthの設定によって変わります。

フォーマットされるコードの例 (JavaScript)

フォーマット前 (.prettierrc.jsonが上記の場合)

// bad indentation and mixed quotes
function calculateSum(a,  b) {
  const result = a + b;
      return result;
}

const data = [
  'itemA',
  'itemB'
];

Prettier でフォーマット後

function calculateSum(a, b) {
    const result = a + b;
    return result;
}

const data = [
    'itemA',
    'itemB',
];

上記の例では、インデントがタブ文字（タブ幅4スペース）に統一されています。

`package.json` に Prettier 設定を記述する例

package.json ファイルの prettier フィールドに直接設定を記述することも可能です。

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "A sample project",
  "main": "index.js",
  "scripts": {
    "format": "prettier --write ."
  },
  "devDependencies": {
    "prettier": "^3.0.0"
  },
  "prettier": {
    "tabWidth": 2,
    "useTabs": false,
    "singleQuote": true,
    "printWidth": 80
  }
}

CLI で一時的に設定を上書きする例

コマンドラインからPrettierを実行する際に、一時的に設定を上書きすることもできます。これは、特定のファイルだけ異なるインデントスタイルでフォーマットしたい場合などに便利です。

タブインデントでフォーマット（タブ幅2として表示）
```
npx prettier --write --tab-width 2 --use-tabs src/anotherFile.js
```

スペースインデントでフォーマット（タブ幅4）

npx prettier --write --tab-width 4 --no-use-tabs src/myFile.js

プロジェクトに .editorconfig ファイルが存在する場合、Prettierはそちらの設定も参照します。ただし、Prettierの設定ファイル（.prettierrcなど）の方が優先されます。

.editorconfig の例

# top-most EditorConfig file
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

解説

indent_size = 2: 1つのインデントレベルを2スペースとする。
indent_style = space: インデントにスペースを使用する。

もし、Prettierの.prettierrcでuseTabs: trueを設定している場合、Prettierは.editorconfigのindent_style = spaceを無視して、タブ文字でインデントします。しかし、tabWidthに関しては、Prettierの設定がない場合に.editorconfigのindent_sizeが使用されることがあります。

.editorconfig ファイルの使用

Prettierの設定以外で、プロジェクト全体のインデントスタイルを管理する非常に強力な方法の一つが .editorconfig ファイルです。

代替方法としての位置づけ:
- Prettier は通常、まず自身の設定ファイル（.prettierrcなど）を読み込みます。
- もし Prettier の設定で tabWidth や useTabs が明示的に設定されていない場合、Prettier は .editorconfig の設定を参照します。
- メリット:
  - エディタとの連携: Prettier がなくても、.editorconfig をサポートするエディタであれば、開発者がファイルを開いた際に自動的にインデント設定が適用されます。これにより、手動での設定ミスを防ぎ、一貫したインデントを維持できます。
  - Prettier 以外での適用: コードフォーマッタだけでなく、IDEの補完機能など、様々なエディタ機能に影響を与えます。
  - 言語横断的: 特定のプログラミング言語に限定されず、プロジェクト内のあらゆるファイルタイプに適用できます。
- デメリット: Prettier の設定が .editorconfig よりも優先されるため、両方のファイルが存在する場合は、一貫性を保つために両方の設定を同期させる必要があります。
「Tabs」との関連:
- indent_style = space または indent_style = tab でインデントの種類を定義できます。
- indent_size = 2 や indent_size = 4 でインデントの幅を定義できます。

.editorconfig の例

# top-most EditorConfig file
root = true

[*] # 全てのファイルに適用
charset = utf-8
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[*.js] # JavaScriptファイルにのみ適用
indent_style = space
indent_size = 2

[*.yaml] # YAMLファイルにのみ適用
indent_style = space
indent_size = 2

リンター (ESLint など) との連携

インデントのスタイルを強制する目的で、ESLint のようなコードリンターを使用することも可能です。

代替方法としての位置づけ:
- Prettier との役割分担:
  - Prettier: コードの自動整形（フォーマット）に特化しており、インデントの「見た目」を統一します。
  - ESLint: コードの「品質」と「スタイルの一貫性」をチェックし、問題があれば警告/エラーとして報告します。
- 推奨される連携: 通常、Prettier と ESLint は併用されますが、インデントのような「見た目」に関するルールは Prettier に一任し、ESLint の同様のルールは無効にするのが一般的です。これは eslint-config-prettier を使用することで実現されます。
- メリット:
  - Prettier が適用される前に、ESLint がインデントの不一致を警告できる。
  - より複雑なインデントルール（例: 特定の構文におけるインデントの例外）を定義できる場合がある。
- デメリット:
  - Prettier との競合を解決するための設定が必要（eslint-config-prettier）。
  - 単独でフォーマット機能を提供するわけではない。
「Tabs」との関連:
- ESLint には、indent ルールなど、インデントスタイルに関するルールが豊富に用意されています。これにより、スペースかタブか、タブ幅はいくつか、といった詳細な設定が可能です。
- 例（.eslintrc.json の一部）:
```
{
  "rules": {
    "indent": ["error", 2, { "SwitchCase": 1 }],
    "no-tabs": "error" // タブ文字の使用を禁止
  }
}
```

エディタ/IDE 固有の設定

開発環境によっては、プロジェクト設定ではなく、エディタやIDEのグローバルな設定でインデントスタイルを定義することも可能です。

「Tabs」との関連:
- VS Code の例:
  - Editor: Tab Size (editor.tabSize): タブの幅（スペース換算）またはスペースインデントの幅を設定。
  - Editor: Insert Spaces (editor.insertSpaces): タブキーを押したときにスペースを挿入するか、タブ文字を挿入するかを決定。
- 代替方法としての位置づけ:
  - プロジェクトローカルな設定を優先: 一般的に、プロジェクト固有の Prettier 設定や .editorconfig が存在する場合、それらがエディタのグローバル設定よりも優先されます。これは、プロジェクトごとに異なるコーディングスタイルを採用できるため、望ましい挙動です。
  - メリット: 開発者が個人的に好むインデントスタイルを、プロジェクト設定が上書きしない限り、適用できる。
  - デメリット: プロジェクト間でインデントが不揃いになる可能性がある。チーム開発では推奨されません。

Git フックによる強制

コードのインデントスタイルを自動的にチェック・修正する別の方法として、Git フックを利用することも可能です。

代替方法としての位置づけ:
- これは Prettier 自体の代替というよりは、Prettier の「Tabs」設定が確実に適用されるようにするための運用上の代替手段です。
- メリット: 開発者が手動でフォーマットを実行し忘れても、コミット時に自動で整形されるため、リポジトリに不揃いなインデントのコードがコミットされるのを防げます。
- デメリット: 設定が必要であり、環境によってはフックの導入に手間がかかる場合があります。
「Tabs」との関連:
- pre-commit フックに Prettier の実行コマンド（例: prettier --check や prettier --write）を組み込むことで、コミット前にコードがフォーマットされているかを確認したり、自動でフォーマットしたりできます。
- lint-staged のようなツールを pre-commit フックと組み合わせることで、ステージングされているファイルのみを対象に Prettier を実行し、高速化することも可能です。

これらの代替方法や関連技術は、Prettier の「Tabs」設定と組み合わせることで、より堅牢で一貫性のあるコーディングスタイルをプロジェクト全体で維持するのに役立ちます。特に、.editorconfig と eslint-config-prettier を併用する構成は、今日のモダンなフロントエンド開発で広く推奨されています。 Prettier は、コードフォーマッターとして非常に意見が強く（"opinionated"）、その哲学として「設定項目を最小限に抑え、開発者がフォーマットに関する議論に時間を費やすのを減らす」というものがあります。そのため、インデント（タブとスペース）に関する代替的なプログラミング方法は、Prettier のデフォルトの挙動をカスタマイズすること、またはPrettier 以外のツールを使用すること、の2つに大別されます。

Prettier の設定でインデントを制御する

Prettier の「タブ」に関する設定は、主に以下の2つのオプションで制御されます。これらが、Prettier でインデントの挙動を変える唯一の方法と言っても過言ではありません。

tabWidth: 1つのインデントレベルが何文字分に相当するかを指定します。useTabs: false の場合は挿入されるスペースの数になり、useTabs: true の場合はタブ文字の「見た目の幅」としてPrettierが考慮します。
useTabs: true に設定するとタブ文字 (\t) でインデントし、false (デフォルト) に設定するとスペースでインデントします。

これらの設定は、プロジェクトルートの.prettierrcファイル（.json, .js, .yamlなど）やpackage.jsonのprettierフィールドに記述します。

例: スペース2文字でインデントする (最も一般的)

// .prettierrc
{
  "tabWidth": 2,
  "useTabs": false
}

例: タブ文字でインデントする (タブ幅4)

// .prettierrc
{
  "tabWidth": 4,
  "useTabs": true
}

「代替方法」としての側面

SmartTabs (賢いタブ): Prettier には直接的なオプションとして存在しませんが、useTabs: true に設定した場合、Prettier は行頭のインデントにはタブ文字を使用し、行中のアライメント（例えば、三項演算子の各行を揃える場合など）にはスペースを使用する「SmartTabs」という挙動を示します。これは、タブとスペースのそれぞれの利点を組み合わせたインデント方法として知られています。開発者がこの挙動を明示的に設定するオプションはありませんが、useTabs: true の結果としてこの挙動が得られます。

Prettier はフォーマッターであるため、インデントの制御に特化した「代替方法」というよりは、他のツールとの連携や、Prettier ではカバーできない部分を補完する形でインデントの一貫性を保つ方法が考えられます。

a. `.editorconfig` を使用する

.editorconfigファイルは、異なるエディタやIDE間で一貫したコーディングスタイルを定義するための設定ファイルです。Prettier は、設定がない場合にこの.editorconfigの情報を参照します。

.editorconfig の例

# top-most EditorConfig file
root = true

[*]
indent_style = space
indent_size = 2

「代替方法」としての側面

Prettier のフォールバック: もしプロジェクトに.prettierrcファイルがなく、Prettierがデフォルト設定を使用する代わりにインデントの設定をどこかから取得する必要がある場合、.editorconfigがその情報を提供できます。ただし、.prettierrcが存在し、tabWidthやuseTabsが設定されている場合は、Prettierの設定が.editorconfigより優先されます。
エディタのインデントを制御: .editorconfig はエディタのインデント挙動に直接影響を与えます。Prettier が実行される前、またはPrettier が対象としないファイルタイプ（例えば、Prettier がデフォルトでサポートしていないファイルなど）に対して、エディタが自動的に正しいインデントを行うように設定できます。

b. リンター (ESLintなど) を使用する

ESLint などのリンターは、コードの品質チェックだけでなく、コーディングスタイル（インデントを含む）の強制にも利用できます。しかし、Prettier と ESLint の「タブ」に関するルールが競合すると問題が発生します。

「代替方法」としての側面 (Prettierとの共存):

eslint-config-prettier: Prettier と ESLint を併用する場合、ESLint のフォーマットに関するルールを無効にするために eslint-config-prettier を使用するのが最も一般的です。これにより、インデントを含むフォーマットは Prettier に一任され、ESLint はコード品質のチェックに専念します。
```
// .eslintrc.json
{
  "extends": [
    // ... 他の ESLint 設定
    "prettier" // Prettier と競合するルールを無効にする
  ]
}
```
これは、Prettier のタブ/スペース設定と ESLint のそれとが「競合しないようにする」ための「代替方法」であり、Prettier の設定を上書きするものではありません。

c. 特定の言語のフォーマッター

Prettier は多くの言語をサポートしていますが、Python の Black や Go の gofmt のように、特定の言語に特化した強力なフォーマッターも存在します。これらのツールは、その言語の慣習やベストプラクティスに基づいたインデントルールを持っています。

「代替方法」としての側面

より厳格な規約: 特定の言語コミュニティで、Prettierよりもさらに厳格なインデントルールが定められている場合、その言語専用のフォーマッターを選ぶことがあります。
Prettier の対象外の言語: Prettier がサポートしていない、または公式プラグインが存在しない言語の場合、その言語の専用フォーマッターがインデントの「代替方法」となります。

d. エディタ/IDE の組み込みフォーマッター

ほとんどのエディタやIDEには、コードフォーマット機能が組み込まれています。これらもインデントの設定を持っています。

「代替方法」としての側面

VS Code の設定例:

// .vscode/settings.json (ワークスペース設定)
{
  "editor.tabSize": 2,
  "editor.insertSpaces": true, // スペースでインデント
  "editor.formatOnSave": true
}

ただし、Prettier が有効になっている場合、Prettier の設定がエディタの組み込み設定よりも優先されるのが一般的です。

Prettier がない場合のフォールバック: プロジェクトに Prettier が導入されていない場合や、個人的な開発環境で一時的にコードを整形したい場合に利用できます。

Prettier における「Tabs」に関する「代替方法」とは、Prettier 自体の設定オプション(useTabs, tabWidth)を用いて挙動をカスタマイズすること、または Prettier がカバーしない部分（ファイルタイプやLinting）を.editorconfigやLinterで補完すること、あるいはPrettier以外の言語専用フォーマッターやエディタの組み込み機能を使うことを指します。

Prettierのファイルパス徹底解説：エラー解決から設定、活用例まで

Prettierは、コードのフォーマットを自動で行うツールです。その際に「ファイルパス」という概念は非常に重要になります。簡単に言えば、どのファイルに対してPrettierを適用するか、あるいはPrettierの設定ファイルをどこに置くかを示す情報がファイルパスです。

Web開発者必見！PrettierのHTML Whitespace Sensitivity徹底ガイド

通常、HTMLにおいて、連続するスペースやタブ、改行の多くはブラウザによって単一のスペースとして扱われたり、無視されたりします。例えば、<span>Hello World!</span> と <span>Hello World!</span> は、ほとんどの場合同じように表示されます。

Prettierでコードを美しく：Pragmaオプションの活用と代替案

Prettierは、コードの自動整形ツールです。--insert-pragma オプション（または設定ファイルで insertPragma: true）を使用すると、Prettierは整形したファイルの先頭に特別なコメント（プラグマコメント）を挿入します。

JSXクォートの悩み解決！Prettierで一貫性のあるコードを手に入れる方法

JSXはReactなどでUIを記述する際に使われるJavaScriptの拡張構文ですが、その属性値はHTMLの属性と同様に文字列として扱われます。この文字列を囲む際に、シングルクォート（'）を使うか、ダブルクォート（"）を使うかをPrettierで設定できます。

Prettierパーサーの代替手段：コード整形ツールとライブラリの比較

PrettierのParserは、与えられたコードの文字列を解析し、それを抽象構文木（Abstract Syntax Tree, AST）と呼ばれるデータ構造に変換する役割を担います。具体的には、以下のことを行います。構文解析（Parsing）: コードの文字列を読み込み、それがその言語の正しい構文に従っているかをチェックします。例えば、JavaScriptの場合、変数宣言、関数定義、ループなどの構文要素を識別します。構文エラーがあれば、解析に失敗します。

PrettierのPrint Widthでよくあるエラーと解決策

Prettierにおける「Print Width」とは、コードの1行の最大文字数を指します。Prettierは、この設定値に基づいて、コードを自動的に整形し、指定された幅を超えないように改行を行います。もう少し詳しく説明します。例外: Prettierは賢く、必ずしもすべての行をPrint Widthに収めるわけではありません。例えば、長い文字列リテラルやURLなど、分割すると可読性が著しく低下する場合などは、Print Widthを超えてもそのままにする場合があります。

Prose Wrap

「Prose Wrap」はPrettierというプログラミングのフォーマッタにおける設定項目の一つで、主にコメントやMarkdownファイルのような「散文（プログラミングコードではない、自然言語の文章）」の折り返し方を制御するものです。Prettierは、JavaScript、TypeScript、CSS、HTML、Markdownなど、様々な種類のコードやファイルを一貫したスタイルに自動的にフォーマットしてくれるツールです。その中で、「Prose Wrap」は特に以下のファイルタイプに影響します。

Prettierの「Quote Props」徹底解説：JavaScriptプロパティの引用符をマスターする

Prettierで「Quote Props」という設定は、JavaScriptやTypeScriptなどのオブジェクトリテラルで、プロパティ名をいつ引用符で囲むかを制御します。より具体的に言うと、オブジェクトのプロパティ名に、引用符で囲む必要がある特殊文字（スペース、ハイフンなど）が含まれていない場合でも、引用符で囲むかどうかを設定するものです。

Quotes

具体的には、文字列をシングルクォート（'）で囲むか、ダブルクォート（"）で囲むかを指定することができます。Prettierには、この「Quotes」に関して主に以下のオプションがあります。singleQuote (または singleQuote: true/false): このオプションがtrueに設定されている場合、Prettierは可能な限り文字列をシングルクォートで囲むように整形します。例: const name = 'Alice'; falseに設定されている場合、可能な限りダブルクォートで囲むように整形します。例: const name = "Bob"; これはデフォルトではfalse（ダブルクォート）です。

Range

これは、以下のような場合に特に便利です。IDEやエディタとの連携一部のIDEやエディタのPrettierプラグインでは、選択範囲のみをフォーマットする機能があり、その内部で「Range」の概念が使われていることがあります。既存のコードベースにPrettierを導入する際一度に全てのファイルをフォーマットするのが難しい場合、段階的に導入するために特定の範囲から始めることができます。

Tabs​

コードのインデントが意図した通りにならない

ESLintなどのリンターとの競合

YAMLファイルなど、特定のファイルタイプでのタブの問題

useTabs: false (デフォルト) と tabWidth: 2 の場合

useTabs: false と tabWidth: 4 の場合

useTabs: true と tabWidth: 4 の場合

Prettierの設定ファイル (.prettierrcなど)

スペースでインデントする場合 (推奨される設定)

タブでインデントする場合

package.json に Prettier 設定を記述する例

CLI で一時的に設定を上書きする例

.editorconfig ファイルの使用

リンター (ESLint など) との連携

エディタ/IDE 固有の設定

Git フックによる強制

Prettier の設定でインデントを制御する

a. .editorconfig を使用する

b. リンター (ESLintなど) を使用する

c. 特定の言語のフォーマッター

d. エディタ/IDE の組み込みフォーマッター

Tabs

Prettierの設定ファイル (`.prettierrc`など)

`package.json` に Prettier 設定を記述する例

a. `.editorconfig` を使用する