AtomエディタでJavascriptコードを書くのが少し楽になるプラグイン「autocomplete-modules」の紹介です。

サーバーサイドで動くjavascipt、node.jsが登場してからパッケージマネージャーが実装され、Browserifyが登場した時ぐらいから、フロントエンドでもモジュールをインポートする流れが広まってきました。

node.jsやフロント側でReactを使っている人なら経験があるかもしれませんが、javascriptのコードを編集する時に面倒なことの1つがrequireimport文を使ってモジュールを読み込む時です。

どのモジュールが必要かわかっているのに、正しいパスとモジュール名を調べる為にワザワザ'node_modules'のフォルダを開いて探す
っというような経験はありませんか?

そのような手間を省けそうなAtomエディタプラグインが「autocomplete-modules」です。

* autocomplete-modules

autocomplete-modulesはコード編集時にモジュールをインポートする際、"node_modules"フォルダを見てオートコンプリートしてくれます!

autocomplete-modulesのインストール

autocomplete-modulesのインストールはSetting -> installから' autocomplete-modules 'と入力して検索するか、コマンドライン上からapmコマンドを使って入手できます。

# apmコマンドを使ってインストールする場合autocomplete-modules
apm install autocomplete-modules


autocomplete-modulesの使い方

autocomplete-moduleの使い方は簡単でこれと言った説明は必要ありません。javascriptコード内でrequireやimport文を使った時にコードサジェストが自動でされます。

* 自身の環境にautocomplete-moduleを導入してみました
autocomplete-modules

autocomplete-moduleのSettingから設定も可能です。

autocomplete-modulesの設定画面
autocomplete-modules setting

設定項目

include file extension
( モジュールインポート時にファイルの拡張子を含めるか )

Vendor Directory
( モジュールを読み込むディレクトリ *default: node_modules )

Webpack support
( Webpackのコンフィグファイル内からのモジュール検索 )

Babel Plugin Module Resolver support
( Babel Plugin Module Resolverの設定も含めるか  )


Summary

以上がautocomplete-moduleの紹介でした。

Atomエディタ使いでnode.jsで開発をしている人、babelやreact等を使っているフロントエンドデベロッパーには重宝しそうなプラグインですね!

Atom Packages: autocomplete-modules

 

この記事のカテゴリ

プログラミング

この記事のタグ

ATOMエディタ , nodejs , 開発ツール

Socialシェアボタン

スポンサーリンク