はじめに VS Codeでコーディングをするとき、Gitの操作やビルド、デプロイなど、決まった処理を手動で実行するのが面倒だなと思ったことがあるのではないでしょうか。tasks.jsonというファイルを使えば、そういった面倒な手順を自動化し、開発効率を上げることができます。 この記事でやること この記事では、作業ブランチにmainブランチの取り込みを行うGitコマンドを自動化してみます。mainブランチを取り込むために、以下のコマンドを毎回手で実行しているとします。 git stash git pull origin main git stash pop これをtasks.jsonに定義して自動化したいと思います。 タスクの作成 タスクを作成するには、VS CodeのメニューのTerminal⇒Configure Tasksを選択します。 Create tasks.json file fr

ファイル比較 VSCodeのエクスプローラで、ファイル２つを選択して右クリックメニューから「選択項目を比較」で比較することができます。 また右クリックで、「比較対象の選択」をした後に「選択項目を比較」でも比較することも可能です。 VSCodeのSnippetの使い方 VSCodeのSnippetも便利です。似たような構造のクラスを実装する場合などや、プロジェクト共通で使いがちな書き方というものをSnippetに登録して、効率化することができます。 また、変数を持たせておくこともできます。この場合、Snippetを呼び出した後に変数部分にカーソルがあたるので、そこで変数部分をタイピングできます。 詳細は以下のリンクをご覧ください。 Visual Studio Codeに定型文（スニペット）を登録する方法 VSCodeのUser Snippetを活用しよう！ また後述するSnippet Gen

こんにちは、CX事業本部 IoT事業部の若槻です。 今回は、VS Code拡張機能（Extension）の開発手順について簡潔にまとめたのでご紹介します。 前回のエントリでもVS Code拡張を作成しました。既存ブログなどを見ながら四苦八苦して実装したのですが、手順自体は意外と簡単でした。 手順概要 VS Code拡張機能を開発する手順は以下のようになります。 プロジェクト作成（yoコマンドで1発） コマンド内容を実装（JS/TSで処理を記述） コマンドの呼び出され方を定義（package.jsonを編集） 動作確認（VS Codeのデバッガーを使用） VS Codeで拡張機能として利用可能にする（vsixファイルに変換してインポート） なお、ここで紹介するのは自分で開発して自分で使うExtensionを作る想定の手順です。マーケットプレイスへの公開手順は紹介しません。（ただし公開手順も難

インプレスは5月19日、同社が発行している書籍「Visual Studio Code完全入門　Webクリエイター＆エンジニアの作業がはかどる次世代エディターの操り方」を同社特設ページ上で全文無料公開すると発表した。同書籍の重版を記念したもので、公開期間は5月21日まで。 「Visual Studio Code」は、米Microsoftが開発したソースコードエディタで、Web制作やアプリ開発などに使われている。同書籍は、Visual Studio Codeをこれから始めたい人に向けた入門書籍で、基本設定の方法からカスタマイズ、Web制作やプログラミング向けの機能などを解説しているという。

2カ月ぶりに VS Code の新しいバージョン 1.64 がリリースされました? （2月に入ってますが January 2022 なので2022年1月のアップデート扱いなようです） リリースノートは以下にまとまっています。今回は新しいサイドパネルに焦点を当てて紹介します。 新しいサイドパネルとは 今までの VS Code の UI は以下のように左側にサイドバー、下側にパネルがあり、workbench.panel.defaultLocation でデフォルトの下側以外にも左側や右側に設定できました。 またサイドバー内のアウトラインのようなビューをパネルの中に入れることができました。 https://code.visualstudio.com/docs/getstarted/userinterface ただしパネル自体は一つだったので、ターミナルは下側で横幅が広い状態で見たいけど、アウトラ

「Visual Studio Code」（VSCode）はMicrosoftが開発している高機能コードエディターです。今回は、プログラミング以外の作業や業務も助けてくれる拡張機能を紹介します（表5）。VSCodeはコードエディターですが、できることは幅広いので、開発以外の業務にも活用してみてはいかがでしょうか。

