VS Codeでマークダウンを快適に書きたい！ オススメの拡張機能と設定6選 - ICS MEDIA
ブログの文章やドキュメント作成など、さまざまなシーンで使われる記法に「マークダウン記法」があります。文字修飾の簡単さや読みやすさから使うタイミングは多々あると思いますが、みなさんは快適にマークダウンを書けていますか？ 筆者はVS Codeでドキュメントをマークダウンで書くことが多く、表の作成・編集やプレビュー表示など、めんどくさい・見づらい・使いづらいと思うことがあります。どうにか快適に書けないかと思いさまざまな拡張機能や設定を試しながら業務を行ってきました。 この記事では、筆者が試した拡張機能やVS Codeの設定の中で便利だったものを紹介します。①から⑥まではすべて無料で利用できるので気軽に試してみてください！ ①マークダウンの表をエクセルからコピペできる拡張機能 VS Codeでの表の作成に重宝しているのが「Excel to Markdown table」という拡張機能です。エクセル
VSCode の Profiles 機能で拡張機能や設定を共有してみる
VSCode の設定を簡単に切り替える方法はないかなと思っていたところ、2023-01(v1.75.0) の更新で Profiles 機能が追加され、複数 Profile を持てようになったとのこと。 そこで、どんな感じかなと試してみたところ、設定の切り替え以外にも共有などで便利そうだったのでその辺についてなど。 2023-02-10: 通常版の vscode.dev でもプレビューを利用できるようになったので、注意点などを更新しました 2023-02-10: Profile の切り替えについての追記などを行いました Profiles 機能とは？ これまで VSCode の UI ではユーザーの設定を 1 つしか持てませんでした。 今回の更新で導入された Profies 機能を使うとその辺を良い感じにしてくれるとのこと。 Profiles If you have different VS
【vscode】Code Spell CheckerでRe:ゼロから始めるタイプミスらない世界生活 - Qiita
はじめに こんにちは！@nyakako13 です。 少し前からtypescript,reactの学習を進めています。 プログラミング学習していて教材やQiita、Zennの記事でおすすめのvscode拡張機能をとりあえずたくさん入れてみたけど、よくわからない拡張機能がある。うまく使いきれずにうっとうしくなってアンインストールしてしまった。そんな経験はありませんか？ 私はありますw 今回は、プログラミングの大敵、タイプミス、スペルミスを教えてくれるvscodeの拡張機能の 「Code Spell Checker」 のお話です。 私は以前、一度導入していたのですが、vscodeで問題が発生しまくるのと、対応のための辞書登録が面倒でアンインストールしてしまい、それからずっと使っていませんでした。（今思えばそもそもの使い方がわかっていなかった。） 今回、改めて「Code Spell Checker
Visual Studio Codeでカバレッジ付きでJUnitが実行できるようになった！！ - Qiita
ついに・・・Visual Studio Codeでカバレッジ付きでJUnitが実行できるようになりました NOTE: これまではMavenなどでJacocoのカバレッジレポートを出力し、出力したレポートをVSCodeのUI上に反映することはできましたが、これで直感的にカバレッジを確認することができるようになります！！ https://marketplace.visualstudio.com/items?itemName=ryanluker.vscode-coverage-gutters https://github.com/microsoft/vscode-java-test/releases/tag/0.41.0 https://github.com/microsoft/vscode-java-test/issues/387 こんな感じ。 やったね！！ 小ネタ① カバレッジ状態をインライ
Postmanを使い始めた時に知っておきたかった地味に便利な機能10選 - Qiita
普段何気に使っているPostman。最近まで「手軽にGUIで疎通を試せて、設定を共有できてべんり〜」くらいで使っていました。 けどふと「実はもっと便利な機能があるのでは？」と思って調べてみたところ、色々出てきたのでせっかくなのでシェアしたいと思います。 たまたまですがちょうど10選！ 地味に便利な機能10選 VSCode拡張 PostmanにはVSCode拡張機能があります。 インストールするだけで、VSCodeのサイドバーから利用可能です。 日本語設定 日本人なので日本語で使いたい。 右上の歯車→Settingsから以下の通り選択することで日本語化が可能です。 変数の定義 複数のAPIで同じ値を使いたい場合があるとします。例えばテスト用のユーザーIDなどです。 Postmanではそんな値をAPIファイルに逐一ハードコードする必要はなく、変数に保存することが可能です。 Postman Ec
VS Code Conference JP 2024 - Qiita
VS Code Conference JP 2024 毎日お世話になっているVS Code、についてのカンファレンスが 2024/04/20(土)オンラインとオフラインのハイブリッドで開催されました。 配信はアーカイブもされており、後からでも視聴する事ができます。 GitHub Codespaces リモート環境（ブラウザ上）でVS Codeを使える開発環境。 料金もかかるので、ユースケースは？と疑問でしたが、 登壇をお伺いしたところ、チーム開発に取り入れると効率が上がりそうです。 github上から各ブランチ状態のVSCodeが立ち上げられる ローカルのブランチ切り替え不要 github上で各PRの環境を簡単に切り替えられるので、並行レビューが捗る 私物PCでcloneせずにgithub上で仕事の対応ができる 仕事のPCが手元にない時の急な対応ができる 注意点 インスタンス自体は他のユー
開発者もIDEから稼働中のシステムの状態を確認したい？（ログ検索編） - Qiita
概要 IDEを使って開発した後にデプロイされたシステムのパフォーマンスやログなどをIDE上で簡単に検索できたらワクワクしませんか？問題が起きたときのトラブルシュートでも使えますし、次のシステムの改善点を考える上でも活用できます！ こちらの投稿では開発者が使っているIDEからデプロイ済みのシステムのログを検索してみたいと思います。 CodeStreamを使用するための設定については下記で紹介しているので参照してください。 CodeStreamの詳細は公式ガイドを参照ください。 ログを検索（基本） デプロイされているシステムのログをIDEから検索してみます。 まずは、CodeStream上のView Logsをクリックします。 タブで開いたCodeStream(Logs)の検索ボックスに文字列を入れて[Query Logs]で検索すると、ログ検索の結果が素早く一覧表示されます。 ログを検索（文
開発者もIDEから稼働中のシステムの状態を確認したい？（設定編） - Qiita
概要 IDEを使って開発した後にデプロイされたシステムのパフォーマンスやログなどをIDE上で簡単に検索できたらワクワクしませんか？問題が起きたときのトラブルシュートでも使えますし、次のシステムの改善点を考える上でも活用できます！ New RelicのCodeStreamをVSCodeやIntelliJにインストールすると、New Relicでモニタリングされているシステムのレスポンス、スループット、エラーレート、発生しているエラー、脆弱性情報などを把握することができます。開発後にデプロイされたシステムが今どのような状態かIDE上で簡単に確認できるので、品質や非機能要件に対する感度を高めるきっかけにできそうです。 こちらの記事では、CodeStreamを使用するための設定について紹介します。 システムのログを検索したり、NRQLを使用してパフォーマンス情報を取得する方法は別の記事で公開してい
保守・理解しやすいコードを書きたい！ 〜VSCode拡張機能で循環的複雑度と戦う〜 - Qiita
参考: 循環的複雑度 ちなみに githubで最もやべー関数を発掘するという記事では、循環的複雑度が高い関数が紹介されています。 ものによってはリンク切れしてしまっていますが、最も複雑度が高いのはnode（JavaScript）のjo関数で5505だそうです。想像もつかない... どのようにすれば循環的複雑度を低く抑えられるのか？ 計算方法から考えると、forやifによる分岐を減らしていくことが必要となります。 そのために、分岐の入るロジックを別関数として切り出し、１つの関数でやる事を絞り、分離することを理想として目指していきます。 とはいえ、いちいち複雑度の計算なんてしていられないですね。 そこで役に立つのが次のVSCode拡張機能です。 Code Metrics （VSCode拡張機能） この拡張機能は、TypeScriptやJavaScriptの関数・メソッドに循環的複雑度を表示して
【DX向上】VSCodeの設定のススメ【Mac】 - Qiita
VSCode の設定のすゝめ はじめに みなさんこんにちは、GENEROSITY の西村です。 ご存知の通り、VSCode（Visual Studio Code）は、Microsoft が開発したフリーでオープンソースのコードエディタです。 非常に出来ることが多く、設定は自分好みにカスタマイズ可能で拡張機能も豊富です。 しかし、その力を最大限に引き出すためには、適切な設定が必要です。 設定を見直し、DX(Developer Experience)を向上しましょう！ おことわり 今回は、Mac の環境での設定について記載をします。 ショートカットキーは⌘(Cmd), ⌥(Option), ⇧(Shift), ^(Ctrl)を使用します。 適宜 Windows ユーザーの方は置換していただければと思います。 最後に本記事の私の考えや発言は個人の見解として捉えていただければと思います。 キーボー
VSCodeでフォントを変更する - shuhelohelo’s blog
環境 Windows10 Visual Studio Code 1.39.2 フォント名を確認する フォント名を確認するためには,タスクバーの検索欄で｢font｣または｢フォント｣と入力し,Best match!な｢Font settings｣をクリックします. お望みのフォントをフォント名で検索します. 今回は｢源真ゴシック等幅｣というフォントを使いたいと思います. フォントを選択すると以下のような詳細画面が開きます. フォントの中には複数の｢Font face｣を持つものがあります. フォント検索の画面で,各フォントに｢5 font faces｣などと書かれていることがわかると思います. このFont faceも選択することができるので,お好みに合わせて選択してください. Font faceを選択すると,Full nameの項目にそのフォントの名前が表示されます. これをVSCodeで
VSCodeを便利にするあれこれまとめていく
記事の目的 今後 VSCode をヘビーユーズしていきたい。 そのために便利なものがあればどんどんカスタマイズしていきたい。 そんでそれを備忘録として見返せるようにしておきたい。 （あとは誰かの役に立てばいいな。自分の同じような価値観の人に刺さるといいな。） 目次 記事の目的 目次 現在の開発ウインドウの保存 ワークスペースとは何か ワークスペースの作り方と使い方 フォント変更 フォントを美しくしよう 参考サイト３選 検討したフォントたち マークダウンファイルの目次を生成する 採用したプラグイン VSCodeのUIをおしゃれにする 例えばこんなUIになる インデントをおしゃれにする 行ハイライトをおしゃれにする ダークモード時のVSCodeのタブを見やすくする コーディングを便利にする コードの自動整形 スクロールをぬるぬるにする 今後どんどん追記予定（続く） 現在の開発ウインドウの保存
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の設定の切り替えや共有に便利なプロファイル機能を活用しよう - Qiita
1. はじめに 魅力的な機能が多数登場しているVSCode、新しい機能や設定を試しているうちに、試用中の拡張機能が増えたり、設定が肥大化したりして魔改造になりがち。環境は綺麗に保ちたいですよね。 VSCodeの各種設定を綺麗に保つには、プロファイル機能を活用して、「普段使い用」や「お試し用」のように用途別の設定(プロファイル)として用意しておき、作業に適したプロファイルに切り替えて作業するのがおすすめです。 プロファイル機能は 1.75 ( January 2023 ) でGA(一般公開)となりました。 その後も機能追加が行われています。 本記事では執筆時点の最新版 1.85 ( November 2023 ) を対象としています。 プロファイルはエクスポート・インポートもできるので、VSCodeの各種設定をプロファイルにまとめておき、エクスポートしたものをインポートしてもらうことで簡単に
Visual Studio Codeに入れるべき拡張機能【2023年最新版】 - Qiita
弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 はじめに VSCodeは世界で多くの人が使っているコードエディタです。 開発の際に使用している人も多いのではないでしょうか。 今回はそんなVSCodeの拡張機能を一挙に紹介していきます。 拡張機能 VSCodeは世界中で支持されているコードエディタですが、最大の魅力が「拡張機能」です。 機能を追加して、より自分が使いやすいコードエディタにすることができます。 拡張機能のインストール 拡張機能のインストールのやり方を説明します。 アクティビティバーの拡張機能マークをクリックする（四角が4つあるマークです） インストールしたい拡張機能を検索する 拡張機能を選ぶ インストールをク
VSCodeの拡張機能【Gist】が便利すぎて開発効率がかなり上がった話 - Qiita
はじめに 突然ですが、よく使うコードはどのように管理していますか？ 私はGitHubで管理していたのですが、今回VSCodeの拡張機能Gistを使って見たところ、サクッと参照ができて、かなり使い心地が良かったのでまとめておきます。 Gistとは VSCode上でGitHub Gistを連携させることができ、手軽にファイルの作成、編集、削除が可能になる拡張機能です。 導入手順 GitHub Gistの登録 GitHub上でアクセストークンの取得 拡張機能のインストール アクセストークンの設定 1. GitHub Gistの登録 2. GitHub上でアクセストークンの取得 ExpirationをNo expirationに設定します。 scopeのgistを許可して作成です。 トークンが発行されるので控えておきましょう。 3. 拡張機能のインストール VSCode上で【Gist】と検索すると
オラクル、Java開発を効率化するVSCode用拡張機能「Oracle Java Platform Extension for Visual Studio Code」を公開
オラクル、Java開発を効率化するVSCode用拡張機能「Oracle Java Platform Extension for Visual Studio Code」を公開 New Oracle open source project released! Oracle Java Platform extension brings full featured @Java development (edit-compile-debug & test cycle) for Maven and Gradle projects to VS Code. Get started: https://t.co/knjeFPRY1Q Learn more: https://t.co/77SIeky3cE#OracleOSS pic.twitter.com/whXIKFsBHV — Oracle Open So
VSCode(VisualStudioCode)の定番機能を一挙解説 - Qiita
はじめに コードエディタ界の王様VisualStudioCode。開発の際に使っている方も多いのではないでしょうか。 本記事では、VSCode(VisualStudioCode)の定番機能を紹介していきます。 この記事を読んで、VSCodeマスターになりましょう！ 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 そもそもVSCodeって？ VSCode（VisualStudioCode)はMicrosoft社が提供する無償のコードエディタです。2015年リリースですが、着々とユーザーを増やしており、2023年現在、世界で最もポピュラーなコードエディタの1つとなっています。 コードエディタって？ 字や記号などのテキストで構
主にVSCodeではじめるPython開発環境構築ガイド | DevelopersIO
ファイル比較 VSCodeのエクスプローラで、ファイル２つを選択して右クリックメニューから「選択項目を比較」で比較することができます。 また右クリックで、「比較対象の選択」をした後に「選択項目を比較」でも比較することも可能です。 VSCodeのSnippetの使い方 VSCodeのSnippetも便利です。似たような構造のクラスを実装する場合などや、プロジェクト共通で使いがちな書き方というものをSnippetに登録して、効率化することができます。 また、変数を持たせておくこともできます。この場合、Snippetを呼び出した後に変数部分にカーソルがあたるので、そこで変数部分をタイピングできます。 詳細は以下のリンクをご覧ください。 Visual Studio Codeに定型文（スニペット）を登録する方法 VSCodeのUser Snippetを活用しよう！ また後述するSnippet Gen
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 を試してみます。 自分が試す際に参考にした情報は
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
