【地上の】mermaid でちょっと大きめの図を描く【星】
はじめに 細かいところに PlantUML ほど融通が利かないと言われる mermaid.js ですが、逆に言えばそこまで複雑なフローでなければそこそこ描けるやんけ！ということで mermaid.js で中規模以上のフロー図を描くときに使えそうな記法などについて書いてきます。 題材 良い感じの題材が思いつかなかったので、今回は地上の星の歌詞のフロー図を mermaid.js で描いていきます。 参考↓ 準備 まずは mermaid.js でフロー図を描く際の基本です。 記載規模やお好みでどうぞ VSCode みんな大好き VSCode。拡張機能を入れることで、描きながらプレビューできたり画像出力ができます。Markdown を普段から VSCode で描いている方は下記の1を。そうでない方は2を使うと良いかと思います。 1 https://marketplace.visualstudio.
GitHub Copilot Tips and Tricks
30分でわかるシステム運用アンチパターン / Operations Anti Patterns in 30 minutes
個人的Rails開発環境構築2024
新規でRailsプロジェクトを始める時の個人的な環境構築についてまとめる。前提とする条件等は下記。 規模: ~中規模 開発者数: 個人 利用シーン: PoC作成・スタートアップ立ち上げ・並の業務アプリ開発等 基本戦略 利用シーン的に「思い立ったらすぐアプリの開発ができる」という感じの運用がしたい。極力セットアップで悩みたくないから必要なミドルウェアなどは全部Dockerでインストールできるようにして立ち上げれば終わり、の環境を作る。その環境の中で色々とコマンドを叩いたり、rails newやrails gなどでRailsアプリを作成していく。 この辺のRailsの初期セットアップの手間を出来るだけ省きたいのでtemplateとなるリポジトリを作成し、そこからcloneしてくるだけでOKにする。 フロントエンドはReactなどを使わずをRails標準のerbとHotwireを軸に開発する。開
10 unexpected ways to use GitHub Copilot
EngineeringProduct10 unexpected ways to use GitHub CopilotGitHub Copilot is widely known for its code generation feature. Learn how the AI assistant’s abilities can extend beyond just code generation. Writing code is more than just writing code. There’s commit messages to write, CLI commands to execute, and obscure syntax to try to remember. While you’ve probably used GitHub Copilot to support you
Devcontainer がデバッグ環境構築のハードルを一気に下げるお話
起動確認 いつもの 初期設定 VSCode左下の><をクリック 開発コンテナー構成ファイルを追加 ワークスペースに構成を追加する こちらを選択することでGit上で構成ファイルを管理出来ます。 定義済みのコンテナー構成定義から Node.js & TypeSctipt 導入する、言語などを選択してください。 バージョンを指定してください。 お好きな拡張機能を追加してください。 .devcontainer/devcontainer.jsonに以下の様なファイルが出来上がります。 // For format details, see https://aka.ms/devcontainer.json. For config options, see the // README at: https://github.com/devcontainers/templates/tree/main/src/
Flyde | Visual Programming. For Developers.
Open source, runs in VS Code, integrates with existing TypeScript code, browser and Node.js.
VSCodeで日本語の音声入力が可能に、Copilotがコードに合った変数名を提案など新機能。2024年2月のアップデート
VSCodeで日本語の音声入力が可能に、Copilotがコードに合った変数名を提案など新機能。2024年2月のアップデート コードエディタのVisual Studio Code（以下、VSCode）は2024年2月のアップデートで、音声入力やCopilotによる変数名の提案などの新機能が追加されました。 More developer goodness in the February update of @code Use your voice to write code (in your language!) Code faster with multi-cursor suggestions Renaming gets easier (because it's AI powered) Release notes: https://t.co/zwokiQvbPU Download: http
A decent VS Code + Ruby on Rails setup
Setting up VS Code for Ruby on Rails development can be tricky, so I wrote this article to help. Plus, I've turned the extensions in this article into a VS Code Extension Pack. Use it to install all the extensions from this article in 1-click, to get started quickly with VS Code + Ruby on Rails. Table of Contents Using VS Code as a Ruby on Rails editor shouldn't be so hard! It's tricky deciding wh
VS Codeの新機能がすごく便利！ ツリービューのスティッキースクロール機能をオンにすると格段に使いやすくなります
先日アップデートされた、VS Code v1.86で、スティッキースクロールがツリービューでも使用できるようになったので、紹介します。 エディタのスティッキースクロール（紹介記事）ができるようになった時もその便利さに喜びましたが、ツリービューでもできるようになり、深い階層でもすべての親を常に表示しておくことができます。 ツリービューのスティッキースクロールを使用するには、デフォルトではオフになっているので、機能をオンにする必要があります。 ※オンになっている人もいるようですね。
GitHub Actions for VS Code で、ワークフロー編集時の構成変数のサジェストとバリデーションが便利 | DevelopersIO
こんにちは、CX 事業本部 Delivery 部の若槻です。 前回のエントリで、GitHub Actions for VS Code を使って構成変数（Variables、Secrets および Environments）の管理が行えることをご紹介しました。 今回は GitHub Actions for VS Code の別機能として、ワークフロー編集時に構成変数のサジェストとバリデーションをしてくれる機能が便利だったのでご紹介します。 環境 # VS Code $ code --version 1.85.1 0ee08df0cf4527e40edc9aa28f4b5bd38bbff2b2 arm64 # GitHub Actions for VS Code $ code --list-extensions --show-versions | grep github.vscode-gith
GitHub Copilotが便利になったのでターミナルもVSCodeで良いのでは？という話 - Qiita
この記事はラクスアドベントカレンダー2の17日目です。 先日のVSCodeのアップデートで、GitHub Copilotを使うとターミナル操作が便利になりました。 これにより、別途ターミナルのアプリを使わずにすべてVSCode上で操作した方が便利なのでは？となりました。 アップデート前までどうしてたか MacのiTerm2上で、GitHub CopilotのCLI版（パブリックベータ）で入力補完やコマンドの意味を調べたりしていました。 それ自体は便利でしたが、いくつかの不便な点もありました。 使い方がちょっと煩雑だった 例えばコマンドをサジェストして欲しい場合、gh copilot suggest 'gitで1つ前のコミットを取り消したい'のようにタイプする文字数も多くなり、またそれが一般的なコマンド or ghコマンド or gitコマンドかの３択に答えないといけなくて面倒でした。 ss
GitHub Copilot Chat の使い方｜npaka
2. GitHub Copilot Chatの開始「GitHub Copilot Chat」の開始手順は、次のとおりです。 (1) 「GitHub Copilot」のセットアップ。 「GitHub Copilot」のセットアップが必要です。 (2) VSCodeの拡張機能で「GitHub Copilot Chat」をインストール。 (3) チャットタブが追加されるので、クリック。 (4) チャットのメッセージボックスに質問を入力。 コードを開いて「このコードを説明して」と頼むと、次のように説明してくれました。 エディタでコードが選択されている場合、Copilot は選択した範囲に質問を絞り込みます。 3. スラッシュコマンド「Copilot」がより適切な回答を提供できるように、「スラッシュコマンド」を使用して質問のトピックを選択できます。 ・/explain : 選択したコードがどのように
VSCode の新機能「built-in port forwarding」を使いローカルサーバーにインターネット側からアクセス - Qiita
VSCode の新機能「built-in port forwarding」を使いローカルサーバーにインターネット側からアクセスHTMLJavaScriptNode.jsVSCode はじめに この記事は、以下の公式ポストや、VSCode のアップデート後のリリースノートにも出ていた「built-in port forwarding」を試してみた話です。 この機能を使うと、ローカルにあるサーバにインターネットからアクセスできるようになります。 同様のことを実現するものには、有名どころの 1つに「ngrok（エングロック）」があったり、その他にもたくさんの類似サービスがあります。 実際に VSCode の built-in port forwarding を試してみる それでは、VSCode の built-in port forwarding を試してみます。 自分が試す際に参考にした情報は
2023年のシェル環境構築
tl;dr fig starship zsh fzf sheldon なぜ vscode の .vscode/tasks.json が fishと非常に相性が悪い。とくに fish-nvm を使っていると、fish 経由のパス実行時に node と npm へパスが通らない。 そもそも fish を使っていた理由は autocomplete を快適にするためだったが、1年ぐらい Fig を使っていて、補完はこれを任せていいと気づいた。 Fig はこういうやつ そもそも fish の拡張コマンドを使わないように生活していた。方言を覚えたくない。というか bash 拡張や zsh 拡張もあんまり覚えたくない。
Port forwarding local services with VS Code
Version 1.88 is now available! Read about the new features and fixes from March. Local Port Forwarding Support for port forwarding is built into Visual Studio Code via Microsoft dev tunnels, no extension required. When running a local web service, you can use the Ports view to make the service accessible to others over the internet. How to use local port forwarding First, you need to have a servic
Visual Studio CodeでのSSH接続により、EC2サーバーが高負荷になり動かなくなった - エキサイト TechBlog.
こんにちは、エンジニアの岩藤です。 今回はVisual Studio CodeでのSSH接続が原因で、接続先EC2サーバーが高負荷になってしまった現象と対策についてお話しします。 あるEC2サーバーで数人で開発していると、サーバーが急に重くなりssh接続すらできなくなる現象が定期的に発生しました。 ↓topコマンドで確認した結果 top - 14:21:29 up 5:20, 1 user, load average: 4.58, 2.01, 0.86 Tasks: 192 total, 3 running, 189 sleeping, 0 stopped, 0 zombie %Cpu0 : 10.1 us, 3.0 sy, 0.0 ni, 0.0 id, 86.9 wa, 0.0 hi, 0.0 si, 0.0 st %Cpu1 : 9.5 us, 2.4 sy, 0.0 ni, 0.0
知識0の状態からたった2時間でVSCodeの拡張機能を作った話 - Qiita
はじめに こんにちはkenです。エディターはVS Codeを使ってます。 突然ですがみなさん、普段開発をしていて 「VS Code にこんな拡張機能、あったらいいのにな〜」 と思うことありませんか？ 私はあります。しょっちゅうあります。 そこで先日、予定がない休日を利用して拡張機能の開発に挑戦してみることにしました。 最初は拡張機能の開発をどのように進めていけばよいのか全くわからず、そもそも拡張機能でどこまでのことを実現できるのかすらわかりませんでした。ましてや実装についての知識なんて皆無です。 「これは完成まで1日くらい、いや下手すると3日くらいかかるかな」と考えていたのですが、いざやってみるとたった2時間で作れてしまったので今回はその経験についてお話ししたいと思います。 この記事を読んで、 「こんなにお手軽なら自分にも作れそうだ！」 と感じてくれたら幸いです。 本題 作りたかったものと
VBA基礎５：VS CODEでVBAを編集（ariawase）｜KIYO
１．概要 普段業務効率化のためにExcelのVBAを使用することが多いですが①VBEが使いにくい、②GitHub Copilotを購入しているため有効活用したい という理由でVS CODEを使用したいと思っております。 下記記事を参考にしながら、VS CODEでもVBAを編集できるようにしたいと思います。 ２．環境構築 環境構築として大きく分けて下記があります。 Excelから標準モジュール（所謂VBAの中身）を抽出したり、編集後のファイルを統合してくれるスクリプトをダウンロード VS CODEに必要なExtensionを追加して設定の追加 Excelとbinフォルダの準備 なお本当はgit(Version管理システム：変更箇所の差分を表示してくれるツール)を使った方が良いのですが、まだ勉強不足のため今回はgit無しで作成しました。 なお初期設定としてExcelの「開発者向けマクロの設定：
自分的Visual Studio Code(VS Code)の必須設定4選 - Qiita
1. 区切り文字の設定変更 CSSクラス名や変数名をダブルクリックした際、ハイフン等がデフォルト設定では区切り文字として判定されます。それらの判定を変更する設定です。 設定前 設定後 設定手順 Code → 基本設定(Preferences) → 設定(Settings) 「設定の検索(Search settings)」欄に、editor.wordSeparators と入力 区切りとして扱ってほしくない文字を消す 初期値 2. HTMLブロックの一括選択設定 HTMLブロックの選択を楽にする為の設定です。 Emmet公式の説明ページ 選択したいHTMLタグにカーソルを合わせ、設定したキーを押すと、 ↓ 設定手順 Code → 基本設定(Preferences) → キーボードショートカット(Keyboard Shortcuts) 「入力してキーバインドを検索(Type to search
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Visual Studio Codeに新しいPython拡張機能が仲間入り、Python 3.7対応の廃止は9月／言語サーバー「Pylance」ではローカライズも
