VSCodeで自動整形ツールのprettierで自動フォーマットされるようにする

去年ぐらいからJavaScriptはprettierを使って自動フォーマットされるようにしましょうというのが当たり前になってきたので、その設定の仕方。

というかPrettier - Code formaterという拡張をインストールして完了。

Command(Winはctrl) + p で

ext install prettier-vscode

でインストール。これでVSCodeのフォーマットが自動的にprettierのものになる。便利。完了。

なお、保存時に自動的にフォーマットがかかるようにするには、基本設定 > 設定で、

  // JavaScriptでのみ保存時フォーマットを有効化
  "[javascript]": {
    "editor.formatOnSave": true
  },
  // prettierのシングルクオーテーションオプションをon
  "prettier.singleQuote" : true

を末尾に追加しておけばOK。ここではシングルクオーテーションオプションもオンにしてあるけども、他にも設定で色々変えられるけども、デフォルトが無難。

なお、過去のjsファイル全部フォーマットし直したいときなどは、

npm install prettier --save-dev
find . -name \*.js | grep -v node_modules/ | grep -v public/ | xargs node_modules/.bin/prettier --write --single-quote=true

こんな感じのコマンドを実行しておけばOKだと思われる。除外するのは node_modules と public フォルダを除外したけどもご随意に。