td;dr
VSCode で Prettier の設定を行い、 import 文を自動改行する。
概要
ESLint/TSLint によって1行のコードの長さを制限することができます。
- ESLint: max-len
- TSLin: max-line-length
import 文もこの対象になりますが、auto fix が効かないので手動で修正することになり、やや面倒です。
これを自動修正するには、 Prettier を使います。
VSCode の自動フォーマット設定
⌘+,
で設定画面を開き、prettier の自動フォーマットが効くようにします。
自分はファイル保存時にフォーマットしてほしいので、 editor.formatOnSave
を有効にしました。
他には、ペースト時にフォーマット(editor.formatOnPaste
)、タイピングごとにフォーマット(editor.formatOnType
)もありますのでお好みで。
ちなみに、ESLint/TSLint を利用している場合は、以下の記事も参照ください。
VSCodeにおける自動フォーマットで整形が崩れる問題への対処法 - qiita.com
VSCode Prettier パッケージ
prettier-vscode をインストールします。
Prettier の改行行数を設定
プロジェクトルートに .prettierrc.json
ファイルを作成し、 printWidth
設定を追加します。
{ "printWidth": 140 }
これで、140字を超える行数に関しては、改行が挿入されるようになります。
ちなみに、.prettierrc
や prettierrc.js
ではなく .prettierrc.json
を使った理由については以下も参照ください。
VSCode で Prettier の設定が無視されて効かない問題 - chuckwebtips.hatenablog.com