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

• SublimeTextをNode.js開発のためのIDE化
• 目的
• 前提
• ctagsのインストール(もし未インストールなら)
• SublimeTextの関連プラグインのセットアップ
• プロジェクトで利用

目的

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

前提

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

ctagsのインストール(もし未インストールなら)

ctagsとはソース及びヘッダ内にある名前のインデックス（又はタグ）ファイルを生成してくれるコマンドラインツール。 これによりテキストエディタなどで高速かつ容易に定義を参照できる。

インストール方法:

$ sudo apt install universal-ctags

成功すればターミナルからctagsコマンドが使える。

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

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

   • DebuggerSublimeText用GUIデバッガ。DevToolsを使わなくてもNodeをデバッグできるようになる
   • CTagsCTags用プラグイン。*Ctrl+Shift+.*で関数などの定義にジャンプできる。(LSPの定義ジャンプより高速なのでオススメ！)
   • 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のフォルダを指定！
   }
   

   CTags.sublime-settings

   {
       // Enable auto-complete.
       "autocomplete": true,
   
       // ctagsコマンドに与えるオプション
       // ここでは対象から外したいファイルを指定している:
       "opts": [
           "--exclude=node_modules",
           "--exclude=*.min.js",
           "--exclude=*.bunle.js",
           "--exclude=*.bk",
           "--exclude=*.bk[0-9]",
       ],
   }
   
   

   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上でデバッグ実行できるようになる。（が、実際はDevToolsのデバッガの方が便利な場面も多い）

END