VSCodeで生産性を上げる
はじめに こんなツイートを見て執筆をしようと思いました。 実際に、VSCodeは機能の追加や拡張機能の開発が活発に行われており、かつUIもユーザーフレンドリーであるため人気のエディターだと思います。VSCodeを使いこなせるのとそうでないのではエンジニアリングの生産性に大きな差が出てしまうと思います。 パンくずの設定 '>' を入力します。 '>' preferences: Open User Settings (JSON)を入力します。 僕のsettings.jsonは以下です。 { "workbench.colorTheme": "GitHub Dark", "terminal.integrated.fontFamily": "MesloLGM Nerd Font", "terminal.integrated.profiles.osx": { "fish": { "path": "/o
VS Codeでマークダウンを快適に書きたい！ オススメの拡張機能と設定6選 - ICS MEDIA
ブログの文章やドキュメント作成など、さまざまなシーンで使われる記法に「マークダウン記法」があります。文字修飾の簡単さや読みやすさから使うタイミングは多々あると思いますが、みなさんは快適にマークダウンを書けていますか？ 筆者はVS Codeでドキュメントをマークダウンで書くことが多く、表の作成・編集やプレビュー表示など、めんどくさい・見づらい・使いづらいと思うことがあります。どうにか快適に書けないかと思いさまざまな拡張機能や設定を試しながら業務を行ってきました。 この記事では、筆者が試した拡張機能やVS Codeの設定の中で便利だったものを紹介します。①から⑥まではすべて無料で利用できるので気軽に試してみてください！ ①マークダウンの表をエクセルからコピペできる拡張機能 VS Codeでの表の作成に重宝しているのが「Excel to Markdown table」という拡張機能です。エクセル
VS Codeの新機能がすごく便利！ ツリービューのスティッキースクロール機能をオンにすると格段に使いやすくなります
先日アップデートされた、VS Code v1.86で、スティッキースクロールがツリービューでも使用できるようになったので、紹介します。 エディタのスティッキースクロール（紹介記事）ができるようになった時もその便利さに喜びましたが、ツリービューでもできるようになり、深い階層でもすべての親を常に表示しておくことができます。 ツリービューのスティッキースクロールを使用するには、デフォルトではオフになっているので、機能をオンにする必要があります。 ※オンになっている人もいるようですね。
VS Code 開発コンテナー用カスタム Docker イメージの開発方法
はじめに ここでは VS Code 開発コンテナー用カスタム Docker イメージの開発方法について説明します。 動作確認は Linux 環境を使っているため、Windows や macOS とは違っている場合があります。できるだけ Docker が動作する環境であれば動くようにはしています。 この記事の対象者の前提は下記となります。 Visual Studio Code（VS Code）が使えること Docker が使えること Node.js で NPM を使ったパッケージ管理について基本的なことを知っていること Docker Compose の基本的な使い方を知っていること Linux の基本的な使い方を知っていること 使用する環境は下記です。 Visual Studio Code Docker 拡張機能: ms-azuretools.vscode-docker Dev Contai
2023年に見つけたあまり知られていない便利VSCode拡張4選 - Qiita
はじめに この記事では、2023年に見つけた、Visual Studio Codeで開発作業を効率化するための便利な拡張機能4つを紹介します。 これらの拡張機能は、共通してあまり有名ではないためあえて紹介しようと思います！！ 実施内容 紹介するのは以下の4つの拡張機能です。 Multi Cursor Case Preserve VSCode JS Console Utils Laravel Goto Config NPM Dependency Links これらの拡張機能は、それぞれ異なるニーズに応えるものです。 準備 Visual Studio Codeをインストールしておく必要があります。 各拡張機能をVisual Studio Codeのマーケットプレイスからインストールします。 実装手順 Multi Cursor Case Preserve VScodeを使って命名の変更があった場
VSCodeでプロジェクトを開くとき、ついでにいろいろやる方法
この記事は GMOアドマーケティング Advent Calendar 2023 16日目の記事です。 こんにちは。GMOアドマーケティングのK.Mです。 VSCodeでプロジェクト（ワークスペース）を開くとき、その開発をするために必要となるいろんなこと（サーバー起動やらログtailやらブランチ整備やら…）をついでに自動でやれたら良いなと思います。 そんなときは tasks.json です！ というわけで今回は tasks.json を試してみます。プロジェクトを開くだけで周辺のいろんな準備もまとめてやってしまえるよう効率化したいと思います。 let’s try! VSCodeを開いてメニューの ターミナル > タスクの構成 から適切なものを選んで進みます。シンプルなテンプレートが得られるので、必要に応じてカスタマイズしていきます。 例として開発用サーバーを起動するようにしてみます。 { "
VSCode 中級者になるための Tips 集 - Adwaysエンジニアブログ
こんにちは！ エージェンシー事業部でアプリケーションエンジニアをしている23新卒の森田です！ 4,5年前に Atom から VSCode に乗り換えてすっかり VSCode のことを相棒だと信じ、もう知らぬことはないとそう思っていました。 しかし、今年エンジニアとして業務で VSCode を使用していると、「あれっ、そんなこともできるの？」と日々相棒の新しい機能を発見しています。 完全に理解したと思ったところからさらに新しい面に気づかせてくれる VSCode は最高の相棒ですね！！ そんなところでこのブログでは、VSCode を完全に理解した VSCode 初心者の僕が、VSCode やっぱわからん VSCode 中級者になるために使いこなす必要がありそうだなと思った機能の Tips 集をご紹介します。 筆者の環境は以下のとおりです。 Mac Apple シリコン Ventura 13.3
Visual Studio Codeに入れるべき拡張機能【2023年最新版】 - Qiita
弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 はじめに VSCodeは世界で多くの人が使っているコードエディタです。 開発の際に使用している人も多いのではないでしょうか。 今回はそんなVSCodeの拡張機能を一挙に紹介していきます。 拡張機能 VSCodeは世界中で支持されているコードエディタですが、最大の魅力が「拡張機能」です。 機能を追加して、より自分が使いやすいコードエディタにすることができます。 拡張機能のインストール 拡張機能のインストールのやり方を説明します。 アクティビティバーの拡張機能マークをクリックする（四角が4つあるマークです） インストールしたい拡張機能を検索する 拡張機能を選ぶ インストールをク
新時代のコードエディタ、Cursorのメリット・できることを網羅的に解説した
上記のようにコードエディタを開くコマンドを分けるために、既にcodeコマンドをVScodeで使っている方はcursorダウンロードの際にcursorコマンドのみインストールするようにしてください。codeの方もインストールすると、codeコマンドでVScodeとCursorどちらも開いてしまうようです。 Cursor主要機能紹介 cmd + Shift + L or cmd + L でGPTとChat機能 エディタ上で画面右にGPTに質問できるサイドバーが出現する。何も選択してないと無から質問できる状態になっていて、コードを選択した状態で開くとそのコードがあらかじめ引用された状態になっている(別の部分のコードもどんどん追加できる)。 ↑10~21行目をcmd + Lした後に31~33行目を追加でcmd + Lした画像 cmd + K でAI Edit機能 コードを選択した状態でcmd +
【VS Code】tasks.jsonで決まった作業を自動化する | DevelopersIO
はじめに 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 Serverがなくなって本体に統合されていた - Qiita
先日、VPS上にVSCode Serverをインストールしようとしたところ動かなくなっており、詳細を調べているうちにこのスレッドにたどり着きました。 ここをみると、どうもVSCode Serverの機能はRemote Extensionに統合されたので、もはや提供されなくなったようです。（setup.shでダウンロード可能なバイナリが無くなっている） じゃあどうすればいいのか？ サーバ上でVSCodeを動かして、ブラウザでエディタを立ち上げたい、iPadで開発したいという皆さんは、引き続きVSCode本体で簡単に実現することができます。 サーバ上に普通のVSCodeをインストールして、code tunnelと打ち込むだけで、github.devのドメインでトンネルがホストされてブラウザ上でもローカルのVSCodeとも接続可能な状態になります。 daemon化して常時起動したい それも簡単で
VSCode(VisualStudioCode)の定番機能を一挙解説 - Qiita
はじめに コードエディタ界の王様VisualStudioCode。開発の際に使っている方も多いのではないでしょうか。 本記事では、VSCode(VisualStudioCode)の定番機能を紹介していきます。 この記事を読んで、VSCodeマスターになりましょう！ 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 そもそもVSCodeって？ VSCode（VisualStudioCode)はMicrosoft社が提供する無償のコードエディタです。2015年リリースですが、着々とユーザーを増やしており、2023年現在、世界で最もポピュラーなコードエディタの1つとなっています。 コードエディタって？ 字や記号などのテキストで構
VSCode の新機能「built-in port forwarding」を使いローカルサーバーにインターネット側からアクセス - Qiita
VSCode の新機能「built-in port forwarding」を使いローカルサーバーにインターネット側からアクセスHTMLJavaScriptNode.jsVSCode はじめに この記事は、以下の公式ポストや、VSCode のアップデート後のリリースノートにも出ていた「built-in port forwarding」を試してみた話です。 この機能を使うと、ローカルにあるサーバにインターネットからアクセスできるようになります。 同様のことを実現するものには、有名どころの 1つに「ngrok（エングロック）」があったり、その他にもたくさんの類似サービスがあります。 実際に VSCode の built-in port forwarding を試してみる それでは、VSCode の built-in port forwarding を試してみます。 自分が試す際に参考にした情報は
VSCodeとGitLabを連携する - Qiita
こんにちは。 株式会社クラスアクト インフラストラクチャ事業部の大塚です。 前回、前々回と私はKubernetesにArgoCDをデプロイしてみたりGitOps,CI/CD環境を構築したりしました。 今回はVSCodeとGitLabを連携させて、よりそれっぽい開発環境を作っていこうと思います。 用語 VSCode Microsoft社が提供しているコードエディタになります。 PCにデフォルトで入っているテキストエディタを凄く拡張させたものとでも思って頂ければいいのではないでしょうか？ サーバにSSHして使用することも可能なので、画面を良い感じに分割して上部ではファイルを編集して下部でサーバを操作して、みたいな使い方はあるあるな気がします。 環境イメージ 今回構築するイメージは以下です。 自分のPCにgitリポジトリをclone（≒複製）します。VSCodeでNodePortのyamlを作成
「GitHub Actions extension for VS Code」パブリックベータ公開。VSCodeからワークフローの実行と監視、管理が可能に
「GitHub Actions extension for VS Code」パブリックベータ公開。VSCodeからワークフローの実行と監視、管理が可能に GitHubは、Visual Studio Codeの拡張機能としてGitHub Actionsによるワークフローの実行や監視、管理を可能にする「GitHub Actions extension for VS Code」のパブリックベータ公開を発表しました。 GitHub Actions extension for VS Codeを使うことで、VSCodeの画面上からGitHubのActionを実行し、ビルドやデプロイなどの状態を監視できるようになります。 問題が発生した場合にはログの参照も可能。
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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【VSCode】覚えておきたいキーボードショートカット一覧 - Qiita
VSCodeをプログラミングエディタとして強化しよう！ 便利な設定や拡張機能を紹介
「Visual Studio Code」にプロファイル機能、職場・自宅で設定を切り替え可能／ほかにもさまざまな改善を施した2023年1月アップデート（v1.75）がリリース
「VSCode」を縦書きビューや文字数カウントを備えた原稿エディターにする拡張機能「novel-writer」／青空文庫注記法の注記やルビにも対応。品詞の色分け表示やPDF出力もできる【レビュー】