はじめに VScodeを愛用していくうちに設定ファイル（settings.json）がだいぶ煩雑になってきたので、それらを見直しがてらZennに記事としてまとめてみました。 主にwebサイト制作者向けの内容になっております。 どなたかの参考になれば幸いです！ settings.jsonのコードの中身だけを見たい方はこちらへどうぞ！

この記事はNuco Advent Calendar 2022の14日目の記事です。 VSCodeに必須の機能20個を紹介していきます。 インストール数と星の数は記事作成時点(2022年11月時点)のものです。 Japanese Language Pack for Visual Studio Code vscode-icons Code Spell Checker zenkaku Path Autocomplete Prettier - Code formatter indent-rainbow GitLens Git History HTML CSS Support Output Colorizer TODO Highlight vscode-random Atom One Dark Theme Trailing Spaces REST Client Live Server Jupyter

当ブログでも好評だった「Visual Studio Code完全入門」が重版出来🎉を記念して、3日間限定（5/19-5/21）で全文無料公開されているので、紹介します。 「Visual Studio Code完全入門」は、Web制作とプログラミングに特化されたVSCodeの解説書です。実際のワークフローを元に、VSCodeの基本的な機能から効率をアップさせる使い方を学べます。

あたしのVSCode全然かわいくな〜〜〜〜い！！！！😡 全然可愛くないじゃな〜〜〜い！！こんなんじゃ仕事もやる気にならないわよもう！！ こんなのあたしは認めないんだから！というわけで、いまからこの子をかわいく大変身させていくわよ❤ あ、今回は可読性なんていう野暮なものはお花畑に置いてきたわ。うふふ。 めっかわなTheme❤️（Dracula） というわけでVSCode大変身計画がはじまったわね。 まずあたしが目につけたのは、ずばりTheme(配色テーマ) よ！これ無しじゃかわいいは語れないわ。 とりあえずこれを見てみなさい。 どう？？ これだけで雰囲気がかなり変わったんじゃないかしら。 今回あたしが使用させていただいたのはDraculaというテーマよ！ さっき見せたのはそのなかのDracula Soft というものを適用した画面ね。落ち着いた雰囲気のなかにもかわいさのヴェールをまとってい

【VSCode】よけいなものを消し去ってコードに集中しよう【ミニマリスト】投稿者: SHOUJI Kazuo 投稿日: 2021-05-122021-05-12 今回は、社内の技術者が提供してくれた 便利ネタを共有します。 VSCode は使いやすいエディタですが、無駄な領域が多くてエディタの領域が狭いと感じます。 今回は VSCode をカスタマイズして、エディタの領域をより広く確保してみましょう。 以下の画像を見比べてみてください。 上がデフォルトの状態です。下は今回の記事を適用した状態です。（記事と関係ない拡張機能が入っていますが） ウィンドウサイズはどちらも同じです。 UI がスッキリして、エディタに表示されているコード量が増えていることがわかりますか？ では、カスタマイズのポイントをひとつずつ紹介していきます。 アクティビティバーを消し去る 画面左のアイコンが縦に並んだ領域をアク

Ashutosh Singh Ashutosh is a JavaScript developer and a technical writer. He writes about the fundamentals of JavaScript, Node.js, React, Next, Vue, and tutorials on building projects. Visual Studio Code is one of the most widely used code editors in the developer community. One of the reasons for VS Code’s popularity is its many extensions that speed up the development process. In this guide, we’

はじめに 最近イケイケなGo！ 今回はVSCodeでGoを爆速開発するためのTipsを5つ（+おまけ1つ）紹介したいと思います。 自分もつい最近これらを知って、めっちゃ活用して開発効率を上げています！ 良かったら参考にしてください。 （良いと思ったらLGTM頂けると嬉しいです😇） Fill Struct 空の構造体にフィールドをセットしてくれてとても便利です。 よく使ってます。 使い方 空の構造体にカーソルが当たった状態で、Command Palette(F1 or Ctrl + Shift + P)でGo: Fill structと入力。 例 package main type person struct { name string age int job string } func main() { p := person{} }

こんにちは！CX事業本部の片岡です。 エディタ戦争が終息して5年たった今、無血革命と呼ばれたVisual Studio Codeをご存知でしょうか？皆様ご愛用のことと存じます。 そんなVisual Studio Codeの便利なショートカットと拡張機能を紹介します！ よく使うショートカットの紹介 拡張機能「Sublime Text Keymap and Settings Importer」をインストール前提の話です。 https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings 編集時によく使うショートカット 文字選択 Command + D ：文字を選択（入力するたび選択中の文字を複数選択できます） Command + U ：文字選択のUndo（選択前に一つ戻ります） Command +

