はじめに アノテーションの髙嶋です。 私は業務の一環としてプログラムを書いていますが、最近ではコーディング/テストの環境はコンテナを使用して構築しています。 コンテナを使うことで、アプリケーションごとに必要な環境を、それぞれ分けて構築することができるためです。 今回は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
と入力します。 ググったところこれだけしか書いていない記事が多かったのですが、もう一つ作業が必要です。 2.資格情報マネージャーからログイン情報を削除(ログアウト) この時点では旧ユーザー名でGithubにログインしたままの状態ですので、一旦ログアウトして新ユーザーでログインし直さないといけません。結構見つけにくいところにありました…。 まずコントロールパネルの「ユーザーアカウント」 次に「Windows資格情報の管理」 Windowsに保存されている認証情報の一覧っぽいものの中に、git:https://github.comがあります。これを削除します。 これでGithubへのログイン状態がリセットされます。 3.pushするとユーザー名・パスワードの入力を求められる この状態でpushするとgithubログイン画面の小窓が開きますので、使いたいユーザー名・パスワードを入力してログインし
Visual Studio Code でインデントの変換や切り替えのショートカット Visual Studio Code (以下 VSCode) でファイルを開いたらタブ・インデントだったので、スペース・インデントに変換したい。 でも、メニューから(マウス操作)でなくショートカットで変換・変更できないか。 「VSCode タブ スペース 変換」でググっても、「設定からインデント設定を変更する」とか、「\tをスペースへ文字列置換する」とかしか出てこなかったので、自分のググラビリティのため。 TL; DR (今北産業) デフォルトでショートカットが割り当てられていないので、以下の手順で現在のドキュメントのインデントを変換できます。 F1 を押す indent と入力し indentationToSpaces もしくは indentationToTabs を選択 Enter 私は 「F1 レース
この記事はcloudpack あら便利カレンダー 2019 の2日目です。 誕生秘話 はこちらです。 私は今年からの参戦になります。 この記事では、あら便利な拡張機能の紹介をしたいと思います。 Gitのコミット履歴が複雑になってしまった場合に、コミットグラフが絡み合ってしまい履歴が追いづらい状態になってしまうことありますよね? そこまで酷くはないけれど、ぱっと見で履歴がちゃんと終えるかというと微妙かも...という時はまあ普通にあります そこで、最近、Visual Studio CodeのGit Graph というあら便利な拡張機能を見つけまして、これがなかなか綺麗にgitgraphを出してくれるので紹介したいと思います 使い方 インストール あるいは、GUIからインストール 起動 インストールが完了すると、VCSのパネルにボタンが追加されるので、これを押すだけです。 ボタン押下で新たなタブ
どうも!大阪オフィスの西村祐二です。 最近、AWS LambdaをTypeScriptで書く機会が増えてきました。 また、Serverless Frameworkを使う機会も個人的に多少あります。 そこで今回はそのVSCode上でAWS Lambda(TypeScript)をデバッグする方法を紹介したいと思います。 どうやるか 前提として、Serverless Frameworkのaws-nodejs-typescriptテンプレートで雛形を作成したとして進めていきます。 VSCodeのデバッグ設定で下記の設定をすることで、VSCode上で、Serverless FrameworkのAWS Lambda(TypeScript)をデバッグすることができます。 ポイントはsmartStepをtrueにしておくことです。そうしないと、ブレークポイントで止まらずに処理が終了してしまいます。 ファン
タイプスクリプトで作っているプロジェクトで、VSCode でデバッグを有効にしてみたかったので、やってみた。 SourceMap tsconfigに SourceMap の定義を有効にする。これにより *.js.map ファイルができて、ブレークポイントが設置できるようになる。 tsconfig.json { "compilerOptions": { "target": "es6", "module": "commonjs", "sourceMap": true } } Launch.json VSCode のDebug から下記のようにして新しいデバッグの定義を作る。 Node-Mocha を選択してテンプレを作る。 launch.json ができるので次のようにしてみる。 { // Use IntelliSense to learn about possible attributes.
はじめに 最近,職場の若手が自分も愛用しているVSCodeを使って開発をがんばっています.それに触発されてVSCodeでの開発環境についてまとめたものを書いていきたいと思います.まわりにはターミナル上でEmacsやVimを使ってコードを書いているプログラマも多い環境なので,なるべくマウスを使わずにキーボード操作だけで開発できるようにまとめます. https://code.visualstudio.com やりたいこと 次にあげる内容をキーボード操作で行えるようにするのが目標です. 指定したファイルを素早く開く 関数やクラスなどのシンボルで検索する 定義にジャンプしたり戻ったりする 手軽にC/C++をビルドして,素早くコンパイルエラーの場所を表示する 前提としてがっつり設定などをカスタマイズするというのではなく,初心者向けになるべく簡単に環境を立ち上げられる内容でまとめていきます.またビルド
tl;dr 昔は Windows で Git を使うのは辛かったが、現在は悪くない Scoop で簡単に構築できる 操作は CLI, 閲覧は GUI クライアントで使い分けている GUI クライアントは、 VS Code がオススメ 言わずと知れた、バージョン管理システム。 Windows と Git そもそも Git は、 Unix/Linux 文化圏で生まれてきたもので、Windows 対応はされてはいるがイマイチな時期が長く続いた。 イマイチだった点 Git を導入するために、Git 以外の登場人物が多く辛い ( 特に新人 Windowser には msys Git Bash ssh 情報が色々あって辛い 3~4 年前までは、まだ Cygwin 派の記事もあった Windows への導入の記事なのに、何となく Linux の知識ある前提だったり 鍵生成が辛い putty 形式 ? O
以前の投稿でVisual Studio CodeとMarkdown Preview Enhanced環境を組み合わせの便利さを紹介しました。 議事メモを作成にマークダウンを使うと、議論が構造化されて表示されるので、非常にわかりやすくなりますね。みなさんもお使いかと思います。本稿では、そこに、更にVisual Studio Codeにマークダウン用のスニペットを登録しておくことを提案します。 出席者の議論をフォーカスさせる図や表がスムーズに呼び出せますので、効率的な会議を行うことができます。そんな爆速会議に便利なスニペットをいくつか紹介します。 以下ではVisual Studio CodeエディタとMarkdown Preview Enhancedプラグインが前提となっております。環境構築には以前の投稿をご参照ください。 1.会議を一気に立ち上げる:議事録スニペット まずは議事録のテンプレー
拡張機能はできるだけ最小限にしておきたい派です。そんな自分がインストールして使い勝手がよかった拡張機能をいくつか紹介します。 Auto Close Tag https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag その名の通りClose Tagを自動で入力してくれます。単純にタイピングが減るので肉体的・心理的負担の軽減にもなります。 Auto Rename Tag https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag タグを修正した際にClose Tagも合わせて修正してくれます。これも手間が減って便利です。 Bracket Pair Colorizer 2 https://ma
Visual Studio Code & TypeScriptを使い、ブラウザ用の開発設定についてのメモです。以下のような条件の開発設定です。 複数のTypeScriptファイルに分割して開発 TypeScriptのコードは、Node.jsからも利用できる(Module対応) Visual Studio Codeからデバッグできる async/await構文に対応する この記事で扱う環境のバージョンは以下の通りです。 Visual Studio Code : 1.10.1 Node : 6.5.0 TypeScript : 2.2.1 環境構築 基本的な環境構築方法(Visual Studio CodeとNode.js等のセットアップ)については、筆者のページにまとめていますので、こちらをご連ください。 TypeScript関連のセットアップが終わったら、Visual Studio Cod
「Visual Studio Code(略称:VS Code)」はMicrosoftが提供している無償で高機能なエディターです。標準でも十分な機能は備わっていますが、拡張機能をインストールすることで、より使いやすく自分にあったエディターへとカスタマイズできます。 本記事では、HTMLコーダーやフロントエンドエンジニアに役立つ拡張機能を紹介します。 1. IntelliCode IntelliCodeはMicrosoft謹製の公式プラグイン。AI支援による次世代のコード補完がJavaScriptやTypeScriptで利用できるようになります。APIの一覧がアルファベット順に提示されるのではなく、利用する可能性の高いAPIがAIによって予測されます。 コード補完の様子を次のスクリーションショットでご覧ください。入力候補の「★」マークが付いているところが、補完候補になっているところです。人工知
2018/12/10 コードフォーマットに関してPrettierの情報を追記 TypeScriptにある便利機能をVisual Studio Code(以下、VSCode)がいい感じに可視化してくれるので、この二つの組み合わせは非常に良いです。 その中でも個人的に良いと思った機能と設定方法を紹介します。 なお、動作確認は以下のバージョンで行なっています。 Node.js: 6.11.1 TypeScript: 2.4.2 VSCode: 1.14.2 tslint: 5.5.0 誤りを教えてくれる Compiler Optionsの--strictを有効にする https://www.typescriptlang.org/docs/handbook/compiler-options.html --strictを有効にすることで、Compiler Optionsの以下を全て有効にしたことと同
Visual Studio Codeを使い倒そう! ~プログラミングから機械学習、クラウド連携、遠隔ペアプロまで~ 2018/02/24のOSC 2018 Tokyoで使用した資料です。Read less
You can find (just about) anything on Medium — apparently even a page that doesn’t exist. Maybe these stories will take you somewhere new?
Version 1.91 is now available! Read about the new features and fixes from June. Key Bindings for Visual Studio Code Visual Studio Code lets you perform most tasks directly from the keyboard. This page lists out the default bindings (keyboard shortcuts) and describes how you can update them. Note: If you visit this page on a Mac, you will see the key bindings for the Mac. If you visit using Windows
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く