タグ : atom

[atom-ternjs] Failed to find plugin node-express の解決方法

Atom にインストールしてる atom-ternjs パッケージが Failed to find plugin node-express というエラーになったときの解決方法をご紹介します。

Atom.io

続きを読む

[Atom] getaddrinfo ENOTFOUND atom.io atom.io:443 エラーの解決方法

apm starred して getaddrinfo ENOTFOUND atom.io atom.io:443 というエラーが表示されたら、apm login して Token を保存すれば解決します。

エラーメッセージ

$ apm starred
getaddrinfo ENOTFOUND atom.io atom.io:443

apm login で解決

$ apm login
Welcome to Atom!
 
Before you can publish packages, you'll need an API token.
 
Visit your account page on Atom.io https://atom.io/account,
copy the token and paste it below when prompted.
 
Press [Enter] to open your account page on Atom.io. 
Token> xxxxx
Saving token to Keychain ✓

エラーメッセージが分かりにくい!

[Atom.io] atom-beauty で JavaScript ソースコードを整形する

JavaScript 使う新規プロジェクトでフォーマッターを使いたいなということで、Atom でソースコードを綺麗に整形してくれる atom-beautify を使ってみました。

atom-beauty のインストール

メニューバーから [Atom] → [Preferences] → [Install] にて、 atom-beautify パッケージを検索してインストールしましょう。

apm で管理しているなら apm install atom-beautify しましょう。

atom-beauty の設定方法

メニューバーから [Atom] → [Preferences] → [Packages] にて、atom-beautify の Settings から設定画面を開けます。

atom-beautify settings

僕の場合、JavaScript の設定は Indent size だけデフォルトの 4 から 2 に変更する以外は特に何もしていません。

atom-beauty の使い方

Atom エディタ上で、右クリックをして Beauty editor contents を押すと JavaScript のソースコードが整形されます。

Control + alt(option) + b のショートカットキーでも整形できます。 Mac も Windows も同じです。

フォーマッターのような便利ツールを導入して開発をどんどん楽にしていきたいですね。

[Atom] The editor has crashed エラーの解決方法 #AtomEditor

出社していつも通り Atom エディターを起動しようとしたら The editor has crashed というエラーで起動できなくなってました・・・。

Atom - The editor has crashed

The editor has crashed エラーの解決方法

Atom を起動できるようにするための解決方法は、

  1. apm list で install されている package を確認する
  2. apm uninstall –hard packageName で package をアンインストールする
  3. Atom をエラーなく起動できるかチェックする

という手順をパッケージ毎に繰り返し試してみるしかなさそうでした。

パッケージのアンインストール後に Atom を正常に起動できたら、そのパッケージがエラーの原因なはずです。

調査の流れ

「パッケージを1つずつアンインストールして Atom の起動を試す」という解決方法に至るまでに調査したことを書き残しておきます。

まず、Atom をオプション付きで起動してログを確認しました。

$ atom -d -f .
2015-11-05 10:20:31.096 Atom[12864:6941378] App load time: 276ms
[12864:1105/102031:INFO:CONSOLE(387)] "Could not load atom-beautifier@0.5.0 because it uses deprecated APIs that have been removed.", source: /Applications/Atom.app/Contents/Resources/app.asar/src/package-manager.js (387)

atom-beautifier がダメっぽいのでアンインストールしました。

$ apm uninstall atom-beautifier
Uninstalling atom-beautifier ✓

ログがでなくなったので次に –test オプションを付けて実行してみます。

