VS Code の Prettier の設定
Prettier – Code formatter configuration
設定と内容を忘れそうだったので覚書き。
順番は VS Code の設定画面で表示されてる順です。
現時点での拡張機能のバージョンは、1.7.3です。
- Prettier – Code formatter – Visual Studio Marketplace
- Settings – Prettier – Code formatter – Visual Studio Marketplace
- Options · Prettier
Prettier: Arrow Parens
Include parentheses around a sole arrow function parameter
function の()を省略するかどうか。
"avoid"– 可能であれば省略する。例：x => x"always"– 必ず入れる。例：(x) => x
Prettier: Bracket Spacing
Controls the printing of spaces inside object literals
オブジェクトリテラルの大括弧の間にスペースを入れるかどうか。
"true"– 例：{ foo: bar }"false"– 例：{foo: bar}
Prettier: Disable Languages
A list of languages IDs to disable this extension on
Prettier を無効にする言語IDをリストで指定できる。
例："prettier.disableLanguages": [ "vue" ],
指定できるIDはこれら？自信なし。
"javascript""javascriptreact""typescript""typescriptreact""vue"
Prettier: End Of Line
Specify the end of line used by prettier
改行コードの扱いをどうするか。
"auto"– 既存の行末を維持（ファイル内で混在してる場合は、最初の行に使用されているものが使われる）。"lf"– ラインフィードのみ（\n）、LinuxやmacOS、gitリポジトリ内で共通"crlf"– Windowsで共通のキャリッジリターン+ラインフィード文字（\r\n）"cr"– キャリッジリターン文字のみ（\r）、めったに使用されない
Prettier: Eslint Integration
Use ‘prettier-eslint’ instead of ‘prettier’. Other settings will only be fallbacks in case they could not be inferred from eslint rules.
prettier の代わりに prettier-eslint を使うかどうか。他の設定は、eslint rules から推測できない場合にのみフォールバック。（これの挙動は把握できてない）
Prettier: HTML Whitespace Sensitivity
Specify the global whitespace sensitivity for HTML files.
HTMLファイルのグローバルな空白の区別を指定します。詳細については空白を考慮したフォーマットを参照してください。（これも挙動は把握できてない）
"css"– CSSdisplayプロパティのデフォルト値を尊重する。"strict"– 厳格に扱われる。"ignore"– 無視される。
Prettier: Ignore Path
Path to a .prettierignore or similar file
Prettier で無視するファイルを指定する（.gitignore や .prettierignore など）。
Prettier: Jsx Bracket Same Line
If true, puts the `>` of a multi-line jsx element at the end of the last line instead of being alone on the next line
訳して説明するのが難しい、例を見たら理解が早いかと。
"true"– 例:
<button
className="prettier-class"
id="prettier-id"
onClick={this.handleClick}>
Click Here
</button>
"false"– 例:
<button
className="prettier-class"
id="prettier-id"
onClick={this.handleClick}
>
Click Here
</button>
Prettier: Jsx Single Quote
Use single quotes instead of double quotes in JSX
JSX ではダブルクォートではなくシングルクォートを使う。
Prettier: Parser
Override the parser. You shouldn’t have to change this setting.
パーサーを指定する。
"babylon"– Babelのパーサーのbabylonを使う。"flow"– Facebook製のFlowのパーサーを使う。
Prettier: Print Width
Fit code within this line limit
1行の文字数を指定する。
Prettier: Prose Wrap
(Markdown) wrap prose over multiple lines
マークダウンの折り返しの指定をどうするか。
"always"– 行幅を超える場合は折り返す。"never"– 折り返さない。"preserve"– そのまま。
Prettier: Require Config
Require a ‘prettierconfig’ to format
prettierconfig が必要かどうか。
Prettier: Semi
Whether to add a semicolon at the end of every line
行末のセミコロンを追加するかどうか。
Prettier: Single Quote
If true, will use single instead of double quotes
ダブルクォートの代わりにシングルクォートを使うかどうか。
Prettier: Stylelint Integration
Use ‘prettier-stylelint’ instead of ‘prettier’. Other settings will only be fallbacks in case they could not be inferred from stylelint rules.
prettier の代わりに prettier-stylelint を使うかどうか。他の設定は、stylelint rules から推測できない場合にのみフォールバック。（これの挙動も把握できてない）
Prettier: Tab Width
Number of spaces it should use per tab
タブの幅を指定する。
Prettier: Trailing Comma
Controls the printing of trailing commas wherever possible.
末尾のカンマの扱いをどうするか。（末尾のカンマ | MDN）
"none"– カンマ無し。"es5"– ECMAScript 5 の有効範囲（objects, arrays, etc）で付ける。"all"– 可能な範囲（function arguments）で付ける。
Prettier: Tslint Integration
Use ‘prettier-tslint’ instead of ‘prettier’. Other settings will only be fallbacks in case they could not be inferred from tslint rules.
prettier の代わりに prettier-tslint を使うかどうか。他の設定は、tslint rules から推測できない場合にのみフォールバック。（これの挙動も把握できてない）
Prettier: Use Tabs
Indent lines with tabs
インデントにタブを使うかどうか。
増刊 actyway 
返信