はじめに Visual Studio Codeの環境を整える記事をいくつか書いていますが、Markdownについてもまとめてみようと思います。 前提となる環境の情報 Windows 10 ver.20H2 Visual Studio COde 1.63.2 実現したい機能 Markdownで気持ちよく開発や文書作成を行えるようにするために、次の機能をセットアップします。 プレビュー 標準機能 ファイルエクスプローラー 標準機能 ショートカット 拡張機能を活用 エクスポート HTMLとPDFを出力したい。拡張機能を活用 Marpでプレゼンテーション資料を作りたい 拡張機能を活用 正しい文法でMarkdownを記述したい 拡張機能を活用 ※Markdownで「正しい文法」というのはなかなか難しいですが、他者と共同作業をするときに、同じルールの下で文章を作成できるようになることを目指します。 1

はじめに Microsoftの提供するVisual Studio Code（VSCode）は、2015年の最初のリリースから、今では開発用エディタの定番の座を占めるまでになりました。これには、無償で使えることも大きいですが、何よりエディタとしての使いやすさ、そしてさまざまな拡張機能によっていくらでも使い勝手を向上させたり、利用の領域を拡げられたりすることも大きいでしょう。本連載では、このVSCodeにフォーカスし、基本的な使い方から拡張機能の活用、そして本格的な開発現場での利用を想定した高度な機能までを紹介していくことで、読者がVSCodeマスターになるお手伝いをします。 対象読者 テキストエディタメインで開発してきた方 Visual Studioより軽い環境が欲しいと考えている方 Visual Sudio Codeをもっと使いこなしたい方 必要な環境 本記事の内容は、以下の環境で動作を確

Markdown ファイルのプレビューを行おうとしたら、 Web ビューの読み込みエラー: Error: Could not register service worksers: InvalidstateError: Failed to register a ServiceWorker: The document is in an invalid state.. と出てきてらちがあかない。 調べるとWindows/Mac だとタスクを止めて vscode を立ち上げ直すという方法が紹介されていた。 Linux ではどうなのかな? 環境 Ubuntu Linux 22.04 LTS Visual Studio Code 1.76.2 タスクを調べる vscode のアクティブウィンドウをすべて閉じたあと、ps コマンドで調べてみる。 $ ps -auxww | grep vscode nan

Jupyterは、オープンソースで開発が進められているプロジェクト（Project Jupyter）です。Pythonなどのプログラミング言語で記述された実行可能なコードと、Markdownで記述されたコードに関連ドキュメントを、「ノートブック」と呼ばれる単一のファイルにまとめることが可能な環境の構築を目指しています。 このプロジェクトの代表的な成果物が、コードとドキュメントをひとまとめに扱えるノートブックをWebブラウザ上で実現するWebアプリ「Jupyter Notebook」や「JupyterLab」です。Visual Studio Code（以下、VS Code）にPython拡張機能とJupyter拡張機能をインストールすることで、このノートブック環境をVS Code内で実現できます。今回はその基本を見ていくことにしましょう。 必要なもの 以前のバージョンのVS CodeではPy

はじめに Microsoft社が開発しているエディタVisualStudioCodeのversion 1.48にて設定同期機能（Settings Sync）が実装され話題となりました。 VSCodeには、Stable release（Stable版）と、Insiders release（Insiders版）という２つのバージョンがあります。Insiders版で先に新機能が試験的に搭載され、安定したらStable版にも追加されるといった形で開発が進められています。設定同期機能はもともとInsiders版で試験的に実装されており、昨年アップデートでStable版でも使えるようになりました。 普段、私達がよく目にする青いVSCodeはStable releaseとなり、安定版と呼ばれています。一方Insider版は少し緑がかったアイコンをしており、色で区別がつくようになっています。 それぞれの

PCの買い替えなどで、新たにソフトを入れなおして一つ一つ再設定していく作業… 面倒ですよね。 私事ですが、つい先日M1チップ搭載のMacbook Airを購入して、まさに環境移行に時間を費やすという状況がありました。 そこで何かいい方法がないかと調べたところ、クラウド同期による便利な方法を見つけた次第です。 という事で、今回は表題の通りVScodeの設定をそのまま同期して拡張機能や設定を自動で揃える方法をご紹介したいと思います。 OfficeやAdobeのソフトなども何でもクラウドでデータ同期などが当たり前の昨今、こういった環境移行が簡単に行えるというのはまさにクラウドの恩恵ですね。 Windows/Mac問わず移行できるので、同じようにVScodeの環境移行に困ってる方は是非ご参考頂ければ幸いです。 ではやっていきましょう。 VScode標準の機能で設定の移行が可能 今回の環境移行の方法

