😃
VsCodeのフォーマッター設定
前提
- デフォルトのフォーマッターをしていない
- 各言語毎に設定を指定する
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
},
サポートされている言語
javascript
javascriptreact
typescript
typescriptreact
json
graphql
handlebars
Discussion