$ atom --test
[13257:1105/103003:INFO:CONSOLE(27)] "Error: Cannot find module '../lib/atom-jshint-view'
  at Module._resolveFilename (module.js:334:15)
  at Function.Module._resolveFilename (/Applications/Atom.app/Contents/Resources/app.asar/src/module-cache.js:383:52)
  at Function.Module._load (module.js:284:25)
  at Module.require (module.js:363:17)
  at require (module.js:382:17)
  at Object.<anonymous> (/Users/bakorer/.atom/packages/atom-jshint/spec/atom-jshint-view-spec.coffee:1:18)
  at Object.<anonymous> (/Users/bakorer/.atom/packages/atom-jshint/spec/atom-jshint-view-spec.coffee:1:1)
  at Module._compile (module.js:428:26)
  at Object.defineProperty.value [as .coffee] (/Applications/Atom.app/Contents/Resources/app.asar/src/compile-cache.js:169:21)
  at Module.load (/Applications/Atom.app/Contents/Resources/app.asar/node_modules/coffee-script/lib/coffee-script/register.js:45:36)
  at Function.Module._load (module.js:308:12)
  at Module.require (module.js:363:17)
  at require (module.js:382:17)
  at requireSpecs (/Applications/Atom.app/Contents/Resources/app.asar/spec/spec-suite.js:21:7)
  at runAllSpecs (/Applications/Atom.app/Contents/Resources/app.asar/spec/spec-suite.js:78:7)
  at Object.<anonymous> (/Applications/Atom.app/Contents/Resources/app.asar/spec/spec-suite.js:87:5)
  at Object.<anonymous> (/Applications/Atom.app/Contents/Resources/app.asar/spec/spec-suite.js:90:4)
  at Module._compile (module.js:428:26)
  at Object.defineProperty.value [as .js] (/Applications/Atom.app/Contents/Resources/app.asar/src/compile-cache.js:169:21)
  at Module.load (/Applications/Atom.app/Contents/Resources/app.asar/node_modules/coffee-script/lib/coffee-script/register.js:45:36)
  at Function.Module._load (module.js:308:12)
  at Module.require (module.js:363:17)
  at require (module.js:382:17)
  at module.exports.runSpecSuite (/Applications/Atom.app/Contents/Resources/app.asar/spec/jasmine-helper.js:60:5)
  at Object.<anonymous> (/Applications/Atom.app/Contents/Resources/app.asar/spec/spec-bootstrap.js:23:5)
  at Object.<anonymous> (/Applications/Atom.app/Contents/Resources/app.asar/spec/spec-bootstrap.js:34:4)
  at Module._compile (module.js:428:26)
  at Object.defineProperty.value [as .js] (/Applications/Atom.app/Contents/Resources/app.asar/src/compile-cache.js:169:21)
  at Module.load (module.js:353:32)
  at Function.Module._load (module.js:308:12)
  at Module.require (module.js:363:17)
  at require (module.js:382:17)
  at setupWindow (file:///Applications/Atom.app/Contents/Resources/app.asar/static/index.js:79:25)
  at window.onload (file:///Applications/Atom.app/Contents/Resources/app.asar/static/index.js:35:9)
", source: /Applications/Atom.app/Contents/Resources/app.asar/spec/spec-bootstrap.js (27)

atom-jshint パッケージがエラーの原因っぽいので、これもアンインストールします。

$ apm uninstall atom-jshint
Uninstalling atom-jshint ✓

再び test 実行してみるとログは何も出力されなくなったけど The editor has crashed エラーは未解決のままでした。

$ atom --test

エラーログを確認して問題を特定するという綺麗な解決の流れにしたかったのですが、手掛かりがなくなったので最終的に冒頭に記載した「怪しいパッケージを総当りで uninstall する」という手順にたどり着きました。

もっと良い解決方法をご存知でしたら教えて下さい。


参考情報

Atom エディタのオススメ Package まとめ

Atom エディタで使っているパッケージをまとめてみました。

使ってる Atom パッケージ

共通

ctrl-alt-f でコードフォーマットをかけてくれる atom-beautifier

オートコンプリート

オートコンプリートにファイルやディレクトリも表示してくれる。

矩形選択の機能を追加してくれるパッケージ

JavaScript

apm install するスニペット

以下、コピペするだけで apm star して Package を全てインストールしてくれます。

## Common ##
apm star atom-beautifier
 
apm star autocomplete-plus
apm star autocomplete-snippets
 
apm star multi-cursor
 
apm star pretty-json
 
apm star script
 
 
## Linter ##
# https://atom.io/packages/linter
apm star linter
# https://atom.io/packages/linter-coffeelint
apm star linter-coffeelint
# https://atom.io/packages/linter-jshint
apm star linter-jshint
apm star linter-pug
 
apm star jsonlint
 
 
## Git ##
apm star merge-conflicts
 
 
## JavaScript ##
# A JavaScript code analyzer for deep
apm star atom-ternjs
 
### Vue.js ###
apm star language-vue
 
 
## Jade/Pug/Stylus for our Node.js projects
apm star language-jade
apm star Stylus
 
 
## 最後に star した Package を全てインストール
apm stars --install
 
 
## Install third party plugins
# atom-ternjs
cd ~/.atom/packages/atom-ternjs
npm install tern-node-express

以上です。

Atom Package の参考情報

[Atom] Stylus をシンタックスハイライトしてくれるパッケージ

Atom エディタで Stylus のシンタックスハイライトをしてくれるパッケージは Stylus と language-stylus の2つがあります。

apm-stylus

apm-language-stylus

インストール数が 14000 と 1300 でかなり違うので、僕は圧倒的に多い Stylus を使ってます。

Stylus パッケージのインストール

apm install Stylus

Stylus はニッチではありますが、デフォルトで Atom の Core Package として用意しておいてくれると嬉しいですね。

[Atom] デフォルトで入っているパッケージ一覧

Atom エディタに最初から入っているパッケージ一覧は apm list コマンドで確認できます。

version 0.182.0 にはビルトインパッケージが 84 個もあるみたいです。

% atom -v
0.182.0
 
% apm list
Built-in Atom packages (84)
├── archive-view@0.50.0
├── atom-dark-syntax@0.26.0
├── atom-dark-ui@0.47.0
├── atom-light-syntax@0.26.0
├── atom-light-ui@0.41.0
├── autocomplete@0.44.0
├── autoflow@0.22.0
├── autosave@0.20.0
├── background-tips@0.23.0
├── base16-tomorrow-dark-theme@0.25.0
├── base16-tomorrow-light-theme@0.8.0
├── bookmarks@0.35.0
├── bracket-matcher@0.71.0
├── command-palette@0.34.0
├── deprecation-cop@0.37.0
├── dev-live-reload@0.41.0
├── encoding-selector@0.18.0
├── exception-reporting@0.24.0
├── find-and-replace@0.157.0
├── fuzzy-finder@0.67.0
├── git-diff@0.52.0
├── go-to-line@0.30.0
├── grammar-selector@0.45.0
├── image-view@0.49.0
├── incompatible-packages@0.22.0
├── keybinding-resolver@0.29.0
├── language-c@0.40.0
├── language-clojure@0.12.0
├── language-coffee-script@0.39.0
├── language-csharp@0.5.0
├── language-css@0.28.0
├── language-gfm@0.64.0
├── language-git@0.10.0
├── language-go@0.21.0
├── language-html@0.29.0
├── language-hyperlink@0.12.2
├── language-java@0.14.0
├── language-javascript@0.57.0
├── language-json@0.12.0
├── language-less@0.24.0
├── language-make@0.13.0
├── language-mustache@0.11.0
├── language-objective-c@0.15.0
├── language-perl@0.10.0
├── language-php@0.20.0
├── language-property-list@0.8.0
├── language-python@0.32.0
├── language-ruby@0.48.0
├── language-ruby-on-rails@0.19.0
├── language-sass@0.34.0
├── language-shellscript@0.12.0
├── language-source@0.9.0
├── language-sql@0.14.0
├── language-text@0.6.0
├── language-todo@0.16.0
├── language-toml@0.15.0
├── language-xml@0.28.0
├── language-yaml@0.22.0
├── link@0.30.0
├── markdown-preview@0.137.0
├── metrics@0.45.0
├── notifications@0.28.0
├── one-dark-syntax@0.3.0
├── one-dark-ui@0.5.0
├── one-light-syntax@0.4.0
├── one-light-ui@0.4.0
├── open-on-github@0.32.0
├── package-generator@0.38.0
├── release-notes@0.51.0
├── settings-view@0.183.0
├── snippets@0.75.0
├── solarized-dark-syntax@0.32.0
├── solarized-light-syntax@0.19.0
├── spell-check@0.54.0
├── status-bar@0.60.0
├── styleguide@0.44.0
├── symbols-view@0.83.0
├── tabs@0.67.0
├── timecop@0.30.0
├── tree-view@0.160.0
├── update-package-dependencies@0.8.0
├── welcome@0.24.0
├── whitespace@0.29.0
└── wrap-guide@0.31.0

少し前のバージョンでは Built-in Atom packages に含まれていなくてあとから追加されたパッケージもいくつかあります。

なので、デフォルトで搭載されているパッケージを apm stars でお気に入り管理しているものから削除するなど、定期的にメンテナンスしてあげると良さそうです。

ちなみに、Built-in Atom packages に含まれているパッケージを apm install すると警告メッセージが出るようになってました。

apm install archive-view
 
The archive-view package is bundled with Atom and should not be explicitly installed.
You can run `apm uninstall archive-view` to uninstall it and then the version bundled
with Atom will be used.
 
Installing archive-view to /Users/bakorer/.atom/packages ✓

特にデフォルトとは違うバージョンを利用したいという理由がなければ迷わず uninstall しましょう。

% apm uninstall archive-view

以上です。

[Atom] apm (Atom Package Manager) でパッケージを管理する

Atom エディタにインストールするパッケージを管理するなら atom/apm (Atom Package Manager) の star コマンドを使うのが便利です。

以下、ざっと使い方をご紹介します。

API トークンの設定

初回に apm コマンドを使うときだけ、ブラウザで https://atom.io/account のページが開くので、記載されている API token をターミナルに入力して設定する必要があります。

% apm stars
Welcome to Atom!
 
Before you can publish packages, you'll need an API token.
 
Visit your account page on Atom.io https://atom.io/account,
copy the token and paste it below when prompted.
 
Press [Enter] to open your account page on Atom.io. 
Token> _x9Ra8h3koIPN9efvjYHUcx
Saving token to Keychain ✓
Packages starred by you (0)
└── (empty)
 
Use `apm stars --install` to install them all or visit http://atom.io/packages to read more about them.

パッケージにスターを付ける

下記のように apm star でパッケージにスターを付けることができます。

% apm star atom-beautifier 
⭐  Starring atom-beautifier ✓
 
% apm star atom-jshint
⭐  Starring atom-jshint ✓

スターを付けたパッケージを一覧表示する

apm stars もしくは apm starred コマンドで apm star したパッケージのリストを出力させることができます。

% apm stars
Packages starred by you (2)
├── ⭐  atom-beautifier Beautifier for Atom (5133 downloads, 8 stars)
└── ⭐  atom-jshint Validates your JS against JSHint as you type. The original and most used. (15429 downloads, 35 stars)
 
Use `apm stars --install` to install them all or visit http://atom.io/packages to read more about them.

スターを付けたパッケージをまとめてインストール

apm stars –install コマンドで apm stars で一覧表示されたパッケージをまとめてインストールすることができます。

apm stars --install
Installing atom-beautifier to /Users/bakorer/.atom/packages ✓
Installing atom-jshint to /Users/bakorer/.atom/packages ✓

以上です。


参考情報

Atom の apm stars で興味のあるパッケージを管理する – Qiita

Atomの apm star が地味に便利 – Qiita

[Atom.io] 500 Error Page

Atom.io で Package をインストールしようとしたら、何を検索しても表示されない。

Web で https://atom.io/packages/search?q=node とかキーワード検索すると 500 エラーページが・・・

atom-io-500-error

Package を色々と漁りたかったけど、明日は朝からワールドカップ 日本 vs ギリシャ なので寝ます。

[Atom.io] インストール後の初期設定

Atom.io をインストールしてからやった設定をメモ。

(最終更新日:2014/06/20)


Core Settings

まず、Core Settingsの項目は変更せず。

atom_io-default-core_settings


Editor Settings

次に、Editor Settingsの項目はデフォルトは下記のような感じなので、

atom_io-default-editor_settings

↓ のように変更しました。

atom_io-my-editor_settings

Editor Settings の変更点

無効 → 有効

  • Show Indent Guide
  • Show Invisibles

有効 → 無効

  • Soft Tabs
  • Soft Wrap
  • Soft Wrap At Preferred Line Length

Packages

デフォルトで色んなPackageが入ってますね。

Whitespace

半角スペースとか自動で消さないように Disable に変更しました。

とりあえず、以上です。(随時更新予定)