2021年11月11日時点のWindows10での情報です。 Visual Studio Code の設定を同期する Visual Studio Code（vscode）の「Settings Sync」という機能を使用して、 vscodeの設定を他のPCと同期することができます。 Visual Studio Code 公式ドキュメント 同期できるのは以下の項目です。 設定 キーボードショートカット ユーザースニペット 拡張機能 UIの状態 GitHubアカウント か Microsoftアカウントを使用して同期しますので、 あらかじめどちらかを用意しておきます。 この記事ではGitHubアカウントを使用して同期する方法で進めていきます。 GitHubのアカウント作成については、以下の記事を参照してください。 GitとGitHub GitHubアカウントを作成する まずは同期元となる1台目のP

侍テラコヤは、【無料】で始められる日本最安級のサブスク型オンラインITスクールです。つまづいた時にエンジニアに相談できるQA掲示板、勉強を習慣化できる学習ログ、サービス開発しながら学べる学習教材など、エンジニアになるための機能が盛り沢山！

Visual Studio Codeのデフォルト文字コードはUTF-8となっており、日本語のShift-JISなどのテキストファイルを開くと文字化けして表示されます。 拡張子ごとに文字コード設定を変更などといったことは面倒なので、VSCodeに文字コードを自動判別してもらう方が楽です。以下設定方法です。 VisualStudio Codeで文字コード自動判別設定方法 ファイル　＞　ユーザ設定　＞　設定　をクリックする。 表示された設定ウインドウの上部にあるテキストボックスに「files」と入力。 リストアップされた中から「Files: Auto Guess Encoding」の項目を探し出し、チェックを入れる。 文字化け表示されているファイルは一旦閉じてから再度開くと文字化けが解消されている。 ファイルの内容によっては自動判別がうまくいかない場合ももちろんあるが、大抵はここの設定で問題ない

管理人が、Visual Studio Codeを使ってみて憶えておくと良いと思ったことを5つ書きます。 設定画面へのショートカットはCtrl＋，（カンマ） コードエディタは使っているうちに「ああしたい」「こうしたい」とカスタマイズしたくなります。 遅かれ速かれ必ず設定画面を開くことになるので、いちいちファイルメニューから起動では面倒です。 設定画面へのショートカット Ctrl　＋　 , （カンマ） ぜひ憶えておきましょう。 マウスホイールのフォント拡大縮小をONにしておく 最近のパソコンでは当たり前の機能となった気がする《マウスホイールによる文字の拡大縮小》ですが、Visual Studio Codeではデフォルト設定ではありません。素直にONにしておきましょう。 以下を参考にしてください。

VS Code(Visual Studio Code)とは、Microsoftが開発しているソースコードエディタです。効率的にプログラミングできるよう、様々な機能を提供しています。Python用の拡張機能も用意されており、Pythonのコーディングを行うのに非常に有用です。 この記事では、VS CodeでPythonの開発環境を構築する方法を解説していきます。 Anacondaのインストール(Windows/Mac編) Anaconda（アナコンダ）とは、データサイエンスに特化したプラットフォームで、データサイエンスに適したライブラリや便利な機能を有しています。 Anacondaの中には、PythonやRなどのデータサイエンスに良く利用される言語のライブラリも含まれています。スクレイピングでデータ取得後にデータを活用していく際にも、非常に便利になります。 Anacondaは無料で利用するこ

記事の動機 VSCodeの拡張機能何入れてますか？と聞かれることが多いので忘備録的に残します。 Language Japanese Language Pack for Visual Studio Code 日本人なので、日本語が母国語です。 英語のUIでも操作に支障はありませんが、一眼でどういう挙動をするのか理解できる状態は作業の効率につながります。 Linter, Formatter ESLint javascript系のlinterです。 ファイルを保存時にプロジェクトにある設定ファイルを読み込んで自動修正をしてくれたりしてくれます。（要設定） Prettier - Code formatter いろんなファイルをフォーマットしてくれるやつです。 ファイルを保存時にプロジェクトにある設定ファイルを読み込んで自動修正をしてくれたりしてくれます。（要設定） Stylelint スタイルにま

