ショートカットキー10選(詳細) 1. Alt + ↑↓ - 行の移動 行全体を上下に移動することができるショートカットキーです。素早く行全体を移動可能。行ごと移動させたい時に、行を切り取って挿入したい箇所に貼り付ける、といった操作が不要となります。 2. Shift + Alt + ↑↓ - 行のコピー カーソルが置かれた行をコピーし、そのまま上下の行に挿入できます。同じようなコードを複数箇所で書きたい時などに、役立ちます。 3. Ctrl + Shift + K - 行の削除 カーソルが置かれている行を一瞬で削除してくれます。複数行を選択すれば、複数行削除も可能。 4. Ctrl + [ / ] - インデントの追加/削除 手動でインデントを揃える手間が省けて、コードが整理整頓された状態を保ちやすくなります。 5. Ctrl + / - コメントアウト/解除 コメントアウト、既存コメン
TL;DR プレビュー対象はcdk synthで出力されたCloudFormationのテンプレートファイル 構成図はVSCode拡張機能aws toolkitのApplication Composerでプレビュー表示(変更検知機能利用) nodemonを用いて、プレビューを開いた状態でtsファイル保存時にcdk synthを実行することで再表示させる nodemon -e ts --ignore cdk.out --exec 'cdk synth' 情報元: aws-summit-2024-iac-booth-demo/realtime-draw-diagram at main · aws-samples/aws-summit-2024-iac-booth-demo · GitHub 前準備 ※コンテナ開発/TypeScriptを前提とする。 1. CDKプロジェクト作成 すでに作成済み
2024.01.12 ローカル環境でコード生成を使いたい 〜Continue+Llama.cpp+ELYZA-japanese-CodeLlamaを試してみた〜 ご覧頂きありがとうございます。グループ研究開発本部 AI 研究開発室の N.M.と申します。 ChatGPTをはじめAIに関する大きなムーブメントの起きた激動の2023年が終わり、2024年が始まりました。我々AI研究開発室も日々AI技術を追いかけています。昨年から話題になることの多いGitHub Copilotもその一つであり、特にコードの補完は非常に使い勝手もよく開発や解析のサポートに使うことができます。今回はなるべくローカルに閉じた状態で近しい環境が作れないか試してみたことを紹介します。最後までご覧いただければ幸いです。 TL;DR VSCodeのExtensionであるContinueとELYZA-japanese-Cod
はじめに こんなツイートを見て執筆をしようと思いました。 実際に、VSCodeは機能の追加や拡張機能の開発が活発に行われており、かつUIもユーザーフレンドリーであるため人気のエディターだと思います。VSCodeを使いこなせるのとそうでないのではエンジニアリングの生産性に大きな差が出てしまうと思います。 パンくずの設定 '>' を入力します。 '>' preferences: Open User Settings (JSON)を入力します。 僕のsettings.jsonは以下です。 { "workbench.colorTheme": "GitHub Dark", "terminal.integrated.fontFamily": "MesloLGM Nerd Font", "terminal.integrated.profiles.osx": { "fish": { "path": "/o
Microsoft製テキストエディタ「Visual Studio Code(VSCode)」は拡張機能を導入することで機能を追加したり外観をカスタムしたりできます。セキュリティ研究者らが「人気拡張機能にコードを挿入した偽拡張機能」を公開した結果、短期間で大企業やセキュリティ企業を含む多くのユーザーのマシンにインストールされたとのこと。セキュリティ研究者らはVisual Studio Codeの拡張機能システムの欠陥を指摘し、警鐘を鳴らしています。 1/6 | How We Hacked Multi-Billion Dollar Companies in 30 Minutes Using a Fake VSCode Extension | by Amit Assaraf | May, 2024 | Medium https://medium.com/@amitassaraf/the-stor
ChatGPTなどの大規模言語モデル (Large Language Model; LLM) にプログラミングやリファクタリングをさせる場合、目的に合ったものが作られているかを何らかの方法で検証する必要がある。 プログラムの正しさを完全に保証する方法はないが、ある程度の正しさを継続して担保するための方法を探ってみたので以下にまとめた。 ポイントは、ChatGPTの生成したプログラムの検証にもやはりChatGPTの力を借りることである。 実行可能性と入出力のチェック プログラムを生成するタスクである場合、いつでも「実行できるか?」というチェックが可能である。これは自然言語の生成と大きく異なる点だろう。実行可能性を確かめることは最低限のチェック項目になる。 エラーが出力された場合、自力で修正するか、もしくは、エラーの内容をChatGPTに提示して修正を依頼し、再度実行可能かを確かめる。 入力・
HomeNewsSecurityMalicious VSCode extensions with millions of installs discovered A group of Israeli researchers explored the security of the Visual Studio Code marketplace and managed to "infect" over 100 organizations by trojanizing a copy of the popular 'Dracula Official theme to include risky code. Further research into the VSCode Marketplace found thousands of extensions with millions of insta
お盆に時期で帰省される方も多いかと思います。 Qiitaを読まれる方の多くは帰省したときにラップトップを持ち帰るなどして、いつでも開発をできるようにしているかと思います。 私も必ずラップトップを持ち帰り、暇があれば開発などができるようにしていました。 実際はそんな暇がなくて一度も起動しないことが多いですが その時、いつも以下のような不満がありました ラップトップの性能が低くてビルドなどに時間がかかる モバイル回線を使うため、回線が遅くてdocker pullなどに時間がかかる これらをタイトルにあるようにVSCode Remote+Tailscale+スマートプラグを組み合わせることで、改善できそうだったので紹介します VSCode Remote SSH デスクトップPCなど性能の高いPCが自宅にあることが前提ですが、そうしたPCは基本的にラップトップより性能が高いです。また、そのPCにリ
Version 1.90 is now available! Read about the new features and fixes from May. May 2024 (version 1.90) Downloads: Windows: x64 Arm64 | Mac: Universal Intel silicon | Linux: deb rpm tarball Arm snap Welcome to the May 2024 release of Visual Studio Code. There are many updates in this version that we hope you'll like, some of the key highlights include: Editor tabs multi-select - Select and perform
はじめに こんにちは。スペースマーケットでWebエンジニアしてます、新卒のdumbled0reです。 4月に入社してから早2ヶ月経って、入社式が昨日のように感じています。時の流れは早い。 日頃、ブラウザ操作する時はPythonのライブラリであるSeleniumを使用していましたが、vscodeにあるPlaywrightの拡張機能を使用すれば非エンジニアの方でも簡単にブラウザ操作用のコードを書けたので紹介します。 Playwrightとは PlaywrightとはMicrosoftが開発したオープンソースのE2Eテスト自動化フレームワークです。 Chromium、Firefox、WebKitなどの主要なブラウザで対応しており、1つのコードで複数のブラウザ上で動作確認も行えます。 環境 node 20.9.0 playwright 1.44.0 拡張機能のインストール 今回使用するVScode
CSS GridやFlexboxで配置するプロパティ値は? 先頭の3つだけを指定するセレクタは? という「あれは何だっけ?」に役立つのが、チートシートです。 CSS GridやFlexboxの各プロパティ・値でどのように配置されるのか、セレクタやnth-child()やdisplayやposition、VS CodeやGitのコマンドがまとめられたチートシートを紹介します。 チートシートは高解像度版が用意されており、ダウンロードしておくと便利です。 CheatSheets -GitHub チートシートはすべて、「ご自由にダウンロードしてご利用してください」とのことです。チートシートは高解像度版を無料でダウンロードでき、モニターの壁紙や印刷して机の脇に貼っておいても便利です。 では、どんなチートシートがあるのか紹介します。 まずは、CSS Flexboxのチートシート。Flexboxの各プロ
ブログの文章やドキュメント作成など、さまざまなシーンで使われる記法に「マークダウン記法」があります。文字修飾の簡単さや読みやすさから使うタイミングは多々あると思いますが、みなさんは快適にマークダウンを書けていますか? 筆者はVS Codeでドキュメントをマークダウンで書くことが多く、表の作成・編集やプレビュー表示など、めんどくさい・見づらい・使いづらいと思うことがあります。どうにか快適に書けないかと思いさまざまな拡張機能や設定を試しながら業務を行ってきました。 この記事では、筆者が試した拡張機能やVS Codeの設定の中で便利だったものを紹介します。①から⑥まではすべて無料で利用できるので気軽に試してみてください! ①マークダウンの表をエクセルからコピペできる拡張機能 VS Codeでの表の作成に重宝しているのが「Excel to Markdown table」という拡張機能です。エクセル
We are excited to introduce the AI Toolkit for Visual Studio Code, a powerful VS Code extension available today in the Visual Studio Marketplace. AI Toolkit enables developers to explore, try, fine-tune, and integrate state-of-the-art models from Azure AI Studio and HuggingFace into applications. The AI Toolkit is an evolution of the Windows AI Studio extension that was released in November 2023.
マイクロソフトは、日本時間5月22日未明から開催中のイベント「Microsoft Build 2024」で、GitHub Copilotの新機能「GitHub Copilot extensions」を発表しました。 GitHub Copilot extensionsは専門知識を持つCopilot GitHub Copilotは、プログラマはVisual Studio Codeなどのコードエディタ上やチャット欄でAIと対話し、プログラミングに関する質問への回答やコードの生成などをAIが行ってくれる機能です。 GitHub Copilot extensionsは、このCopilotの能力をサードパーティなどがそれぞれのソフトウェアやサービスの専門家へと拡張できるようにし、プラグインとしてCopilotに組み込み可能にしたものです。 拡張されたCopilotの例として、マイクロソフトが提供する「
It is important to note that the component model does not support low-level (C-style) pointers. As such, you cannot pass object graphs or recursive data structures. In this respect, it shares the same limitations as JSON. To minimize data copying, the component model introduces the concept of resources, which we will explore in more detail in a forthcoming section of this blog post. The jco projec
[VS Code]タブのカスタムラベル設定でpage.tsx、layout.tsxなどのファイルを見やすくする どうも!オペレーション部の西村祐二です。 最近、Next.jsなどでフロントエンドの実装も行うことが増えてきました。 実装を進めていくと、page.tsx,layout.tsx,index.tsx,route.tsなど同名のファイルが増えてきて、どのファイルを開いているか分かりづらいなと思う場面がありました。 VS Codeのv1.88で開いているファイルタブのラベルをカスタマイズできるようになったので、その設定方法を紹介したいと思います。 Visual Studio Code March 2024 結論 最初に結論として、settings.jsonに下記設定をすることでディレクトリ名も表示されるようになりタブを見やすくすることができます。 .vscode/settings.js
Version 1.89 is now available! Read about the new features and fixes from April. April 2024 (version 1.89) Update 1.89.1: The update addresses these issues. Downloads: Windows: x64 Arm64 | Mac: Universal Intel silicon | Linux: deb rpm tarball Arm snap Welcome to the April 2024 release of Visual Studio Code. There are many updates in this version that we hope you'll like, some of the key highlights
VSCode上でシーケンス図/クラス図/フローチャートをサクッと書きたい ~Mermaid Graphical Editor~初心者umlVSCode新人プログラマ応援mermaid はじめに Mermaid Graphical EditorというVSCodeの拡張機能にとても感動したので一筆書きました こんな方におすすめ シーケンス図/クラス図/フローチャートをサクッと書きたいけどmermaidとか難しそう 😢 できること VSCode上でポチポチしながらシーケンス図/クラス図/フローチャートを描けるようになる mermaid記法のコードも自動生成されるよ 個人的メリット mermaidの学習コスト0 紙で書くよりも修正しながら書きやすい 導入手順 (簡単7steps) (1) VSCode上で「Mermaid Graphical Editor」という拡張機能をインストールする (2)
devcontainerを使ってみよう devcontainerを使う上で知っておくと良さげな情報のまとめ記事です 前にRemote SSHでdevcontainerの環境を構築する記事を書いたので、今回はdevcontainer全般の情報をまとめてみました tl;dr devcontainerを使うと開発環境をコンテナで構築できるよ(ランタイムとかツール類含めて!) docker composeだとアプリケーションを動作させる環境は作れるけどdevcontainerは開発環境ごと構築できて便利 devcontainerを使うにはdockerとdevcontainerを利用できるエディタが必要 devcontainer内でdocker composeを利用できるから、devcontainer用のコンテナ+ミドルウェアコンテナを用意すればアプリケーションを開発できる環境がまるっとコンテナで作
# Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting This slides are used at VS Code Conference Japan 2024 https://vscodejp.github.io/conference-2024/ (15 ~ 20 minutes) ## References: - Extension API | Visual Studio Code Extension API https://code.visualstudio.com/api - The Biome Tool Chain https://fosdem.org/2024/schedule/event/fosdem-2024-2563-the-biome-toolchain/ - Mo
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く