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

• SublimeTextをNode.js開発のためのIDE化
• 目的
• 前提
• SublimeTextの関連プラグインのセットアップ
• プロジェクトで利用

目的

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