背景 node.jpを触ってみようと思いました。そして折角なのでvscodeで開発しようと思いましたが、vscodeの事をあまり分かってなかったのでこの機会に勉強しました。なお私はバッチファイルなどしか書けないエンジニアで、モダン開発の知識は皆無です。このエントリは自分用のメモで特にみなさんに新しい知識を提供できるものではありません。 vscodeとは MS製のソースコードエディタ。人気 Visual Studio Code – Code Editing. Redefined 従来型のテキストエディタとの違い さて、私は旧来からのサクラエディタ使いである。 サクラエディタ 結論から言うと、秀丸やterapad、notepad++など、従来のテキストエディタを使い慣れていた人が最近のソースコードエディタを使う場合、考え方を変える必要がある。テキストエディタの延長線上にあり、テキストエディタよ

Visual Studio Code ではワークスペースを作成しフォルダを追加することで、複数のフォルダを同時に開くことができます。また作成したワークスペースは保存しておくことができるので、次回 Visual Studio Code を利用するときにワークスペースを開けば簡単に前回と同じフォルダを開いた状態で作業を行うことができます。ここではワークスペースを使って複数のフォルダを同時に開く方法について解説します。 Visual Studio Code では通常複数のフォルダを同時に開くことはできませんが、ワークスペースを作成しフォルダを追加することで複数のフォルダを同時に開くことができます。 それでは実際に試してみます。 Visual Studio Code を起動し、最初のファルダを開いてください。(フォルダの開き方については「フォルダを開く/フォルダを閉じる」を参照されてください)。

今回はVscodeの拡張機能「Project Manager」の設定方法を紹介します。ワークスペースに複数のプロジェクトを表示させて、その状態をいつでも呼び出せる環境を作れる拡張機能です。 説明する環境は以下の通りです。 macOS Mojar v10.14.6Visual Studio Code v1.39.2 Vscodeの拡張機能「Project Manager」の使い方 過去のプロジェクトを参考にしながら作業することや、プロジェクトフォルダと画像フォルダを並べながら作業することが重宝する拡張機能。まずは「Project Manager」をインストールしましょう。 拡張機能「Project Manager」をインストール Project Managerと検索すると以下のように表示されるので「インストール」を押します。 ワークスペースに表示させるフォルダを選択する まずはワークスペース

はじめに 皆さんVisual Studio Code(以下VSCode)使ってますか？ 私はメインで使っているのですが、自分なりにしっくりくる設定や拡張機能がある程度揃ってきたので公開しちゃいます。 おすすめ設定だけではなく、おすすめの機能もできる限り紹介したいと思いますので、最後までぜひお付き合いください。 ※プログラミング言語固有の設定の解説は軽めですのでご了承ください。 GIF画像が小さい場合は、クリックして頂けると拡大して表示が可能です デフォルト機能編 Local History機能 Gitは非常に便利なので、皆さん使われていると思います。 Gitはコミット単位で履歴が管理できますが、保存単位で履歴が見れると嬉しいな、保存単位で復元できると嬉しいな、と思うことはないでしょうか。 私はVSCodeは自動保存をオフにして、手動で保存するので、保存単位で履歴が見れると嬉しいなと思うこと

生産性向上が叫ばれる時代ですが、お手軽な手段としてExcelマクロによる業務自動化というケースがあるかと思います。 Excelマクロは自動記録して再生する程度であればよいのですが、多くのケースで記録したコード（VBA）の編集を伴うことが多いです。 編集する際に残念なのが、Excelのコード編集機能の弱さ！10年以上進化がないと言っても過言ではないと思います。 そこでこの記事では、現在のコード編集の主流であるVisual Studio Code （以下VS Code）をコード編集時のエディタとして使用しつつ、 Excel単独ではできないgit等による構成管理まで行うことを目標に簡単な手順を紹介します。 ネット上での先人たちの記事を参考にしつつも、私はこの手順で VS Code によるコード編集を行っています。未だに無くならないExcelマクロによる業務改善においても現代風なコード開発ができる

連載目次 前回はVisual Studio Code（以下、VS Code）でJupyterするための基本について見ました。今回はJupyter拡張機能が提供する対話環境と、それを使ったノートブックのデバッグについて見ていきます。 Jupyter対話環境 Python拡張機能には［Python: REPLを開始］コマンドがあります。これはパネル領域にPythonの対話環境を開くものです。

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