rubyide/vscode-rubyが非推奨になり、代わりに Shopify/vscode-ruby-lsp を使うように公式から勧告が出ました。 この記事ではShopify/vscode-ruby-lspを導入する手順を紹介します。 formatterにはrubocopを使用します。 1. 開発環境 VSCode：1.84.0 Ruby：3.…

この記事では、Prettier for Rubyを使って、Railsのコードを自動フォーマットする方法を紹介します。 VSCodeでファイルを保存する際に自動フォーマットできるようになります。 1. 検証環境 2. 設定手順 2-1. @prettier/plugin-rubyのインストール 2-2. gemの…

VSCodeでNode.jsをデバッグする方法は主に以下の３つがあります。 Auto Attach JavaScriptデバッグターミナル launch.jsonを使ったデバッグ この記事では、Auto AttachとJavaScriptデバッグターミナルでのデバッグ方法を紹介します。 1. Auto Attach 1.コマ…

この記事ではESLint(静的検証ツール)とPrettier(コードフォーマッター)のインストールと設定方法、またこれらをVSCodeで使用する方法を紹介します。 1. ESLint 1-1. インストール 1-2. 設定ファイル 1-3. コマンドラインでESLintを実行 1-4. VSCodeとの統合 …

この記事では、Ruby 3.1で標準ライブラリとなったdebug.gemを使って、VSCode上でRailsアプリのデバッグを行う方法を紹介します。 1. 設定方法 1-1. debug.gemのインストール 1-2. vscode-rdbgのインストール 1-3. launch.jsonファイルの作成 2. デバッグ方法…

この記事ではMacユーザー向けに、Visual Studio Codeのキーボードショートカットの中から特に使用頻度の高いものを紹介していきます。 1. 一般 操作 ショートカット コマンドパレットを開く shift + ⌘ + P クイックオープン ⌘ + P 新規ウィンドウを開く shif…

この記事では、Visual Studio Codeのオススメの拡張機能を紹介していきます。(随時更新中) 1. 一般 Code Spell Checker Japanese Language Pack for Visual Studio Code Material Icon Theme Project Manager 2. HTML HTML CSS Support HTMLHint こちらのHTM…

はじめに Visual Studio Codeの拡張機能であるAuto Complete Tagが提供する機能は、Visual Studio Codeの基本設定だけで代替可能です。 この記事では、拡張機能をインストールすることなく、HTMLタグの自動閉じタグ補完機能と自動タグ名変更機能を有効にする…

この記事では、Visual Studio Codeのファイル保存時に、自動で末尾に改行が挿入されるように設定する方法を紹介します。 環境 VS Code バージョン 1.68.1 手順 ⌘,(command + ,)で設定を開く insertFinalNewlineで検索 Files: Insert Final Newlineにチェック…