コンパイラかく語りき

import { Fun } from 'programming'

【JavaScript, VSCode, Prettier】import 文を自動改行

td;dr

VSCode で Prettier の設定を行い、 import 文を自動改行する。

f:id:chuck0523:20190821220030g:plain

概要

ESLint/TSLint によって1行のコードの長さを制限することができます。

import 文もこの対象になりますが、auto fix が効かないので手動で修正することになり、やや面倒です。

これを自動修正するには、 Prettier を使います。

VSCode の自動フォーマット設定

⌘+, で設定画面を開き、prettier の自動フォーマットが効くようにします。

自分はファイル保存時にフォーマットしてほしいので、 editor.formatOnSave を有効にしました。

f:id:chuck0523:20190821213142p:plain

他には、ペースト時にフォーマット(editor.formatOnPaste)、タイピングごとにフォーマット(editor.formatOnType)もありますのでお好みで。

ちなみに、ESLint/TSLint を利用している場合は、以下の記事も参照ください。

VSCodeにおける自動フォーマットで整形が崩れる問題への対処法 - qiita.com

VSCode Prettier パッケージ

prettier-vscode をインストールします。

Prettier の改行行数を設定

プロジェクトルートに .prettierrc.json ファイルを作成し、 printWidth 設定を追加します。

{
  "printWidth": 140
}

これで、140字を超える行数に関しては、改行が挿入されるようになります。

ちなみに、.prettierrcprettierrc.js ではなく .prettierrc.json を使った理由については以下も参照ください。

VSCode で Prettier の設定が無視されて効かない問題 - chuckwebtips.hatenablog.com