VSCodeをプログラミングエディタとして強化しよう！ 便利な設定や拡張機能を紹介
はじめに Microsoftの提供するVisual Studio Code（VSCode）は、2015年の最初のリリースから、今では開発用エディタの定番の座を占めるまでになりました。これには、無償で使えることも大きいですが、何よりエディタとしての使いやすさ、そしてさまざまな拡張機能によっていくらでも使い勝手を向上させたり、利用の領域を拡げられたりすることも大きいでしょう。本連載では、このVSCodeにフォーカスし、基本的な使い方から拡張機能の活用、そして本格的な開発現場での利用を想定した高度な機能までを紹介していくことで、読者がVSCodeマスターになるお手伝いをします。 対象読者 テキストエディタメインで開発してきた方 Visual Studioより軽い環境が欲しいと考えている方 Visual Sudio Codeをもっと使いこなしたい方 必要な環境 本記事の内容は、以下の環境で動作を確
VScode で Web ビューの読み込みエラー - Qiita
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
VS CodeでJupyterしてみよう
Jupyterは、オープンソースで開発が進められているプロジェクト（Project Jupyter）です。Pythonなどのプログラミング言語で記述された実行可能なコードと、Markdownで記述されたコードに関連ドキュメントを、「ノートブック」と呼ばれる単一のファイルにまとめることが可能な環境の構築を目指しています。 このプロジェクトの代表的な成果物が、コードとドキュメントをひとまとめに扱えるノートブックをWebブラウザ上で実現するWebアプリ「Jupyter Notebook」や「JupyterLab」です。Visual Studio Code（以下、VS Code）にPython拡張機能とJupyter拡張機能をインストールすることで、このノートブック環境をVS Code内で実現できます。今回はその基本を見ていくことにしましょう。 必要なもの 以前のバージョンのVS CodeではPy
WindowsとM1 MacのVSCode同期戦略
はじめに Microsoft社が開発しているエディタVisualStudioCodeのversion 1.48にて設定同期機能（Settings Sync）が実装され話題となりました。 VSCodeには、Stable release（Stable版）と、Insiders release（Insiders版）という２つのバージョンがあります。Insiders版で先に新機能が試験的に搭載され、安定したらStable版にも追加されるといった形で開発が進められています。設定同期機能はもともとInsiders版で試験的に実装されており、昨年アップデートでStable版でも使えるようになりました。 普段、私達がよく目にする青いVSCodeはStable releaseとなり、安定版と呼ばれています。一方Insider版は少し緑がかったアイコンをしており、色で区別がつくようになっています。 それぞれの
VScodeの設定を同期してWin/Mac拡張機能や設定を揃える - ABCウェブエンジニアblog
PCの買い替えなどで、新たにソフトを入れなおして一つ一つ再設定していく作業… 面倒ですよね。 私事ですが、つい先日M1チップ搭載のMacbook Airを購入して、まさに環境移行に時間を費やすという状況がありました。 そこで何かいい方法がないかと調べたところ、クラウド同期による便利な方法を見つけた次第です。 という事で、今回は表題の通りVScodeの設定をそのまま同期して拡張機能や設定を自動で揃える方法をご紹介したいと思います。 OfficeやAdobeのソフトなども何でもクラウドでデータ同期などが当たり前の昨今、こういった環境移行が簡単に行えるというのはまさにクラウドの恩恵ですね。 Windows/Mac問わず移行できるので、同じようにVScodeの環境移行に困ってる方は是非ご参考頂ければ幸いです。 ではやっていきましょう。 VScode標準の機能で設定の移行が可能 今回の環境移行の方法
Visual Studio Code の設定を、他のPCと同期する
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
文字化け対策：VSCodeで文字コードを自動判別する設定
Visual Studio Codeのデフォルト文字コードはUTF-8となっており、日本語のShift-JISなどのテキストファイルを開くと文字化けして表示されます。 拡張子ごとに文字コード設定を変更などといったことは面倒なので、VSCodeに文字コードを自動判別してもらう方が楽です。以下設定方法です。 VisualStudio Codeで文字コード自動判別設定方法 ファイル ＞ ユーザ設定 ＞ 設定 をクリックする。 表示された設定ウインドウの上部にあるテキストボックスに「files」と入力。 リストアップされた中から「Files: Auto Guess Encoding」の項目を探し出し、チェックを入れる。 文字化け表示されているファイルは一旦閉じてから再度開くと文字化けが解消されている。 ファイルの内容によっては自動判別がうまくいかない場合ももちろんあるが、大抵はここの設定で問題ない
Visual Studio Codeを使う上で憶えておくと良い5つのこと
管理人が、Visual Studio Codeを使ってみて憶えておくと良いと思ったことを5つ書きます。 設定画面へのショートカットはCtrl＋，（カンマ） コードエディタは使っているうちに「ああしたい」「こうしたい」とカスタマイズしたくなります。 遅かれ速かれ必ず設定画面を開くことになるので、いちいちファイルメニューから起動では面倒です。 設定画面へのショートカット Ctrl ＋ , （カンマ） ぜひ憶えておきましょう。 マウスホイールのフォント拡大縮小をONにしておく 最近のパソコンでは当たり前の機能となった気がする《マウスホイールによる文字の拡大縮小》ですが、Visual Studio Codeではデフォルト設定ではありません。素直にONにしておきましょう。 以下を参考にしてください。
初心者でも簡単！VS CodeでPython開発環境の構築 - ビジPy
VS Code(Visual Studio Code)とは、Microsoftが開発しているソースコードエディタです。効率的にプログラミングできるよう、様々な機能を提供しています。Python用の拡張機能も用意されており、Pythonのコーディングを行うのに非常に有用です。 この記事では、VS CodeでPythonの開発環境を構築する方法を解説していきます。 Anacondaのインストール(Windows/Mac編) Anaconda（アナコンダ）とは、データサイエンスに特化したプラットフォームで、データサイエンスに適したライブラリや便利な機能を有しています。 Anacondaの中には、PythonやRなどのデータサイエンスに良く利用される言語のライブラリも含まれています。スクレイピングでデータ取得後にデータを活用していく際にも、非常に便利になります。 Anacondaは無料で利用するこ
私がVSCodeに入れている拡張機能
記事の動機 VSCodeの拡張機能何入れてますか？と聞かれることが多いので忘備録的に残します。 Language Japanese Language Pack for Visual Studio Code 日本人なので、日本語が母国語です。 英語のUIでも操作に支障はありませんが、一眼でどういう挙動をするのか理解できる状態は作業の効率につながります。 Linter, Formatter ESLint javascript系のlinterです。 ファイルを保存時にプロジェクトにある設定ファイルを読み込んで自動修正をしてくれたりしてくれます。（要設定） Prettier - Code formatter いろんなファイルをフォーマットしてくれるやつです。 ファイルを保存時にプロジェクトにある設定ファイルを読み込んで自動修正をしてくれたりしてくれます。（要設定） Stylelint スタイルにま
vscodeの利用に必須な”ワークスペース”の概念 | 今日も元気にIT屋さん
背景 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」の使い方 - 複数のフォルダを同時に開く
今回はVscodeの拡張機能「Project Manager」の設定方法を紹介します。ワークスペースに複数のプロジェクトを表示させて、その状態をいつでも呼び出せる環境を作れる拡張機能です。 説明する環境は以下の通りです。 macOS Mojar v10.14.6Visual Studio Code v1.39.2 Vscodeの拡張機能「Project Manager」の使い方 過去のプロジェクトを参考にしながら作業することや、プロジェクトフォルダと画像フォルダを並べながら作業することが重宝する拡張機能。まずは「Project Manager」をインストールしましょう。 拡張機能「Project Manager」をインストール Project Managerと検索すると以下のように表示されるので「インストール」を押します。 ワークスペースに表示させるフォルダを選択する まずはワークスペース
VSCodeおすすめ設定大公開！！おすすめ拡張機能も - Qiita
はじめに 皆さんVisual Studio Code(以下VSCode)使ってますか？ 私はメインで使っているのですが、自分なりにしっくりくる設定や拡張機能がある程度揃ってきたので公開しちゃいます。 おすすめ設定だけではなく、おすすめの機能もできる限り紹介したいと思いますので、最後までぜひお付き合いください。 ※プログラミング言語固有の設定の解説は軽めですのでご了承ください。 GIF画像が小さい場合は、クリックして頂けると拡大して表示が可能です デフォルト機能編 Local History機能 Gitは非常に便利なので、皆さん使われていると思います。 Gitはコミット単位で履歴が管理できますが、保存単位で履歴が見れると嬉しいな、保存単位で復元できると嬉しいな、と思うことはないでしょうか。 私はVSCodeは自動保存をオフにして、手動で保存するので、保存単位で履歴が見れると嬉しいなと思うこと
Visual Studio Code で Java の開発環境を構築する – Tk2 と kpdn の廻る日常
使用した環境 Windows 10 Professional 64bit Visual Studio Code : 1.55.2 (user setup) 前提条件 Visual Studio Code(以降 VSCode) がインストールされていること。 ※VSCode のインストール方法についてはこちらを参照。 バージョンが違ってもインストール方法は変わらないので問題ないと思いますが、拡張機能インストール後に表示されるイメージ等が違う可能性があります。 作業内容 VSCode で Java の開発環境を構築するには、以下の作業を行う必要があります。 VSCode の拡張機能 Java Extension Pack のインストール 拡張機能で必要な JDK のインストール (バージョンは Java 11 以上) 後ほどインストールする拡張機能 「Language Support for
Excelマクロ（VBA）をVSCodeで編集したい
生産性向上が叫ばれる時代ですが、お手軽な手段としてExcelマクロによる業務自動化というケースがあるかと思います。 Excelマクロは自動記録して再生する程度であればよいのですが、多くのケースで記録したコード（VBA）の編集を伴うことが多いです。 編集する際に残念なのが、Excelのコード編集機能の弱さ！10年以上進化がないと言っても過言ではないと思います。 そこでこの記事では、現在のコード編集の主流であるVisual Studio Code （以下VS Code）をコード編集時のエディタとして使用しつつ、 Excel単独ではできないgit等による構成管理まで行うことを目標に簡単な手順を紹介します。 ネット上での先人たちの記事を参考にしつつも、私はこの手順で VS Code によるコード編集を行っています。未だに無くならないExcelマクロによる業務改善においても現代風なコード開発ができる
社内でよく使う VSCode の機能紹介 - Techtouch Developers Blog
テックタッチのバックエンドエンジニアの taisa です。 社内勉強会で、Visual Studio Code（以降 VSCode と記載）ナレッジ共有会を実施したのでその内容を紹介します。 今回の趣旨は「VSCode で各自がよく使う機能やショートカット、ちょっとしたノウハウを共有することで開発効率を向上させたい」というものです。自分自身 VSCode を使いこなせておらず、他のメンバーの使い方に興味がありました。共有会では、みんなで順番に画面共有しながら進めていきました。 コマンドパレット編 シンボル検索編 ショートカット編 最近開いたプロジェクトを開く 最近開いたファイルを開く / ファイルを検索する サイドバーを開く/ 閉じる、パネルを開く/ 閉じる、エクスプローラを開く 指定のエディタに移動する Grep する 特定の文字列を選択して置換する 定義へ移動、直前の場所に戻る、直前の
VS Code の使い始めに入れておくと便利な拡張機能 10 選
はじめに この記事では、IT エンジニアである/ないに関係なく、Visual Studio Code (以下、VS Code) をこれから初めて使い始める人が、最初に入れておくと後々便利になるだろうと思われる拡張機能を紹介しています。 拡張機能 (Extension) とは、サードパーティー製の追加機能のようなものであり、誰でも自由に開発・公開することができるようになっているものです。VS Code は無償で提供されているテキストエディタですが、それだけでは不便というユーザーの悩みを解消してくれるものです。 (という立ち位置で存在していた当初でしたが、最近は標準機能のみでも最早テキストエディタという範疇を超えている気がしなくもないです) まだ拡張機能を使い始められていない/使いこなせていないという方は、是非この記事を参考に、VS Code の拡張機能を使い始めるきっかけにしてもらえれば幸い
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
侍テラコヤ（SAMURAI TERAKOYA） - 日本最安級のサブスク型オンラインITスクール
Jupyter対話環境を使ってVS Codeでノートブックのデバッグ
