お初にお目にかかります。スタイル・エッジLABOの┣（読み: てぃー or てー）と申します。
今年からこちらにお世話になり、やっとのことDockerやLaravel等に慣れてきて、ただいまこうなっております↓
ですが今回はそれらではなく、つい最近知ったブラウザテストツール「Playwright」について書き留めます。
こんにちは。スタイル・エッジLABOのNです。
さて早速ですが、弊社では希望者にはPhpStormのライセンスを会社負担で支給していただけます。
私はスタイル・エッジLABOへはつい最近転職してきたばかりなのですが、以前いた会社ではそういった制度はなかったものですから、PhpStormを利用しようと思うとで個人利用で初年度は1万円少々かかります。２年後以降も安くはなっていくもののランニングでコストがかかるとなると庶民にはなかなか手が出づらいものでした。
ですが会社のお金で使えるならこれ幸いと私も遅ればせながらPhpStormデビューを果たしてみましたので使ってみたプラグインを5つ紹介させていただこうと思います。
続きを読む
LABOでインターンを始めてはや2か月、ずっと思ってることがありました。
それは「Visual Studio Codeをもっとかわいくさせたい、、！」ということ。
みなさまの中にもこんな考えを持った人いらっしゃるのではないでしょうか。
見た目がかわいくないとテンションが上がらない
見た目から入るタイプだ
「カワイイはつくれる」
今回はそんなかわいい信者のエンジニアのために、Visual Studio Codeをかわいくカスタマイズさせる方法についてご紹介します！
Visual Studio Codeにはたくさんの配色テーマがあり、その中にもかわいいものはたくさんありますが、わたしは配色テーマをさらにカスタマイズして自分好みのものに変えていきます。
かっこいいけど、もっとかわいさもほしい・・！ということで、まずはかわいい配色テーマを探していきます。
まず左下の歯車マークから配色テーマを選択します。
その他の色のテーマをインストールを選択すると、Marketplaceが表示されるので、その中から自分好みの配色テーマをインストールします。（かなりたくさんあるので、選ぶのも楽しいです！）
わたしは今回"Electron Color Theme"にしました！
カラフルでかわいくなりましたが、タブや文字、カーソルの色などをもう少し変えたいので、ユーザー設定（settings.jsonファイル）から配色テーマを直接編集していきます。
ファイル > 基本設定 >設定 と進みます。
ワークベンチの中に、settings.jsonで編集があります。
それを選択すると、編集画面が表示されるので、直接編集します！
{ "workbench.colorCustomizations"{ "設定項目":"値" } }
このように、カラーの設定を変更したい場合は、"workbench.colorCustomizations"の中に書き込みます。（配色以外にも様々な設定を編集することができます）
カラーを設定できる要素の一覧は、リンク先から見ることができます。
Theme Color | Visual Studio Code Extension API
{ "workbench.colorCustomizations": { "editorCursor.foreground": "#eaf4fc" //エディタカーソルの前景色 "tab.activeBackground": "#88b5d3" //アクティブなタブの背景色 "tab.activeBorder": "#88b5d3" //アクティブなタブの下罫線 "activityBar.background": "#8384f5" //アクティビティバーの背景色 "statusBar.noFolderBackground": "#ffadff" //フォルダーが開かれていないときのステータスバーの背景色 "statusBar.background": "#ffadff" //標準ステータスバーの背景色 "statusBar.noFolderForeground": "#ffffff" //フォルダーが開かれていないときのステータスバーの前景色 "statusBar.foreground": "#ffffff" //標準ステータスバーの前景色 } "editor.tokenColorCustomizations": { //配色テーマの文字カラー設定 "[Electron]": { "comments": "#626063" //コメント "strings": "#fdeff2" //文字列 "functions": "#99ccff" //関数 "variables": "#ffadd6" //変数 } }
設定を変更した後は以下のような見た目になりました。パステルカラーがかわいいです！！
エディタがかわいいとコーディングも捗りそうです！ぜひお試しください。
スタイル・エッジLABOでは、一緒に働く仲間を募集しています。 もし興味を持っていただけましたら、ぜひ採用サイトものぞいてみてください！
私はスタイル・エッジLABOでインターンをしております大学4年生です！
初めての記事作成で緊張していますが、どうか最後までお付き合いくださいorz
私はスタイル・エッジLABOでのインターンが開始して一カ月、
Udemyというオンライン講座を受講しながらHTML５とCSS3の勉強をしていました！
全くのプログラミング初心者の私は、
「プログラミングってなんか黒い画面にカラフルな英語が表示されるカッコいいやつ」
というイメージしかもっていなかったため、黒くてカッコいいやつを操作できるのを楽しみにしていました！
しかし...
動画で講師の方がプログラミングのツールとして紹介されたのは「メモ帳」ではないですか！
動揺を隠しきれない私...
ただ、続いて講師の方がおっしゃったのは、「メモ帳でもコードをかけますが、無料のエディタも豊富ですからどうせならエディタを使って書いてみるといいでしょう」とのこと....
エディタとは何！？というレベルだったのですが、先輩社員におススメのエディタを聞いて取り敢えず「エディタ」なるものをダウンロードしました。
エディタのダウンロードが完了し、さっそくエディタを開いた私が思ったことは、「あの黒くてカッコいいやつだ！」です。
勉強に取り掛かるのにはモチベーションが大事ですが、なんかカッコいいやつで勉強できるというだけで開始早々私のテンションは急上昇！
そんな感じで私のプログラミングの勉強が始まりました!
※私がダウンロードしたエディタは” Visual Studio Code ”です。
※私はMicrosoftの回し者ではございません。
ブログを書くのが初めてなもので、前置きが長くなりすみません....
それでは本題に入っていこうと思います！
私が勉強する中で感じたことは、エディタに拡張機能を追加していくとコードを書くのが非常に楽になるということです。 実際に勉強する際に使用したのは3種類の拡張機能ですが、せっかく拡張機能の尊さに味を占めたので、ブログを書くにあたっていくつか拡張機能を試してみました！
ということで今回は [VSCodeの拡張機能をまとめちゃおう！] というテーマで書いていこうと思います！
まずは、私が勉強中に使用していたエディタのご紹介です！
１、Japanese Language Pack for Visual Studio Code
よほど英語に自信があるぜ！という方以外は入れたほうが無難でしょう。
今回ご紹介する拡張機能の中でも、最もダウンロード数が多かったです。
２、htmltagwrap
→該当のコードをドラッグして" Alt＋W "を入力するだけで自動でPタグで囲まれる拡張機能です！
Pタグが表示されたのちにそのまま任意のタグを入力すると即書き換え可能ですのでタグを入力する
手間を省くのにはぜひとも入れておきたいですね！
３、テキスト校正くん
→なんともかわいらしいネーミングの拡張機能ですね。
読んで字のごとく、入力した文章を構成してくれる拡張機能です！
htmlでは文章をたくさん書くと思いますが、長文を入力していると文章の見直しも大変ですよね....
テキスト校正くんを入れておけば、波線の個所を治すだけでよいので非常に見直しが楽になります！！
HTMLとCSSの勉強をする中で拡張機能のすばらしさを知った私は、勉強が一通り落ち着いてから追加でいくつかの拡張機能を試してみました！
１、indent-rainbow
→この拡張機能を入れるとエディタを見ていて楽しくなりますね！
タグが多くなってくると、どのタグとどのタグがセットなのかわかりづらい...なんてこともあるかと
思います。ただ、indent-rainbowがあれば視覚的に色でセットの括りがわかるのでそんなストレスとも
おさらばできますね！
２、Bracket Pair Colorizer 2
→{ } , ( ) , [ ] ,< > などあらゆる種類の括弧のペアを色ごとに分けて表示してくれます！
初心者のミスとしてペアが組めていないということが多かったので非常に重宝します！
前置きと本題のバランスが悪くなってしまいましたが、最後までお付き合いくださり有難うございました！
超駆け出しシステムエンジニアの呟きとして読んでいただけたなら嬉しいです！
次にブログを書く際には成長を感じられるように、駆け出しシステムエンジニアとして頑張っていこうと思います！
☆スタイル・エッジLABOでは、一緒に働く仲間を募集しています☆
もし興味を持っていただけましたら、ぜひ採用サイト↓も覗いてみてください！