マイクロソフトは、Viual Studioファミリーでリモートでもペアプログラミング環境を実現する「Live Share」の新機能として、テキストチャットとボイスチャットをプレビュー公開することを明らかにしました。 Live ShareはVisual StudioやVisual Studio CodeなどのVisual Studioファミリー製品間をネットワークで接続し、ペアプログラミング環境を実現する機能です。インターネット経由でも機能するため、物理的に離れた場所であってもリモートでペアプログラミングを行うことができます。 今回発表されたのは、このLive Shareにテキストチャットとボイスチャットを統合する、というものです。現在のLive Shareは1つのソースコードを2人で同時に編集することはできても、プログラマ同士の会話は別に電話やチャットツールなどを用いなければ行えませんでし

👻 ぷぇ 🍾🍾🍾 メリークリスマス！！！ 🎉🎉🎉 今年も残り僅かですが、皆様の今年の進捗はどうだったでしょうか？　進捗ダメでしたか？ 私はと言うと今年も幸い GitHub で evergreen を達成できそうです。( 業務でこの GitHub アカウントは使用していないので、個人での Contributions のみです。 ) Visual Studio Code Advent Calendar 2019 の最後の記事ともなりますし、普段、特に Qiita ではあんまり記事を書かないのもあるので、 VS Code に関するいろいろなネタの詰め合わせをお送りします。 自分的に VS Code の二大拡張 ※ステマ注意 VS Code Tips 来年(2020年)の VS Code 余談: アイコン騒動、再び！！ 自分的に VS Code の二大拡張 ※ステマ注意 「もしも V

ある日の弊社 社長「お〜い、やめ太郎」 ワイ「なんでっか、社長？」 社長「今度作るショッピングサイトの件なんやけど」 社長「ドラッグ＆ドロップ機能を実装することになったから」 社長「それをやめ太郎にお願いしたいんや」 社長「やめ太郎、やったことあるか？」 ワイ「どどどドラッグ！？」 ワイ「あるわけないやないですか・・・！」 ワイ「そんなもの販売して万が一・・・」 ハスケル子「やめ太郎さん、違いますよ」 ハスケル子「ドラッグ＆ドロップでしょ」 ハスケル子「マウスで掴んで移動させるやつです」 ワイ「ああ、そっちか」 社長「やめ太郎、できるか？」 ワイ「もちろんですわ」 ワイ「前職でもドラッグやってましたから、余裕ですわ」 社長「よ、よろしく頼むわ」 レッツJavaScript ワイ「確かドラッグ＆ドロップを実装するときは」 ワイ「マウスを動かしたときにマウスポインタの座標を取得できるようにして

Visual Studio CodeでCSSを書きながら、CSS Flexboxのチートシートを利用できる機能拡張を紹介します。 justify-contentやalign-itemsはどう使うんだっけ？ justify-contentの値は？ など、Flexboxの各プロパティや値がどのように配置されるか、一目で分かります。 CSSを書きながらFlexboxのチートシートをVS Codeに表示中 CSS Flexboxのチートシートは、当ブログで翻訳したチートシートなどを参考にしているとのことで、Flexboxの各プロパティや値の挙動が簡単に分かります。 参考: CSS Flexbox の基礎知識と使い方を詳しく解説 機能拡張のダウンロードは、下記ページから。

もじゃ（@s10akir）です。paizaラーニングでプログラミング学習動画制作のアルバイトをしている専門学生です。 以前こんな記事を書かせていただきました。 paiza.hatenablog.com 今回は、VSCodeとDockerを使って簡単に開発環境を構築する方法について書いてみたいと思います。 code.visualstudio.com ちなみに前回はプレビューリリースされた「Remote Development with VSCode」と「PaizaCloud」を使って、面倒な環境構築なしで快適に開発しようぜという記事だったのですが、しばらくして「Remote Development with VSCode」が正式版のVSCodeでも使えるようになりましたね！わざわざInsider版のVSCodeを入れなくてもよくなりましたね。 前提の環境について この記事の内容が試せるのは

「Visual Studio Code（略称：VS Code）」はMicrosoftが提供している無償で高機能なエディターです。標準でも十分な機能は備わっていますが、拡張機能をインストールすることで、より使いやすく自分にあったエディターへとカスタマイズできます。 本記事では、HTMLコーダーやフロントエンドエンジニアに役立つ拡張機能を紹介します。 1. IntelliCode IntelliCodeはMicrosoft謹製の公式プラグイン。AI支援による次世代のコード補完がJavaScriptやTypeScriptで利用できるようになります。APIの一覧がアルファベット順に提示されるのではなく、利用する可能性の高いAPIがAIによって予測されます。 コード補完の様子を次のスクリーションショットでご覧ください。入力候補の「★」マークが付いているところが、補完候補になっているところです。人工知

