VScodeの設定（settings.json）まとめ【2023年4月更新】はじめに VScodeを愛用していくうちに設定ファイル（settings.json）がだいぶ煩雑になってきたので、それらを見直しがてらZennに記事としてまとめてみました。 主にwebサイト制作者向けの内容になっております。 どなたかの参考になれば幸いです！ settings.jsonのコードの中身だけを見たい方はこちらへどうぞ！
Visual Studio Codeを使うなら絶対に入れておきたい拡張機能Top20【2022最新版】 - Qiita
この記事は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
あたしのVSCodeがこんなに可愛いわけがない。
あたしのVSCode全然かわいくな〜〜〜〜い！！！！😡 全然可愛くないじゃな〜〜〜い！！こんなんじゃ仕事もやる気にならないわよもう！！ こんなのあたしは認めないんだから！というわけで、いまからこの子をかわいく大変身させていくわよ❤ あ、今回は可読性なんていう野暮なものはお花畑に置いてきたわ。うふふ。 めっかわなTheme❤️（Dracula） というわけでVSCode大変身計画がはじまったわね。 まずあたしが目につけたのは、ずばりTheme(配色テーマ) よ！これ無しじゃかわいいは語れないわ。 とりあえずこれを見てみなさい。 どう？？ これだけで雰囲気がかなり変わったんじゃないかしら。 今回あたしが使用させていただいたのはDraculaというテーマよ！ さっき見せたのはそのなかのDracula Soft というものを適用した画面ね。落ち着いた雰囲気のなかにもかわいさのヴェールをまとってい
【VSCode】よけいなものを消し去ってコードに集中しよう【ミニマリスト】 – Kurusugawa
【VSCode】よけいなものを消し去ってコードに集中しよう【ミニマリスト】投稿者: SHOUJI Kazuo 投稿日: 2021-05-122021-05-12 今回は、社内の技術者が提供してくれた 便利ネタを共有します。 VSCode は使いやすいエディタですが、無駄な領域が多くてエディタの領域が狭いと感じます。 今回は VSCode をカスタマイズして、エディタの領域をより広く確保してみましょう。 以下の画像を見比べてみてください。 上がデフォルトの状態です。下は今回の記事を適用した状態です。（記事と関係ない拡張機能が入っていますが） ウィンドウサイズはどちらも同じです。 UI がスッキリして、エディタに表示されているコード量が増えていることがわかりますか？ では、カスタマイズのポイントをひとつずつ紹介していきます。 アクティビティバーを消し去る 画面左のアイコンが縦に並んだ領域をアク
Top 10 VS Code extensions for 2021 - LogRocket Blog
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’
VSCodeの秘伝のワザを大公開！ | DevelopersIO
こんにちは！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 +
Visual Studioでペアプロ環境を実現する「Live Share」が、テキストチャットとボイスチャット機能を統合へ
マイクロソフトは、Viual Studioファミリーでリモートでもペアプログラミング環境を実現する「Live Share」の新機能として、テキストチャットとボイスチャットをプレビュー公開することを明らかにしました。 Live ShareはVisual StudioやVisual Studio CodeなどのVisual Studioファミリー製品間をネットワークで接続し、ペアプログラミング環境を実現する機能です。インターネット経由でも機能するため、物理的に離れた場所であってもリモートでペアプログラミングを行うことができます。 今回発表されたのは、このLive Shareにテキストチャットとボイスチャットを統合する、というものです。現在のLive Shareは1つのソースコードを2人で同時に編集することはできても、プログラマ同士の会話は別に電話やチャットツールなどを用いなければ行えませんでし
VS Code ネタ詰め合わせ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 👻 ぷぇ 🍾🍾🍾 メリークリスマス！！！ 🎉🎉🎉 今年も残り僅かですが、皆様の今年の進捗はどうだったでしょうか？ 進捗ダメでしたか？ 私はと言うと今年も幸い GitHub で evergreen を達成できそうです。( 業務でこの GitHub アカウントは使用していないので、個人での Contributions のみです。 ) Visual Studio Code Advent Calendar 2019 の最後の記事ともなりますし、普段、特に Qiita ではあんまり記事を書かないのもあるので、 VS Code に関す
マルチカーソルで、VSCodeのスニペットをもっと便利に。 - Qiita
ある日の弊社 社長「お〜い、やめ太郎」 ワイ「なんでっか、社長？」 社長「今度作るショッピングサイトの件なんやけど」 社長「ドラッグ＆ドロップ機能を実装することになったから」 社長「それをやめ太郎にお願いしたいんや」 社長「やめ太郎、やったことあるか？」 ワイ「どどどドラッグ！？」 ワイ「あるわけないやないですか・・・！」 ワイ「そんなもの販売して万が一・・・」 ハスケル子「やめ太郎さん、違いますよ」 ハスケル子「ドラッグ＆ドロップでしょ」 ハスケル子「マウスで掴んで移動させるやつです」 ワイ「ああ、そっちか」 社長「やめ太郎、できるか？」 ワイ「もちろんですわ」 ワイ「前職でもドラッグやってましたから、余裕ですわ」 社長「よ、よろしく頼むわ」 レッツJavaScript ワイ「確かドラッグ＆ドロップを実装するときは」 ワイ「マウスを動かしたときにマウスポインタの座標を取得できるようにして
かなり便利！VS CodeでCSSを書きながらFlexboxのチートシートを利用できる -CSS Flexbox Cheatsheet
Visual Studio CodeでCSSを書きながら、CSS Flexboxのチートシートを利用できる機能拡張を紹介します。 justify-contentやalign-itemsはどう使うんだっけ？ justify-contentの値は？ など、Flexboxの各プロパティや値がどのように配置されるか、一目で分かります。 CSSを書きながらFlexboxのチートシートをVS Codeに表示中 CSS Flexboxのチートシートは、当ブログで翻訳したチートシートなどを参考にしているとのことで、Flexboxの各プロパティや値の挙動が簡単に分かります。 参考: CSS Flexbox の基礎知識と使い方を詳しく解説 機能拡張のダウンロードは、下記ページから。
VSCodeとDockerで簡単に開発環境を構築＆共有する方法 -
もじゃ（@s10akir）です。paizaラーニングでプログラミング学習動画制作のアルバイトをしている専門学生です。 以前こんな記事を書かせていただきました。 paiza.hatenablog.com 今回は、VSCodeとDockerを使って簡単に開発環境を構築する方法について書いてみたいと思います。 code.visualstudio.com ちなみに前回はプレビューリリースされた「Remote Development with VSCode」と「PaizaCloud」を使って、面倒な環境構築なしで快適に開発しようぜという記事だったのですが、しばらくして「Remote Development with VSCode」が正式版のVSCodeでも使えるようになりましたね！わざわざInsider版のVSCodeを入れなくてもよくなりましたね。 前提の環境について この記事の内容が試せるのは
VS Codeを使いこなせ! フロントエンジニア必須の拡張機能7選 - ICS MEDIA
「Visual Studio Code（略称：VS Code）」はMicrosoftが提供している無償で高機能なエディターです。標準でも十分な機能は備わっていますが、拡張機能をインストールすることで、より使いやすく自分にあったエディターへとカスタマイズできます。 本記事では、HTMLコーダーやフロントエンドエンジニアに役立つ拡張機能を紹介します。 1. IntelliCode IntelliCodeはMicrosoft謹製の公式プラグイン。AI支援による次世代のコード補完がJavaScriptやTypeScriptで利用できるようになります。APIの一覧がアルファベット順に提示されるのではなく、利用する可能性の高いAPIがAIによって予測されます。 コード補完の様子を次のスクリーションショットでご覧ください。入力候補の「★」マークが付いているところが、補完候補になっているところです。人工知
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. Whole line suggestions Scenario 1: When grey-text is shown, press Tab to accept the prediction (suggestion)
【VSCode Remote】10秒でNuxt環境を構築【脱WebStorm】 - Qiita
先日、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
君には1時間でGitについて知ってもらう(with VSCode) - Qiita
おことわり この記事はプログラミング＆業務未経験の新入社員に、Gitについて1時間程度で説明した内容をもとに作ったものです。自分がもし誰かにGitについて教えて貰える立場にいたら、最初にこれを教えて貰いたかったという気持ちで作りました。 とりあえず「1人のプロジェクト」で「1時間で」Gitをそこそこ知って使えるようになることを目的としています。実際のチーム開発ができる水準までこの記事だけで達することはできませんが、今後Gitを使う必要がある人にとって学習の足がかりになれば幸いです。 それと、新入社員に教えるという都合上、表現がやや正確でなくざっくりしたところがあるかもしれませんが、質の悪い誤解を招くようなものでなければご容赦下さい。 全体像 まずはGitとは何かをざっくり分かって貰った後で、VSCode上での操作を行って頂きます。 Windowsでの説明を行いますが、Macの方は適宜読み替
これは期待！Visual Studio Codeでページやアプリなど、フロントエンドの実装が楽になる機能拡張 -Gimli
Visual Studio Codeが、Webページやアプリのフロントエンド開発用ビジュアルツールになる機能拡張「Gimli」がリリース予定なので紹介します。 CSS GridやFlexboxの実装が単純化されるビジュアルツールで、React、VueJS、Angularなど、さまざまなフレームワークやライブラリもサポートされています。 Gimli Gimliはフロントエンド開発者を対象にしたVisual Studio Codeの機能拡張です。多くのビジュアルツールがリリースされており、それらは「コード無し」を売りにしていますが、Gimliは「コード有り」を特徴にしています。 Visual Studioのコード開発環境とビジュアルツールの融合です。 Gimliのデモ Gimliは複雑なレイアウトを作成するプロセスを非常に単純化するビジュアルツールが用意されています。もちろん、CSS Grid
VSCodeのオススメ拡張機能 24選 (とTipsを少し)
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 で設定をアップロ
VSCodeでのGitの基本操作まとめ - Qiita
はじめに 一年前に新人研修でGitを担当してTigの記事を書いたのですが，今年も同じくGitの研修を担当することになりました．新人さんたちにとってはターミナル環境はとっつきにくい人も多いようで，短い研修期間では操作自体に苦戦してしまい，Gitそのものを理解するというところに力を割けない人も少なくありませんでした． それを踏まえて今回はGUIで操作しやすい環境を検討したのですが，以下のポイントを踏まえてVSCodeを使うことに決めました． マルチプラットフォームで使える．（研修はWindows環境で行いますが，業務ではLinuxデスクトップ環境も使うので） Gitの基本的な内容はVSCode上でGUI操作が可能． Gitの内容とあわせて，プログラミング用のテキストエディタの一例として，導入しやすそうなVSCodeを紹介． VSCodeを使ったGitの基本的な操作を一通りまとめていきます． イ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
3日間限定「Visual Studio Code完全入門」が全文無料公開されています！ Web制作とプログラミングに特化された解説書
意外と知らないVSCode上でGoを爆速開発するためのTips5選 - Qiita