はじめに Markdownって便利ですよね？ README.md、PR や Issue の本文やコメント、Qiita や Zenn はもちろん、Google Docs や Trello や Notion や Jupyter Notebook でも使えるみたいです。もっといろいろな文書を Markdown で書ければいいのになあ、あらゆる文書のソースコードを Markdown にできればいいのになあ。 さあ、Markdown の可能性を広げましょう！ 本記事では「スライド」と「(電子)書籍」をMarkdownで書く方法をご紹介したいと思います。もちろん、VSCodeでMarkdownを効率よく便利に書いていくためのチップスもご紹介していきますよ。 ご参考スライド VS Code Conference Japan 2021 で発表した際の以下スライドもご参照ください。 もちろんこのスライドもV

GeekGig 『スタディサプリ x Showcase Gig』 〜フロントエンドを楽しむ〜 Links: p.6 [Deep Environment Parity CDNT 2019 - Speaker Deck](https://speakerdeck.com/spring_mt/deep-…

いわさです。 Visual Studio Code では、AWS Toolkit for Visual Sutdio Codeという拡張機能が提供されていますが、今回こちらにAWS App Runnerの統合機能が追加されました。 App Runnerをスルーしていたなーと思っていたので、良い機会ですし触ってみました。 Webアプリ用意 まずは、Webアプリを用意します。 App Runnerではコードからデプロイする機能とコンテナをデプロイする機能があるようで、コードランタイムはPythonとNode.jsのみ現時点では対応しているようです。 皆さんASP.NETを使いたいだろうと思いますので、今回はコンテナイメージから用意したいと思います。 ASP.NET CoreのMVCテンプレートにDockerFileを追加したものをデプロイに使います。 dotnetコマンドでスケルトンを作成し、

Markdownでテーブルを表現するにはつらみが深すぎる みなさんはMarkdownでテーブルを書くことは得意ですか? 私は苦手です。 簡単なテーブルは簡単に書けるのですが、以下のようなテーブルを書くことには抵抗感があります。 行数、列数が多い セル内に書くテキスト量が多い セル内でリストを表現する 一方、私は先日、「Markdownで手順を書いています!」とこちらの記事で伝えました。 そんな私に対して、 「オイオイオイ。 Markdownでもなんでもいいけどよォ... テーブルを使いたい場面は多いんだぜ。」 というセリフが聞こえてくる気がします。 私のようなMarkdownでテーブルを書くことにつらみを覚える方への解決策として、以下記事で紹介している「MarkdownTableMaker」があります。 このアドオンを使うことで、選択したスプレッドシートをMarkdownに出力してくれます

TL;DR まずはこいつをみてくれ。 左右に分割されたエディタウインドウに、テキストエディタとターミナルが並んでいるのがお分かりになられるでしょうか！！ なにそれ？ これは、先日リリースされた Version 1.58 (June 2021) に含まれる以下のアップデートによるものです。 Terminals in the editor area Terminals can now be created in or moved to the editor area, enabling a multi-dimensional grid layout that persists and remains visible regardless of panel state. Terminals in the editor area - Integrated Terminal - Visual Stu

はじめに アノテーションの髙嶋です 先日、私はこんな記事を書いてみました。 VSCode＋WSL2＋Dockerでコンテナ環境へ接続してみた 今回はその記事の中に書いた手順の中で、ちょっとだけ手間だなーと感じていたことを解消してみたお話です。 上記の記事を未読の方は先に一読していただいた方が、今回の内容が伝わるようになるかと思います。 手間だと感じていた内容 それはVSCodeからWSLへ接続するために"Open Folder In WSL..."をクリックした時に初期表示されるフォルダーが、毎回"\\wsl$\docker-desktop-data"になってしまう、というものでした。 私が選択したいフォルダーは"\\wsl$\Ubuntu-20.04"配下のため、そこから毎回フォルダーを移動するのが地味に手間でした。 直近で開いていたコンテナであれば、スタート画面から選択できるのですが、

はじめに アノテーションの髙嶋です。 私は業務の一環としてプログラムを書いていますが、最近ではコーディング/テストの環境はコンテナを使用して構築しています。 コンテナを使うことで、アプリケーションごとに必要な環境を、それぞれ分けて構築することができるためです。 今回はVisual Studio CodeからDockerのコンテナを起動し、接続するまでの手順を記載しています。 前提条件 実行に必要なアプリケーションはすべてインストール済みの前提としています。 今回の実行環境は下記です。 OS：Windows 10 Pro(20H2) Visual Studio Code：1.56.2 (以降、VSCodeと記述) ※拡張機能として「Remote-WSL」と「Remote-Containers」を使用 Docker：20.10.6 Docker Compose：1.29.1 WSL2：Ubun

テックタッチのバックエンドエンジニアの taisa です。 社内勉強会で、Visual Studio Code（以降 VSCode と記載）ナレッジ共有会を実施したのでその内容を紹介します。 今回の趣旨は「VSCode で各自がよく使う機能やショートカット、ちょっとしたノウハウを共有することで開発効率を向上させたい」というものです。自分自身 VSCode を使いこなせておらず、他のメンバーの使い方に興味がありました。共有会では、みんなで順番に画面共有しながら進めていきました。 コマンドパレット編 シンボル検索編 ショートカット編 最近開いたプロジェクトを開く 最近開いたファイルを開く / ファイルを検索する サイドバーを開く/ 閉じる、パネルを開く/ 閉じる、エクスプローラを開く 指定のエディタに移動する Grep する 特定の文字列を選択して置換する 定義へ移動、直前の場所に戻る、直前の

新卒研修中の森田です。 VScodeを使用してよくコードを書いていたので、LambdaもVScodeを使用して効率良く開発できないかなと思って軽い気持ちで始めたら、少し詰まったので共有します。 行いたいこと 前述した通り、VScodeを使用してLambdaの開発を行うことです。 本記事では、環境構築、ローカルでの実行、デプロイまでを行います！ 環境構築 mac OS Catalina にて行います。 Pythonのインストール 今回Lambdaのランタイムは Python とするのでまずは、Pythonをインストールします。 私の場合、Jupyterもいずれ使用したいのでMinicondaを用いてPythonをインストールします。 以下よりインストーラーをダウンロードしてインストールします。 https://docs.conda.io/en/latest/miniconda.html ba

はじめに この記事では、IT エンジニアである/ないに関係なく、Visual Studio Code (以下、VS Code) をこれから初めて使い始める人が、最初に入れておくと後々便利になるだろうと思われる拡張機能を紹介しています。 拡張機能 (Extension) とは、サードパーティー製の追加機能のようなものであり、誰でも自由に開発・公開することができるようになっているものです。VS Code は無償で提供されているテキストエディタですが、それだけでは不便というユーザーの悩みを解消してくれるものです。 (という立ち位置で存在していた当初でしたが、最近は標準機能のみでも最早テキストエディタという範疇を超えている気がしなくもないです) まだ拡張機能を使い始められていない/使いこなせていないという方は、是非この記事を参考に、VS Code の拡張機能を使い始めるきっかけにしてもらえれば幸い

こんにちは、CX事業本部の若槻です。 以前、VS Codeに導入しているPrettierの保存時の自動フォーマット機能がMarkdownファイルの場合は無効となる設定をしました。 Visual Studio CodeでPrettierのフォーマット機能を言語単位で無効にする | DevelopersIO しかし、最近Prettierをバージョン6.3.1にアップデートしたところ、この言語単位のフォーマット無効設定が動作せず、Markdownのファイルにも保存時にフォーマットが適用されるようになってしまいました。 そこで今回は、このPrettierの言語単位の無効設定を再度動作するようにしてみました。 原因調査、対処方法の確認 原因はすぐに分かりました。 VS CodeでPrettierの設定を開き、Disable Languagesの設定を見てみると、下記のような警告が出ていました。 Th

Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter. テキスト校正くん VS Code上でテキストファイル・Markdownファイル・Re:VIEWファイルの日本語の文章をチェックする拡張機能です。該当のファイルを開いた時、更新した時に自動で校正のチェックを行い、文章内の問題のある箇所をマーキングし問題パネルにエラー内容を表示します。 メールの文章を作成する際やブログ記事の文章を作成する際などに、ご使用いただくと便利です。 ウェブ業界の専門用語を含め、一般的な文章のルールに沿って主に以下のようなチェックを行います。 「ですます」調と「である」調の混在 誤検出の回避のため「である調」の判定は明らかに常体な「〜である」のみとなっています。 ら抜き言葉 二重否定 同じ助詞の連続使用（※初