Version 1.92 is now available! Read about the new features and fixes from July. IntelliCode for C# Dev Kit For users of the C# Dev Kit extension in Visual Studio Code, the IntelliCode for C# Dev Kit extension is available to provide IntelliCode support. Predictions of up to a whole-line of code, along with ranking methods and properties in the IntelliSense list are available for C# Dev Kit users.

先日、Visual Studio Code Remote Developmentが発表されました。これを使うと拡張機能や実行環境をリモートで完結きます。 NuxtでVSCode Remoteを使うメリット ローカル環境にNode.jsやyarnをインストールせずに開発でき、ローカル環境を一切汚さずに開発できる。 Node.jsのバージョン管理をしなくてよくなる。 拡張機能をリモート環境に事前にインストールできるため、一緒に開発する人の環境を統一できる。 ESLintやPrettierやデバッグ環境の設定を個々人で設定しなくていい。 パッケージをインストールするとき、OS依存パッケージを考慮しなくていい。 Dockerが使えるのでCI/CD環境と開発環境が統一でき、k8sやCloud Runにデプロイするときも楽。(AppEngineやCloud FunctionsもVSCode Remot

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? おことわり この記事はプログラミング＆業務未経験の新入社員に、Gitについて1時間程度で説明した内容をもとに作ったものです。自分がもし誰かにGitについて教えて貰える立場にいたら、最初にこれを教えて貰いたかったという気持ちで作りました。 とりあえず「1人のプロジェクト」で「1時間で」Gitをそこそこ知って使えるようになることを目的としています。実際のチーム開発ができる水準までこの記事だけで達することはできませんが、今後Gitを使う必要がある人にとって学習の足がかりになれば幸いです。 それと、新入社員に教えるという都合上、表現がやや正確で

Visual Studio Codeが、Webページやアプリのフロントエンド開発用ビジュアルツールになる機能拡張「Gimli」がリリース予定なので紹介します。 CSS GridやFlexboxの実装が単純化されるビジュアルツールで、React、VueJS、Angularなど、さまざまなフレームワークやライブラリもサポートされています。 Gimli Gimliはフロントエンド開発者を対象にしたVisual Studio Codeの機能拡張です。多くのビジュアルツールがリリースされており、それらは「コード無し」を売りにしていますが、Gimliは「コード有り」を特徴にしています。 Visual Studioのコード開発環境とビジュアルツールの融合です。 Gimliのデモ Gimliは複雑なレイアウトを作成するプロセスを非常に単純化するビジュアルツールが用意されています。もちろん、CSS Grid

1. vscode-icons アイコンがついて見やすくなる。 2. GitLens とにかく強い。 「コミット単位でのファイル比較」や「最新のコミット内容とそのコミッター表示」など色々してくれる。 git blameする手間なくなる。 3. Prettier コードのフォーマットは自動でやりましょう！ 複数人のこだわりをうんたらするよりも、Prettierに委ねるのが楽。 関連のTipsはここ 4. Git History Git logが見やすい 5. Bracket Pair Colorizer カッコの対応を色付きで表示してくれる。 ものすごく読みやすくなって最高&最高！！ なおBeta版ですが、後継となるBracket Pair Colorizer 2も出ています。 6. Settings Sync どこでも同じ設定で使いたい人には便利。 ⇧ + ⌥ + U/D で設定をアップロ

はじめに 一年前に新人研修でGitを担当してTigの記事を書いたのですが，今年も同じくGitの研修を担当することになりました．新人さんたちにとってはターミナル環境はとっつきにくい人も多いようで，短い研修期間では操作自体に苦戦してしまい，Gitそのものを理解するというところに力を割けない人も少なくありませんでした． それを踏まえて今回はGUIで操作しやすい環境を検討したのですが，以下のポイントを踏まえてVSCodeを使うことに決めました． マルチプラットフォームで使える．（研修はWindows環境で行いますが，業務ではLinuxデスクトップ環境も使うので） Gitの基本的な内容はVSCode上でGUI操作が可能． Gitの内容とあわせて，プログラミング用のテキストエディタの一例として，導入しやすそうなVSCodeを紹介． VSCodeを使ったGitの基本的な操作を一通りまとめていきます． イ