Visual Studio Code の Emmet機能を使ってコードを楽に書こう - Qiita
エンジニアのみなさま、日々の学習本当にお疲れ様です！ また本記事まで足を運んでいただき本当に感謝です。 約1分程度で読めるので最後まで読んでもらえると幸いです。 はじめに コードを書くのに慣れてくると、いちいちコードを書くのが煩わしくなりませんか？ そんな時 Visual Studio Code（以下、VSCode） の Emmet機能 を使えば、HTML等、特にWEB関連のコードを書くときに補完をしてくれるため、作業効率が格段にUPします。 騙されたと思ってぜひ一度お試しくださいませ！ 設定方法 1. VSCodeを開き、画面左下の「⚙️」 > 「設定」をクリック 2. 「emmet」と検索し、画面中段にある「Emmet: Trigger Expansion On Tab」にチェック 以上になります。 どんな事をしてくれるのか？ あるコマンドを入力後、「Tab」を押す事で良しなに補完をし
【VSCode】オススメの拡張機能と設定 - Qiita
{ "editor.formatOnSave": false, "editor.formatOnPaste": false, "editor.formatOnType": false, } この記事で紹介している拡張機能のIDは、記事の最後にまとめています。また、設定の方法については設定のやり方に記述しています。 以下は、この記事で紹介する拡張機能のカテゴリ一覧です。 設定ファイル関連(Yaml, Json, Toml) Git関連 Markdown関連 カラー系 API関連 コンテナ その他便利な拡張機能 ネタ系 設定ファイル関連(Yaml, Json, Toml) 特にYamlやJsonはどのプロジェクトでも使用する可能性が高いので、必須の拡張機能となってくるかと思います。 Prettier esbenp.prettier-vscode jsonだけの設定では、VSCodeの設定ファイ
VS CodeとDev Container（docker-compose.yml対応）
前回の記事で、VS Code＋Dev Containerを導入しました。 残課題として「マルチコンテナ化」があるという話もしました。今回はDev Containerのdocker-compose.yml対応をした話をメモとして残しておきます。 実際、VS Code + Dev Containerに移行した後に、Esを起動してアプリからつなげるというのがうまくいかないというのがあったので対応がんばりました。。。 Dev Containerのdocker compose設定 この記事ではすでにdocker-compose.ymlが存在している状態の話をします。 変更する前は、devcontainer.jsonでベースのコンテナイメージの指定、マウントの設定などを行っていましたが、docker-compose.ymlにいくつかを移動しないといけません。 対応した時の作業の流れは以下のような感じで
【VSCode】Devcontainerを使ってpythonの開発をしてみる｜yucco
DockerをインストールするDocker インストール 検索 （自分のPCには大昔にインストールしてあったもんで……） WSLを有効化する過去にまとめたのでこちらを。 Dockerfileを作る人から貰ったDockerFileで楽をしようと思ったらなんか上手く行かなかったので基礎からちゃんと……やります…… Dockerfileとは今からこれこれこういうコンテナを作っておくれ、という命令書のこと。コンテナを作る時に、こういう設定でー、こういうアプリケーションインストールしてー、って最初にやる作業コマンドを全部書き並べて作ります。たぶん。（わやわや） とはいえゼロから作るのは大変なので、ベースイメージを探します。 色々なところが「これテンプレートにすると便利じゃよ」というものを公開してくれているので、それを探して、それをベースにして作ると良いです。 # Dockerfile FROM py
Dev Containerを使ってみよう
Dev Containerを使ってみよう Dev Containerを使う上で知っておくと良さげな情報のまとめ記事です 前にRemote SSHでDev Containerの環境を構築する記事を書いたので、今回はDev Container全般の情報をまとめてみました tl;dr Dev Containerを使うと開発環境をコンテナで構築できるよ(ランタイムとかツール類含めて！) docker composeだとアプリケーションを動作させる環境は作れるけどDev Containerは開発環境ごと構築できて便利 Dev Containerを使うにはdockerとDev Containerを利用できるエディタが必要 Dev Container内でdocker composeを利用できるから、Dev Container用のコンテナ+ミドルウェアコンテナを用意すればアプリケーションを開発できる環境が
【VSCode】You have deprecated linting or formatting settings for Python への対応 - Qiita
【VSCode】You have deprecated linting or formatting settings for Python への対応PythonVSCode 実行環境 Windows10 VSCode version 1.84 はじめに VSCode を October 2023 (version 1.84) にアップデートしたら、以下の警告がポップアップするようになりました。 この警告への対応と内容について簡単に説明します。 対応 settings.json から、以下の文字で始まる設定をすべて削除し警告を解除します。 python.linting.* python.formatting.* ユーザ設定用 settings.json ファイルは、 VSCode のコマンドパレットから settingsjson 等で検索して開くことができます。 その後、必要に応じて Pyl
Devcontainer がデバッグ環境構築のハードルを一気に下げるお話
起動確認 いつもの 初期設定 VSCode左下の><をクリック 開発コンテナー構成ファイルを追加 ワークスペースに構成を追加する こちらを選択することでGit上で構成ファイルを管理出来ます。 定義済みのコンテナー構成定義から Node.js & TypeSctipt 導入する、言語などを選択してください。 バージョンを指定してください。 お好きな拡張機能を追加してください。 .devcontainer/devcontainer.jsonに以下の様なファイルが出来上がります。 // For format details, see https://aka.ms/devcontainer.json. For config options, see the // README at: https://github.com/devcontainers/templates/tree/main/src/
Code Tour を使ってじっくり確実にコードを読む
日々のタスクに忙殺されていると、ついつい既存コードを流し読みして、ざっと動くコードを書いてしまいたくなります。 一発でうまく動けば短期的にはいいのですが、長期的にはコードの理解が追いつかなったり、一発でうまく動かなかった場合にかえって時間がかかってしまいます。 VSCode の拡張機能である Code Tour を使うと、コード上にメモを残しながら読み進めることができるので、既存のコードを読む際に便利です。 Code Tour とは VSCode の拡張機能で、コード上にメモを残しつつ、そのメモをたどることができるツールです。 使い方 ツアーを始める コマンドパレットから「Code Tour: Record Tour」を選択すると、ツアーの記録モードになります。 ツアーの名前 どのソースに紐づけるか（紐付けなし、ブランチ、タグ） を選択すると、リポジトリ直下に .tours/${指定したツ
VSCode ではじめる GitHub Copilot 活用術 - Qiita
はじめに GitHub Copilot は AI がペアプログラミングしてくれるサービスです Copilot = 副操縦士なので、私たちがコードを書くとき、隣からそっと助けてくれるイメージです ChatGPT のようなチャット形式とは異なり、特別指示を出さずとも、コードを書いていると自然に提案してくれます 例えば、以下の GIF では Python で def generate_random_ まで書いた時点で、残りのコードを GitHub Copilot が提案してくれています そのままタブキーを押せば提案されたコードを採用できます 最初から 100 点のコードにはなかなかなりませんが、 70 点のコードでも叩き台ができるのは非常にありがたいです 本記事では VSCode で GitHub Copilot を使う方法と、その活用術について紹介します GitHub Copilot が使える
君はVS Codeのデバッグの知られざる機能について知っているか - Qiita
はじめに こんにちは、kenです。 GWに「暇だな～～、こんな日はVS Codeの公式ドキュメントを読むか！w」と思って何気なく読んでたらデバッグに関して知らない機能がいくつかあったので、今回はそれをご紹介したいと思います。 おそらく今から紹介する機能はあまり知られてないと思います。もし全部知ってたらVS Code完全理解者なので誇ってください。（！？） 以下に記載する内容はVS Codeの公式ドキュメントのDebuggingという章を参考にしています。 注意 これから紹介する機能は言語によって使えたり、使えなかったりします。 今から紹介する機能のデモはすべてPythonで行おうかと思ったのですが、上記の理由からPythonではサポートされていない機能についてはJavaScriptやC++で代用しました。 デバッグで使える便利な機能 ログポイント機能 行を指定しログポイントを追加すると、そ
PowerShell 開発のための Visual Studio Code の使用 - PowerShell
Visual Studio Code (VS Code) は、Microsoft のクロスプラットフォームのスクリプト エディターです。 PowerShell 拡張機能と共に使用すると、充実した対話型のスクリプト編集エクスペリエンスがもたらされ、信頼性の高い PowerShell スクリプトを簡単に記述できます。 PowerShell スクリプトの記述に使用するエディターとしては、PowerShell 拡張機能を備えた Visual Studio Code をお勧めします。 次の PowerShell バージョンがサポートされています。 PowerShell 7.2 以降 (Windows、macOS、Linux) .NET Framework 4.8 を使用した Windows PowerShell 5.1 (Windows のみ) VS Code と PowerShell の拡張機能を
Visual Studio Codeを使うなら絶対に入れておきたい拡張機能Top20【2022最新版】 - Qiita
この記事はNuco Advent Calendar 2022の14日目の記事です。 VSCodeに必須の機能20個を紹介していきます。 インストール数と星の数は記事作成時点(2022年11月時点)のものです。 Japanese Language Pack for Visual Studio Code vscode-icons Code Spell Checker zenkaku Path Autocomplete Prettier - Code formatter indent-rainbow GitLens Git History HTML CSS Support Output Colorizer TODO Highlight vscode-random Atom One Dark Theme Trailing Spaces REST Client Live Server Jupyter
VSCodeのターミナル/プロファイルの設定の詳細 - Qiita
Abstract VSCodeの利便性を支える要素の一つは間違えなくターミナルではないかと思います。 本記事では最新のターミナルの設定方法を紹介し、その設定の詳細に触れていこうと思います。 Version VScode: 1.64.2 April 2021 (version 1.56)の更新以降についての話です。 またWindowsで基本的に記述しています。適宜読み替えてください。 従来の設定方法 ## 従来の設定方法 Version 1.56以前の話です。読み飛ばしても大丈夫です。 VSCodeのアップデート(since 1.56)に伴い、これまでのターミナルの一部設定項目がdeprecatedとなりました。 → 1.80.0で削除されました！ これまでshellの指定及びその起動オプションは以下のような設定でした。 { "terminal.integrated.shell.window
Windows端末にVS CodeでPython開発環境を用意してみる - Qiita
本記事ではPythonの開発環境をWindowsとVS Codeで構築してみます。 今回利用する環境 Windows 10 21H2 Python 3.10.4 VS Code 1.66.2 Python extension for Visual Studio Code v2022.4.1（VS Code拡張） 各種ドキュメント Python Python 3.10.4 ドキュメント Python チュートリアル Windows で Python を使う Python For Beginners BeginnersGuide Python Packaging User Guide Getting Started with Python in VS Code Python extension for VS Code Pythonのインストール Windows端末にPythonをインストールす
VSCode で PHP 開発するならインテリセンス最強の intelephense を使おう
こんにちは。 開発チームのワイルド担当、まんだいです。 今年はずっと PHP 開発をしていて、環境面については色々試行錯誤した一年だったと思います。 その甲斐もあってかなり便利に整備できてきたので棚卸しの意味も込めて記事にまとめたいと思います。 Visual Studio Code で行う PHP 開発 Visual Studio Code（以下、 VSCode ）で開発するにあたって、初期のころは若干の不安もありました。 実は開発に入る前に PhpStorm の導入を検討していたのですが、諦めたという経緯があります。 PHP 開発のために開発されている IDE ですから、機能面では申し分ないと感じましたが、どうしても GUI が好きになれず。 こんなしょうもない理由ですが、1年以上付き合うわけですから、見てくれは重要なポイントだと思っています。 そんなわけで VSCode で開発をする、
"terminal.integrated.shell.windows" の非推奨（deprecated）によるコンパイル不能について - astrskginoの日記
（作業環境：ターミナル：WSL, 言語：C++） 数が月ぶりに vscode で遊ぼうと思ったところ、Total Problem に次のメッセージが表示された。 This is deprecated, the new recommended way to configure your default shell is by creating a terminal profile in `#terminal.integrated.profiles.windows#` and setting its profile name as the default in `#terminal.integrated.defaultProfile.windows#`. This will currently take priority over the new profiles settings but t
DockerとVS Code Remote Containersを用いたフロントエンド開発環境構築
背景 プロジェクトの新規立ち上げや、新しくプロジェクトに新規メンバーが入った場合に環境構築に手間取ることが多いため、Docker＋VS Code Remote Containersのフロントエンドアプリケーション開発環境構築ができるリポジトリを作成しました。 本記事では上記リポジトリを用いた環境構築手順とCreate React Appによる簡単なアプリ開発例を説明します。 また、上記リポジトリをgit cloneしなくても一から同じ環境を構築できるように、リポジトリに含まれるファイル群についてもそれぞれ説明します。 本記事の対象はフロントエンドですが、バックエンドのプロジェクト構築も基本的には同じ知識で構築できるはずです。 前提条件 本記事では以下を前提条件とします。ただし、WindowsやLinuxでも基本的には問題ないはずです。 macOS Monterey Visual Studi
Google ColabとVSCodeで作るデータ分析環境 クラウドのGPU環境でもローカルと遜色ない開発体験を
「分析コンペLT会」は、KaggleやSIGNATEなど、データ分析のコンペに関連するLT（ライトニングトーク）を行う会です。野澤氏は、Google Colabとvscodeを用いて作るデータ分析環境とその運用について発表しました。 機械学習の勉強環境の1つ「Google Colaboratory」 野澤哲照氏（以下、野澤）：「Google ColabとVSCodeを用いたデータ分析環境運用Tips」ということで、野澤が発表します。 最初から免責で申し訳ないのですが、今日紹介する方法はGoogle側が推奨している方法ではないので、急に使えなくなる可能性もあります。そこだけご了承ください。 今日話す内容ですが、ざっくりGoogle Colab（Google Colaboratory）とVSCodeを紹介して、最終的にどういう環境が作れるかというところと、環境構築手順・運用時のポイントなどを話
既存のDocker開発環境をVS CodeのRemote Developmentで開発できるようにしてみた | DevelopersIO
こんにちは！DA(データアナリティクス)事業本部 サービスソリューション部の大高です。 私は普段のローカル開発環境として、Dockerを利用した開発を行っており、このコンテナ環境はsshを利用してVS Codeで接続および開発できるようにしています。 一方で、VS Codeを利用しているので「せっかくVS Codeを利用しているのであれば、Remote Development（のコンテナ機能）を利用して開発したい！」という想いから設定をしてみたので、その設定方法についてまとめておきたいと思います。 前提 まず、元々の環境についてです。 OSなど OSはMacOSで、DockerについてはDocker Desktop for Macを利用しています。 VS Codeの拡張機能 VS Codeの拡張機能に「Remote Development（ms-vscode-remote.vscode-r
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Oracle、「MySQL Shell for VS Code」をプレビュー公開／「MySQL」の開発・管理シェル「MySQL Shell」を「Visual Studio Code」で直接扱える
