VSCode統合ターミナル用Railscastsカラースキーム

Donniさんによる投稿

2022年7月1日掲載

開発でRailscastsカラースキームを使っている人はまだいますか？僕は10年以上使い続けていることもあって、そのなめらかなアースカラーが好きなんです。始めはSublime Textで使い始めたんですが、iTerm2に移行する時も一貫性を持たせるために採用しました。Sublime Text 2からVSCodeに移行した時、このカラースキームが存在していて嬉しかったです。ただ、統合ターミナルのデフォルトのカラースキームにはあまり満足していませんでした。あまり使わないにしてもね。

今日、VSCodeの統合ターミナル用にカラーカスタマイズを作成しました。このgistで見つけることができます：https://gist.github.com/donni106/04a9a3cff5f41c45db52785425732482

以下のスクリプトは使いやすくて良かったです：https://gist.github.com/2xAA/bd01638dc9ca46c590fda06c4ef0cc5a

const col = [] // .itermcolorsファイルをパーサーにかけてjsonを得て、配列をその出力で置き換える

function componentToHex(c) {
  const hex = c.toString(16)
  return hex.length === 1 ? `0${hex}` : hex
}

const mapping = {
  'terminal.background':'Background Color',
  'terminal.foreground':'Foreground Color',
  'terminalCursor.background':'Cursor Text Color',
  'terminalCursor.foreground':'Cursor Color',
  'terminal.ansiBlack':'Ansi 0 Color',
  'terminal.ansiBlue':'Ansi 4 Color',
  'terminal.ansiBrightBlack':'Ansi 8 Color',
  'terminal.ansiBrightBlue':'Ansi 12 Color',
  'terminal.ansiBrightCyan':'Ansi 14 Color',
  'terminal.ansiBrightGreen':'Ansi 10 Color',
  'terminal.ansiBrightMagenta':'Ansi 13 Color',
  'terminal.ansiBrightRed':'Ansi 9 Color',
  'terminal.ansiBrightWhite':'Ansi 15 Color',
  'terminal.ansiBrightYellow':'Ansi 11 Color',
  'terminal.ansiCyan':'Ansi 6 Color',
  'terminal.ansiGreen':'Ansi 2 Color',
  'terminal.ansiMagenta':'Ansi 5 Color',
  'terminal.ansiRed':'Ansi 1 Color',
  'terminal.ansiWhite':'Ansi 7 Color',
  'terminal.ansiYellow':'Ansi 3 Color'
}

console.log(JSON.stringify(Object.keys(mapping).reduce((obj, vsCodeKey) => {
  const itermKey = mapping[vsCodeKey]
  const red = componentToHex(Math.round(col[0][itermKey]['Red Component'] * 255))
  const green = componentToHex(Math.round(col[0][itermKey]['Green Component'] * 255))
  const blue = componentToHex(Math.round(col[0][itermKey]['Blue Component'] * 255))

  obj[vsCodeKey] = `#${red}${green}${blue}`
  return obj
}, {}), null, 2))

スクリプトを実行する前に、itermcolorsファイルをJSONに変換しなければなりませんでした。これはhttps://json2plist.sinaapp.com（Plist -> JSON）のツールを使えば可能でした。

得られた結果は、VSCodeの設定のworkbench.colorCustomizationsキーの下にコピーする必要があります。

今では同じ輝きで光っています⭐

こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/donni106/railscasts-color-scheme-for-vscode-integrated-terminal-1nhm

VSCode統合ターミナル用Railscastsカラースキーム

タグ

最新の記事