😃

VsCodeのフォーマッター設定

2023/02/27に公開

前提

  • デフォルトのフォーマッターをしていない
  • 各言語毎に設定を指定する

prettier

拡張機能をインストール

  • esbenp.prettier-vscode

settings.json

フォーマットのタイミングの設定方法

  • 保存時
  • 入力中
  • ペースト
    "[java]": {
        "editor.formatOnSave": true,
        "editor.formatOnType": true,
        "editor.formatOnPaste": true
    },
    "[python]": {
        "editor.formatOnType": true,
        "editor.formatOnPaste": true,
        "editor.formatOnSave": true
    },
	"[javascript]": {
        "editor.formatOnType": true,
        "editor.formatOnPaste": true,
        "editor.formatOnSave": true
    },
    "[typescript]": {
	"editor.formatOnType": true,
        "editor.formatOnPaste": true,
        "editor.formatOnSave": true
    },
	"[typescriptreact]": {
        "editor.formatOnType": true,
        "editor.formatOnPaste": true,
        "editor.formatOnSave": true
    },

Java

Ctrl + Shift + pでコマンドパレットを開く

Java: Open Java formatter settings

eclipse-formatter.xmlが生成される。

settings.json

    "[java]": {
        "java.format.settings.url": "eclipse-formatter.xml"
    },

Python

blackを設定

  • ms-python.black-formatter

settings.json

    "[python]": {
        "editor.defaultFormatter": "ms-python.black-formatter",
    },
    "black-formatter.args": [
        "--line-length=120"
    ]

Javascript

settings.json

    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
    },
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
    },

後は各プロジェクト毎の設定ファイルを利用される。
出力 > Prettierにて下記のログが出力されていた。

Using config file at xxx
Using ignore file xxx

Graphql

settings.json

    "[graphql]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnType": true,
        "editor.formatOnPaste": true,
        "editor.formatOnSave": true
    },

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
サポートされている言語

javascript
javascriptreact
typescript
typescriptreact
json
graphql
handlebars

Discussion