VSCodeのHTTPサーバーを起動するための拡張機能「Live Server」 - Qiita
Visual Studio CodeにはHTTPサーバーを起動するための「Live Server」という拡張機能がある 「Live Server」をインストールすると、Visual Studio Code内でWebサイトを作成した際に、HTMLやJavaScript、CSSなどの静的ファイルをローカルサーバーで表示することができる。 ファイルの変更を保存すると自動的にページが更新されるので便利。 「Live Server」のダウンロード方法 Visual Studio Codeを開く 「Extensions」アイコンをクリック 検索ボックスに「Live Server」と入力し、拡張機能を検索 「Live Server」をクリックしてインストールする ファイルを開き、右下の「Go Live」アイコンをクリックする 「Live Server」の使い方 ファイルを開き、右下の「Go Live」ア
2022年のVSCodeのPerl開発環境 - Mobile Factory Tech Blog
こんにちは、エンジニアの id:mp0liiu です。 自分が所属しているチームでは現在もPerl製のプロダクトを運用しており、VSCode で Perl のコードを書いたり触ったりする機会が多いです。 Perl は開発環境が貧弱で他の言語と比べるとあまり開発体験はよくありませんが、それでも少しずつ便利な拡張機能が充実していってるので、この記事では自分が利用している便利な VSCode の Perl 向け拡張機能を紹介します。 Perl Navigator marketplace.visualstudio.com 今年話題になった Languager Server を利用した拡張機能です。 他にも Perl の Languager Server を利用した拡張機能はいくつか種類がありますが、以前から存在する拡張機能と比べると自動補完やコードジャンプがちゃんとできたり、Perl::Criti
第76回 コーディングを楽にする Perl Navigator ～便利機能をエディタに簡単導入！（2） | gihyo.jp
Perl Hackers Hub 第76回コーディングを楽にする Perl Navigator ～便利機能をエディタに簡単導入！（2） 本連載では第一線のPerlハッカーが回替わりで執筆していきます。今回のハッカーは岡林大さんで、テーマは「コーディングを楽にするPerl Navigator」です。 ＜前回（1）はこちら。＞ Perlモジュールと連携した便利機能 さて、ここまではPerl Navigatorをインストールするだけで有効になる機能を紹介してきましたが、ここからは追加のPerlモジュールをインストールして利用できる便利な機能を紹介します。 Perl::Criticで品質検査 Perlには、伝統的なソースコードの静的解析モジュールとしてPerl::Criticがあります。Perl::Criticの導入によって、さまざまなコーディング規約に守られたコードを書けます。一般的には、Per
【プログラム】Perl Navigatorをインストールしました | まるめたり
「Perl Navigator」はVSCode拡張機能で、Perlの開発環境をフォローしてくれる様々な機能を提供してくれます。 Perl Navigatorのインストール インストール方法は、VSCode起動後、左側のメニューから「拡張機能」をクリック、検索ボックスに「Perl Navigator」と入力、検索結果に「Perl Navigator」が出てくるので、「インストール」をクリックしてインストールします。 様々な機能 インストールしてPerlのファイルを開いてみると色んな機能が使えるようになっていました。触ってみて便利だったものをピックアップしてみます。 （拡張機能の紹介ページにあるデモムービーを見ると動作がわかりやすいです。） 文法チェック 記述したコードにエラーがあるとその部分の下に赤い波線が引かれて、問題があることを教えてくれます。スクリプトを実行しなくてもエラーを知らせてく
第76回 コーディングを楽にする Perl Navigator ～便利機能をエディタに簡単導入！（1） | gihyo.jp
Perl Hackers Hub 第76回コーディングを楽にする Perl Navigator ～便利機能をエディタに簡単導入！（1） 本連載では第一線のPerlハッカーが回替わりで執筆していきます。今回のハッカーは岡林大さんで、テーマは「コーディングを楽にするPerl Navigator」です。 簡単で便利なPerl Navigator みなさんがPerlを書くときに利用するエディタは何でしょうか。Perlのユースケースとしてサーバサイドで動く場面が多いことから、EmacsやVimを使っている人が多いのではないでしょうか。 いずれのエディタを利用するにしても、コードを書く際に文法を自動的にチェックしてくれたり、変数名や関数名を補完してくれたり、変数や関数の定義元にジャンプしてくれたりする機能があると便利です。そうした日々のコーディングを楽にしてくれる便利機能をまとめて提供してくれるのがP
VSCodeのカラーピッカーが機能しない - Qiita
はじめに プログラミング学習中の@kat_logと申します。 VSCodeでカラーコードなど色を入力した際に表示されるカラーピッカーが表示されない問題が発生していたのですが、解決したため共有です。 結論 PostCSS Language Supportという拡張機能を無効化すると解決しました! 治らない場合 VSCodeの設定にて"editor.colorDecorators": trueになっているか確認する 参考: https://localhost8888.net/visual-studio-code/170/ 他の拡張機能の影響 VSCodeのアンインストール＆再インストール などが考えられます…🙇 おまけ VSCodeの挙動がおかしい時、今回のような拡張機能の影響が考えられるのですが、 「一時的に全ての拡張機能をオフ」にしてVSCodeを起動するコマンドのご紹介です code
【初心者向け】VSCodeの基本的な使い方と便利な拡張機能9選 | デジタルトレンドナビ
「Visual Studio Code（VSCode）」は、直感的なインターフェースと、多様な拡張機能によって、コーディング作業が格段に効率化されることから、プログラマーたちの間で高い評価を得ているエディタです。 しかし、これらの機能を最大限に活かすためには、基本的な使い方を把握し、どの拡張機能が自分の作業フローにフィットするのか、あらかじめ理解しておくことが不可欠です。 この記事では、VSCodeの基本的な使い方と、開発作業をスムーズに進めるための便利な拡張機能をご紹介します。快適な作業環境構築のために、ぜひ参考にしてください。 Visual Studio Code（VSCode）は、開発者にとって非常に強力なコードエディターです。その多様な機能と拡張性により、多くのプログラミング言語やフレームワークをサポートしています。ここでは、VSCodeの基本的な使い方と、初心者におすすめの拡張機
【VScode拡張機能19選】制作現場で実際に使っているVScodeの拡張機能 | EvoLab.
Web制作会社で、現役フロントエンドエンジニアが使用しているVScodeの拡張機能をご紹介します。 エヴォワークスのエンジニアたちに聞いた、実際に使っていて重宝している拡張機能を厳選して19個ピックアップしたので、参考にして使ってみてください。 1. Indent-Rainbow 出典 Visual Studio Code「Indent-Rainbow」 インデントごとにカラーを分けて、インデントの位置を視覚的に分かりやすくしてくれる拡張機能です。 インデント間違いによってエラーを起こしてしまう言語や、対応する閉じタグの位置がわからなくならないようミスを軽減してくれます。 2. zenkaku 出典 Visual Studio Code「zenkaku」 全角スペースを可視化してくれる拡張機能です。 そんなの見れば分かると思いがちですが、記述用が多くなると意外と見落としてしまいます。 確実
マークを付けた任意の行に移動可能なVS Codeの拡張機能【Bookmarks】
行数の多い文書やソースコードを編集中、離れた行に書いてある変数や関数の確認、頻繁に修正する可能性がある箇所など、任意の行に素早く移動したいと思ったことはないでしょうか。 標準機能でも検索や行番号による移動はできますが、VS Codeの拡張機能「Bookmarks」を使うとあらかじめ印を付けた行に即座に移動できるようになり、より効率的に作業できるようになるかもしれません。 使用したバージョン Bookmarks v13.4.1 PR 拡張機能 “Bookmarks” について マークを付けた任意の行へ素早く移動できるVS Codeの拡張機能です。 ショートカットキーによる移動のほか、マークの一覧から選んで移動することもできます。 ウェブ倉庫 定数や関数をまとめている箇所等、確認・編集する頻度が高い箇所などにマークを付けておくとすぐに移動できて便利です。 Bookmarksのインストール VS
VSCode: 拡張機能「bookmarks」が便利
Visual Studio Codeの拡張機能「bookmarks」を使うと、 ブックマークのようにファイル上に印をつけて、印の間を移動することができます。 秀丸エディタでのマーク機能のようなものです。 使い方次第ではアウトライン機能としても使えるので、 大きなファイルを扱うときに便利です。 ここでは、拡張機能「bookmarks」の使い方を紹介します。 「bookmarks」のインストール 拡張画面の検索ボックスに「bookmarks」と入力すると、 一番上に表示されるので、インストールボタンをクリックします。 インストールした時に、説明ページが表示されます。軽く目を通しておくとよいでしょう。 下図の両端に青い小さな四角が表示されています。これがブックマークです。 Bookmarks Toggle: 「Ctrl + Alt + K」 ブックマークの設定・解除 Bookmarks jump
Visual Studio Code備忘録 - Qiita
以降では「Visual Studio Code」を「vscode」と略します。 表示しているファイル内のシンボルの一覧を表示する vscodeでは、関数やクラス、メソッド等を「シンボル」として認識します。 以下のキーを押すと、表示しているファイル内のシンボルの一覧が表示されます（関数やクラス、メソッドの一覧が表示されます）。 mac windows 上述のキーを押した後、「:」をタイプすると、シンボルがクラスやメソッド等のカテゴリごとにソートされます。 一覧からシンボルを選択し、Enterキーを押すとそのシンボルに移動します。 シンボル名で検索する 以下のキーを押した後、シンボルの名前の一部をタイプすると、そのタイプした文字列に合致するシンボルをプロジェクト内のファイルの中から検索し、該当するシンボルの一覧が表示されます。 mac windows
VS Codeの折り畳みと展開のショートカット | RishunTrading
2023年4月18日 / 最終更新日時 : 2023年4月18日 info@rishuntrading.co.jpツールプログラミング VS Codeの折り畳みと展開のショートカット VScodeでコーディングをしていたところ、誤って何かのキーを押してしまったらしく、すべてを折りたたむショートカットが発動し全て折りたたんでしまいました。 もちろん、一つ一つ展開なんて事は面倒なので、当然全て展開するショートカットがあるだろうと調べてみたらやはりありました。 せっかくなので、VS Code上のコードの折り畳みと展開のショートコードを、まとめて記載しておこうかと思います。 1.VS Codeのコードの折り畳みと展開とはVS Codeのコードの折り畳みと展開とは以下の事です。 ソースの左側のところにマウスをホバーさせると、下向きの閉じ括弧(もしくは矢印)がでてきます。
Visual Studio CodeでC言語を行頭かっこじゃないようにオートフォーマットする - Qiita
#include <stdio.h> int main(void) { printf("hello, world\n"); return 0; } 参考：https://stackoverflow.com/questions/45823734/vs-code-formatting-for Visual Studio Codeの自動整形について C/C++用のextension(C/C++)を入れると、「Shift+Option+F(Mac)」で自動整形されるようになる。 またはテキストエリア上で「右クリック」→「Format Document」でも可能。 試行錯誤のログ C/C++のデフォルトでは、自動フォーマットは開始かっこ { が新しい行に来る。 でも{ の前は改行されないスタイルの方が好みなんだ…！ Googleのスタイルガイドだとこの形式らしい。C++用っぽいけれど。 https:
VScodeだけでGit操作を完結させるのだ～～ッ!!
VScodeだけでGit操作を完結させる方法について書くのだ。 👀その前に！ この記事は、以下の2つの拡張機能がインストールされている前提で進めるのだ。 Git Graph - Visual Studio Marketplace GitLens — Git supercharged - Visual Studio Marketplace インストールしておいてほしいのだ。 ✅ステージング(git add ◯） 以下のようにするのだ。 ＋ボタンをクリック：ステージングする ーボタンをクリック：ステージングを解除する ▲ステージング→解除 ✅コミット名を自動でつける 右にある✨ボタンを押すと、コミット名を自動で決めてくれるのだ👇 ▲この例だと、変更内容が意味不明すぎて変なコミット名になってるし、現状英語だけみたい？ これは、GitHub Copilotの機能なのだ。 ✅コミット(git c
VSCodeでHSP3開発を超快適にしよう！ [2023-2024年] - Qiita
概要 HSP3 (Hot Soup Processor) を未だに初期装備のＨＳＰスクリプトエディタ（以下、標準エディタ）で開発している方に向けて、VSCodeで超快適な開発環境を作ります！ ↓ こうなります（demo.hspを実行している画面） 最終環境 執筆時点(2024/02/14)で構築できた最終的な環境。 HSP3.6 hspc v3.5.1 knowbug v2.2.0 VSCode v1.86.1 Japanese Language Pack for Visual Studio Code v1.85.2024020709 language-hsp3 v1.2.0 HSP3 アナライザー・ミニ (LSP) v0.5.1 Code Runner v0.12.1 language-hsp3-icon VSCodeとは VSCode (正式名称: Visual Studio Code
![VSCodeでHSP3開発を超快適にしよう！ [2023-2024年] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/b687b6de80695a0328e613a47b1b8dbb5735bb83/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9VlNDb2RlJUUzJTgxJUE3SFNQMyVFOSU5NiU4QiVFNyU5OSVCQSVFMyU4MiU5MiVFOCVCNiU4NSVFNSVCRiVBQiVFOSU4MSVBOSVFMyU4MSVBQiVFMyU4MSU5NyVFMyU4MiU4OCVFMyU4MSU4NiVFRiVCQyU4MSUyMCU1QjIwMjMtMjAyNCVFNSVCOSVCNCU1RCZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9NzYwNmMwNzNkOGFlNWQwYTQ0NDU1OWYzZDEwN2FlNmU%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB1bXV5JnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0yMGQ4ODA5ODM3ZTY1YTg2MmU0NDYyODdkMzNmZjFmMQ%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D6be7869ac843410777a4e0274a023d29)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【VSCode】覚えておきたいキーボードショートカット一覧 - Qiita
Visual Studio CodeでPython実行時の引数を指定する方法 - embeddedなブログ
VSCodeのC/C++ formatで中括弧の位置が気に入らないあなたへ - Qiita
VSCode C++整形時の行頭カッコやめたい
Get rid of annoying warnings like F403 and F405 when using VS Code and flake8 - EasyDevGuide.com