Zenn
Closed15

おすすめのVSCodeプラグイン・拡張機能[Railsと汎用]

VS Code
VS Code 拡張機能
rdhdrdhd

ERB Formatter/Beautify

erbファイルのコードフォーマッターです。

gemをインストールする

gem install htmlbeautifier

settings.jsonを編集する

"[erb]": {
  "editor.defaultFormatter": "aliariff.vscode-erb-beautify",
  "editor.formatOnSave": true
},
"files.associations": {
  "*.html.erb": "erb"
}

Name: ERB Formatter/Beautify
Id: aliariff.vscode-erb-beautify
Description: Format/Beautify ERB files
Version: 0.4.0
Publisher: Ali Ariff
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=aliariff.vscode-erb-beautify

rdhdrdhd

erbファイルにもhtmlタグのemmetを効かせる

setting.jsonに入れればオッケーです。拡張機能ではないです。

    "emmet.includeLanguages": {
        "ruby": "html",
        "erb": "html"
    },
rdhdrdhd

Prettier - Code formatter

保存と同時にコードを整えてくれるコードフォーマッターのプラグインです。
先に紹介したerb-formatterはerbファイル専用ですが、こちらのは汎用となります。

Name: Prettier - Code formatter
Id: esbenp.prettier-vscode
Description: Code formatter using prettier
Version: 9.13.0
Publisher: Prettier
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

rdhdrdhd

ターミナルの色をカスタマイズする

cmd ,でsettingsを開きます。
検索フォームにworkbench: color customizationsを入れて検索します。
Edit in settings.jsonでターミナルの色をカスタマイズします。

"workbench.colorCustomizations": {
"terminal.background":"#151515",
"terminal.foreground":"#D0D0D0",
"terminalCursor.background":"#D0D0D0",
"terminalCursor.foreground":"#D0D0D0",
"terminal.ansiBlack":"#151515",
"terminal.ansiBlue":"#6A9FB5",
"terminal.ansiBrightBlack":"#505050",
"terminal.ansiBrightBlue":"#6A9FB5",
"terminal.ansiBrightCyan":"#75B5AA",
"terminal.ansiBrightGreen":"#90A959",
"terminal.ansiBrightMagenta":"#AA759F",
"terminal.ansiBrightRed":"#AC4142",
"terminal.ansiBrightWhite":"#F5F5F5",
"terminal.ansiBrightYellow":"#F4BF75",
"terminal.ansiCyan":"#75B5AA",
"terminal.ansiGreen":"#90A959",
"terminal.ansiMagenta":"#AA759F",
"terminal.ansiRed":"#AC4142",
"terminal.ansiWhite":"#D0D0D0",
"terminal.ansiYellow":"#F4BF75"
}

色のプリセットを提供しているサイト：

https://glitchbone.github.io/vscode-base16-term/#/3024

ドキュメント：

https://code.visualstudio.com/docs/terminal/appearance

このスクラップは1ヶ月前にクローズされました