芽萌丸プログラミング部@programming
投稿日 2024/8/26
更新日 2024/8/28 ✏

SublimeTextをNode.js開発のためのIDE化

目的

SublimeText(ST4)をNode.jsデバッグ開発用のIDEに変えたい。 (機能性よりも動作の軽快さを最優先しているのでVSCodeは利用しない)

前提

  • Sublime Text 4 がインストール済み
  • Node.js がインストール済み (インストール先パス:/usr/bin/node)

SublimeTextの関連プラグインのセットアップ

  1. Ctrl+Shift+P>Package Control: Install Packageで以下をインストール:

    • DebuggerSublimeText用GUIデバッガ。DevToolsを使わなくてもNodeをデバッグできるようになる
    • LSPLSP = Language Server Protocol. オートコンプリート、定義へのジャンプ、参照検索、リファクタリングなどに利用
    • LSP-jsonJSON用LSP
    • LSP-eslintESLint用LSP
    • LSP-typescriptTypeScript用LSP。vanillaなJavaScriptのコードの保管にも使える

    NOTE: もしプラグインのインストールでNodeパスに関連するエラー(semverモジュールが見つからない等)が出た場合は以下でエラーを解消できる:

    • Preferences>Browse Packages...で Packages フォルダを開き、以下のファイルを保存。

      lsp_utils.sublime-settings

      {
        "nodejs_runtime": ["local"],
        "local_use_electron": false,
      }
      

      この後、SublimeTextを再起動する。

  2. Preferences>Browse Packages...で Packages フォルダを開き、以下のファイルを保存。

    Node.sublime-build

    {
      "cmd": ["node", "$file"],
      "selector" : "source.js",
      "path" : "/usr/bin" // 利用したいNodeのフォルダを指定!
    }
    

    LSP-eslint.sublime-settings

    {
      "settings": {
        "experimental.useFlatConfig": true
      }
    }
    

    LSP-typescript.sublime-settings

    {
      "settings": {
        // Inlay hints options.
        // JS:
        "javascript.inlayHints.includeInlayEnumMemberValueHints": true,
        "javascript.inlayHints.includeInlayFunctionLikeReturnTypeHints": true,
        "javascript.inlayHints.includeInlayFunctionParameterTypeHints": true,
        "javascript.inlayHints.includeInlayParameterNameHints": "none", // none | literals | all
        "javascript.inlayHints.includeInlayParameterNameHintsWhenArgumentMatchesName": true,
        "javascript.inlayHints.includeInlayPropertyDeclarationTypeHints": true,
        "javascript.inlayHints.includeInlayVariableTypeHints": true,
        "javascript.inlayHints.includeInlayVariableTypeHintsWhenTypeMatchesName": true,
      },
    }
    

プロジェクトで利用

  1. プロジェクトルートにsublimeプロジェクト設定ファイル (.sublime-project) を保存。

    例: node.sublime-project

    {
      "folders": [
      {
        "path": ".",
      }],
      "debugger_configurations": [
      {
        "name": "Node debugger",
        "type": "node",
        "request": "launch",
        "program": "${file}"
      }],
    }
    

    重要: 次回からは$ subl ./node.sublime-projectでプロジェクトを開くこと。(そうしないと次回デバッガ起動時に再びプロジェクト設定ファイル作成を促されてしまうので注意!)

  2. デバッグしたい.jsファイルをメインパネルで開き、Ctrl+Shift+P>Debugger: Openでデバッグ用パネルを開く。

    これによりブラウザの DevTools を使わなくてもSublimeText上でデバッグ実行できるようになる。

END


芽萌丸プログラミング部
芽萌丸プログラミング部@programming
プログラミング関連アカウント。Web標準技術を中心に書いていきます。フロントエンドからサーバサイドまで JavaScript だけで済ませたい人たちの集いです。記事は主に @TanakaSoftwareLab が担当。