導入

参考:

VSCode で完全自動フォーマットする話 | Takeaki

使い方

Shift + Alt + F / Shift + Option + F ファイルを自動整形する

参考:

整形のショートカットキーと保存時に自動整形する設定 | ONE NOTES

VSCode で自動整形するコマンド – Qiita

Visual Studio Code で整形機能を使う | らくがきちょう

保存時に自動整形する

設定ファイル settings.json で、editor.formatOnSave を有効に設定する。また、editor.defaultFormatter でデフォルトフォーマッターを設定する。デフォルトフォーマッターはファイルの種類別に設定することができる。

{ // ... "editor.formatOnSave": true, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[php]": { "editor.defaultFormatter": "persoderlind.vscode-phpcbf" } // ... }
Code language: JSON / JSON with Comments (json)

参考:

VSCode でコード整形ツールを使用する – Qiita

Visual Studio Code で保存時自動整形の設定方法 – Qiita

VS Code のフォーマッターで自動整形する (editor.formatOnSave) | まくろぐ

Visual Studio Code でいろんな言語を自動フォーマットする | K2SS

JavaScript を自動整形する

こちらのページを参照

参考:

ESLint & Prettier | sawao

VSCode でファイル保存時に Prettier と ESLint でフォーマットをかけても、1回でフォーマットしきらないときの対処法 | 樹脂が固まる前に

Vue.js

参考:

続・VSCode 上で Vue ファイルに対して ESLint と Prettier が快適に動作する設定 – Qiita

ESLint と Prettier という名前だけ知っているような Web フロント初学者が、Vue.js やろうとして最初の設定でハマったので、備忘録として一連の設定をまとめてみた | 株式会社プロトソリューション

XML を自動整形する

参考:

VSCode で XML を自動整形する | FROM ME TO YOU

XML ファイルの整形 | Ticketnote

Python を自動整形する

こちらのページを参照

参考:

Python のコードを快適に書くための設定をまとめてみる | K2SS

VSCode の formatOnSave で autopep8 を使って整形する | tech weblog

Formatting | Python in Visual Studio Code

Format Document not working (autopep8, python, vscode) · Issue #6495 · microsoft/vscode-python – GitHub

autopep8 formatter – Stack Overflow

Ruby を自動整形する

こちらのページを参照

参考:

VSCode で Ruby を書く準備 – Qiita

VScode で ruby-rubocop が動かなくなったら executePath を設定してみよう – Qiita

VScode で Ruby の自動整形を使いたいが 「フォーマッタがインストールされていません」と出てしまう – スタック・オーバーフロー

how to auto correct on save? (vscode-ruby + rubocop) – Stack Overflow

rubocop on VScode not working.Error “rubocop is not executable” – Stack Overflow

Prettier

こちらのページを参照

入手:

Prettier – Code Formatter | Visual Studio Marketplace [Official]

参考:

VSCode の拡張機能 Prettier でソースコードを整形する | bnote

TypeScript コードを Prettier で自動整形する | まくろぐ

Visual Studio Code で Prettier を使用してコードをフォーマットする方法 | DigitalOcean

Beautify

動画:

Running Beautify in Visual Studio Code

入手:

Beautify | Visual Studio Marketplace [Official]

参考:

Beautify 拡張機能を使ってコードを自動フォーマット | SMART

コード整形で困った改行位置/Prettier から Beautify に変更したお話 | suzunonlog

VSCode でインデントを整える Beautify って知ってますか! | エンジニアブログ

Ruby

入手:

Ruby | Visual Studio Marketplace [Official]

リポジトリ:

rubyide/vscode-ruby: Provides Ruby language and debugging support for Visual Studio Code – GitHub

ruby-rubocop

入手:

ruby-rubocop | Visual Studio Marketplace [Official]

リポジトリ:

misogi/vscode-ruby-rubocop: Rubocop extension for Visual Studio Code – GitHub

rufo

入手:

rufo – Ruby Formatter | Visual Studio Marketplace [Official]

リポジトリ:

ruby-formatter/rufo: The Ruby Formatter – GitHub

参考:

Double quotes ? · Issue #103 · ruby-formatter/rufo – GitHub

vscode-endwise

入手:

endwise | Visual Studio Marketplace [Official]

リポジトリ:

kaiwood/vscode-endwise: Wisely add “end” in Ruby – GitHub

XML

XML Language Support by Red Hat

動画:

XML VS Code Extension Demo

入手:

XML | Visual Studio Marketplace [Official]

リポジトリ:

redhat-developer/vscode-xml: Editing XML in Visual Studio Code made easy – GitHub

XML Tools

  • Formatting
  • Tree View
  • XPath
  • XQuery

入手:

XML Tools | Visual Studio Marketplace [Official]

リポジトリ:

DotJoshJohnson/vscode-xml: XML Tools for Visual Studio Code – GitHub

参考:

Visual Studio Code で整形機能を使う | らくがきちょう

記事をシェアする:
タグ:

コメントを残す

メールアドレスが公開されることはありません。

Protected by reCAPTCHA