Web開発者向けの最高のAtomパッケージの12を掘り下げます

この記事では、Web開発者向けの最高のAtomパッケージの12を掘り下げます。Atomには、Visual StudioCodeやSublimeTextを含む多くの競争がありますが、それでも人気のある有能なWeb開発ツールとしての独自性を保持しています。

なぜAtomエディターを使用するのですか？

VS Codeは、過去数年にわたってWeb開発者の心をつかんだかもしれませんが、GitHubのAtomエディターは、市場でより優れた、より有能なコードエディターの1つです。それをとても好きな理由は次のとおりです。

• インストーラーは、Windows、Mac、およびLinuxで使用できます
• 過去10年間にわたって継続的に更新されています
• 初期リリースに対する批判を受けて、速度が向上しました
• 制限やナグスクリーンなしでダウンロードして使用することはまだ無料です

Microsoftは2018年にGitHubを買収したため、現在、同社には2つの優れたElectronベースのコードエディターがあります。Atomの長期的な将来はおそらく疑問視されていますが、開発は続いています。新しいコードエディタを探している場合（おそらくAdobeがブラケットを放棄した後）、Atomはリストの一番上にあるはずです。

Atomパッケージとテーマ

Atomは、常に「21世紀のハッキング可能なテキストエディタ」としての地位を確立してきました。基本インストールには比較的少数の機能がありますが、パッケージと呼ばれるアドオンを使用して拡張できます。

これを書いている時点で、3,000を超えるAtomテーマと9,000を超えるAtomパッケージが利用可能です。この理由の一部は、AtomがWebテクノロジーを使用して拡張できることです。Node.jsまたはクライアント側のJavaScript開発者であれば、独自のAtomパッケージを作成し、必要な方法でAtomを拡張するのに十分な知識があります。

Atomパッケージをインストールする方法

Atomにはパッケージマネージャーが組み込まれているため、Atomパッケージの追加は非常に簡単です。（Atomパッケージのインストールが非常に簡単なこともあり、多くの開発者がAtomに惹かれています。）

Atomエディターを開き、上部のナビゲーションバーの[編集]メニューをクリックして、[設定]を選択します。新しい[設定]タブが開きます。[ +インストール]メニュー項目をクリックすると、右側に検索フィールドが表示されます。これにより、新しいAtomパッケージを名前で検索できるようになります。目的のAtomパッケージを見つけたら、[インストール]ボタンを押します。

「パッケージ」メニュー項目をクリックすると、現在インストールされているAtomパッケージが表示されます。自分でインストールしたものはすべて、[コミュニティパッケージ]メニュー項目の下に表示されます。コアパッケージメニュー項目もあることに気付くでしょう。これにより、デフォルトでインストールされているパッケージが一覧表示されます。必要に応じてこれらを無効にすることができますが、エディターの基本機能に影響を与えるため、無効にしないことをお勧めします。

コマンドラインからのAtomパッケージのインストール

apmAtomには、（Atom Package Managerの略）というコマンドラインツールも付属しています。このツールを使用して、ターミナルから直接パッケージをインストールすることもできます。

構文は次のとおりですapm install <package-name>。

apmコマンドラインオプションを使用するapm configか、ファイルを手動で編集して構成でき~/.atom/.apmrcます。入力apm helpすると、他に何ができるかがわかります。

そうは言っても、Atomをさらに優れたコードエディタにする12の最高のAtomパッケージといくつかのボーナスオプションがあります…

1.ファイルアイコン

Atomのデフォルトのファイルとフォルダーのアイコンは、「機能的」として最もよく説明されています。などのアイコンセットfile-iconsは、エディタの外観を改善し、特定のタイプのファイルを見つけやすくします。

• ここからファイルアイコンパッケージを入手してください：file-icons

+インストールペインで「アイコン」を検索して、数十の代替オプションを見つけます。

2.プロジェクトマネージャー

Atomは、シンプルなフォルダーベースのプロジェクト管理を提供します。いくつかのプロジェクトを切り替える場合は十分ですが、project-managerより高度なプロジェクトには理想的です。コマンドパレットオプションと編集可能なJSONファイルを提供し、プロジェクトを定義したり、色やタブ設定などの独自のカスタム設定を使用したりできます。

• ここでAtomプロジェクトマネージャーパッケージを入手してください：project-manager

3.同期設定

複数のデバイスでAtomを実行している場合は、インストール間で設定、キーバインディング、およびスニペットを同期すると便利です。Configフォルダー（ [設定]、[Configフォルダーを開く]）のファイルのクローンを作成することで手動で同期できますがsync-settings、より簡単な自動オプションが提供されます。設定はGistに保存されますが、他のAtomパッケージでは、ローカルフォルダーまたはGitリポジトリを選択できます。

• ここからAtom同期設定パッケージを入手してください：sync-settings

4.Todoショー

Atomを起動し、フォルダーを開いてから…次は何ですか？Atomパッケージは、、、などtodo-showのキーワードを含むプロジェクト全体に散在するコメントを表示しますが、独自の正規表現を追加することもできます。TODOFIXMECHANGED

• ここでAtomTodoShowパッケージを入手してください：todo-show

5.ミニマップ

minimapは最も人気のあるAtomパッケージの1つで、ダウンロード数は700万回を超えています。コードエディタウィンドウの右側にコードの要約ビューが表示されます。これは、すばやくナビゲーションするのに非常に役立ちます。この機能は潜在意識に入ります。あなたはそれを使っているとは思わないでしょう、しかしそれがそこにないときあなたはそれを見逃すでしょう。

ここでAtomミニマップパッケージを入手してください：minimap

6.選択したものを強調表示します

VS Code、Sublime Text、またはNotepad ++でキーワードまたは変数を選択すると、他のすべてのインスタンスが強調表示されます。highlight-selectedその機能をAtomにもたらし、以下と組み合わせるとさらに優れたものになりminimap-highlight-selectedます。

• ここでHighlightSelectedAtomパッケージを入手してください：highlight-selected
• ここでminimap-highlight-selectedパッケージを入手してください：minimap-highlight-selected

7.HTMLを自動閉じる

名前が示すように、このパッケージは、開始タグを完了すると、終了HTMLタグを自動的に追加します。これは単純なパッケージかもしれませんが、HTMLタグを自動で閉じることなしに対処することはできません！autoclose-htmlマークアップの作成速度が2倍になります。箱から出してすぐに機能しますが、パッケージでは、インラインで完了するタグ（<p></p>または<li></li>）と改行ブロックを作成するタグ（<article> ... </article>または）を定義することもできます<ol> ... <ol>。

• ここでAutoCloseHTML Atomパッケージを入手してください：autoclose-html

8.顔料

ほとんどのエディターにはCSSカラープレビューアがありpigmentsますが、Atomのパッケージに一致するものはほとんどありません。色、CSSカスタムプロパティ、プリプロセッサ変数を解析し、やなどの色を変更する関数を実行しlighten()ますdarken()。ソースファイルをスキャンして色のパレットを作成し、どこからでも参照できるようにします。

• ここでPigmentsAtomパッケージを入手してください：pigments

また、カラーピッカーパッケージは、名前や16進値を覚えるよりも色を選択したい人向けです。

• こちらからカラーピッカーパッケージを入手してください：color-picker

9.リンター

コマンドラインからリンターを実行できますが、実際のエディター内コード検証ほど迅速でも効果的でもありません。リンターは最高の1つです。高速で、一部の競合他社よりも邪魔になりません。

Linterは、数十のプログラミング言語用のAPIを提供するコアAtomパッケージであることに注意してください。HTMLやCSSなどの一部は、それ以上のソフトウェアを必要としません。のような他のものeslintは、ノードモジュールと構成設定を必要とします（完全な手順が提供されています）。

コードをリントするとコードの品質が大幅に向上するので、試してみることをお勧めします。

• ここでLinterパッケージを入手してください：linter
• ここでHTMLHintパッケージを入手してください：linter-htmlhint
• ここでAtomCSSLintパッケージを入手してください：linter-csslint
• ここでESLintパッケージを入手してください：linter-eslint

10.インデントの自動検出

コーダーは、タブとスペースのどちらを使用するかについて合意することはありません。彼らがそうするときでさえ、彼らは2、4、または8つのキャラクターフレーバーでそれらを好むかもしれません。私は通常、ほとんどの人を悩ませるもの（3文字のハードタブ？）を選びますがauto-detect-indentation、プロジェクトに必要なものを理解するので、心配する必要はありません。

• ここでAtomAutoDetect Indentationパッケージを入手してください：auto-detect-indentation

または、Atom Beautifyを使用して、全員のコードを好みのスタイルに一致させることもできます。

• ここでAtomBeautifyパッケージを入手してください：atom-beautify

11.テレタイプ

Live Share for VS Codeを使用したことがある場合は、それがペアプログラミングに革命をもたらした方法を理解できます。この拡張機能を使用すると、2人で同じワークスペースのコードを同時にリモートで編集できます。

teletypeAtomと同等のパッケージです。ベータ版のサービスですが、見た目も良く、信頼できるようです。

• ここでAtomテレタイプパッケージを入手してください：テレタイプ

12.その他のAtomパッケージ

私の見解では、最高のAtomパッケージのいくつかについて説明しました。最後に、トップリストには載っていませんが、それでも本当に便利で一見の価値があるいくつかの特別な言及で締めくくります。

• Emmet（以前はZen Codeと呼ばれていました）は、CSSのような式をHTMLタグに拡張できます：emmet
• REST Webサービスを作成している場合、AtomのRESTクライアントはクイックHTTPテストツールを提供します。Postmanのような強力な代替手段には匹敵しませんが、迅速で汚いテストには最適です：rest-client

• 最後に、更新を手動で確認する必要はありません。auto-update-packages6時間ごとにパッケージを検証し、作業を行います：auto-update-packages

営業時間外のアドオン

キーカウント（keycount ）で、その日の十分な作業が完了したことが証明された場合は、 xkcdコミックを読んでリラックスするか、テトリス、リバーシ、ポン、スネーク、またはシムシティの簡単なゲームを楽しんでください。

お気に入りのAtomアドオンを見逃したことがありますか？  

ソース：https ：//www.sitepoint.com/essential-atom-packages-web-development/

#web  #packaging #atom 

What is GEEK

Buddha Community

Web開発者向けの最高のAtomパッケージの12を掘り下げます

この記事では、Web開発者向けの最高のAtomパッケージの12を掘り下げます。Atomには、Visual StudioCodeやSublimeTextを含む多くの競争がありますが、それでも人気のある有能なWeb開発ツールとしての独自性を保持しています。

なぜAtomエディターを使用するのですか？

VS Codeは、過去数年にわたってWeb開発者の心をつかんだかもしれませんが、GitHubのAtomエディターは、市場でより優れた、より有能なコードエディターの1つです。それをとても好きな理由は次のとおりです。

• インストーラーは、Windows、Mac、およびLinuxで使用できます
• 過去10年間にわたって継続的に更新されています
• 初期リリースに対する批判を受けて、速度が向上しました
• 制限やナグスクリーンなしでダウンロードして使用することはまだ無料です

Microsoftは2018年にGitHubを買収したため、現在、同社には2つの優れたElectronベースのコードエディターがあります。Atomの長期的な将来はおそらく疑問視されていますが、開発は続いています。新しいコードエディタを探している場合（おそらくAdobeがブラケットを放棄した後）、Atomはリストの一番上にあるはずです。

Atomパッケージとテーマ

Atomは、常に「21世紀のハッキング可能なテキストエディタ」としての地位を確立してきました。基本インストールには比較的少数の機能がありますが、パッケージと呼ばれるアドオンを使用して拡張できます。

これを書いている時点で、3,000を超えるAtomテーマと9,000を超えるAtomパッケージが利用可能です。この理由の一部は、AtomがWebテクノロジーを使用して拡張できることです。Node.jsまたはクライアント側のJavaScript開発者であれば、独自のAtomパッケージを作成し、必要な方法でAtomを拡張するのに十分な知識があります。

Atomパッケージをインストールする方法

Atomにはパッケージマネージャーが組み込まれているため、Atomパッケージの追加は非常に簡単です。（Atomパッケージのインストールが非常に簡単なこともあり、多くの開発者がAtomに惹かれています。）

Atomエディターを開き、上部のナビゲーションバーの[編集]メニューをクリックして、[設定]を選択します。新しい[設定]タブが開きます。[ +インストール]メニュー項目をクリックすると、右側に検索フィールドが表示されます。これにより、新しいAtomパッケージを名前で検索できるようになります。目的のAtomパッケージを見つけたら、[インストール]ボタンを押します。

「パッケージ」メニュー項目をクリックすると、現在インストールされているAtomパッケージが表示されます。自分でインストールしたものはすべて、[コミュニティパッケージ]メニュー項目の下に表示されます。コアパッケージメニュー項目もあることに気付くでしょう。これにより、デフォルトでインストールされているパッケージが一覧表示されます。必要に応じてこれらを無効にすることができますが、エディターの基本機能に影響を与えるため、無効にしないことをお勧めします。

コマンドラインからのAtomパッケージのインストール

apmAtomには、（Atom Package Managerの略）というコマンドラインツールも付属しています。このツールを使用して、ターミナルから直接パッケージをインストールすることもできます。

構文は次のとおりですapm install <package-name>。

apmコマンドラインオプションを使用するapm configか、ファイルを手動で編集して構成でき~/.atom/.apmrcます。入力apm helpすると、他に何ができるかがわかります。

そうは言っても、Atomをさらに優れたコードエディタにする12の最高のAtomパッケージといくつかのボーナスオプションがあります…

1.ファイルアイコン

Atomのデフォルトのファイルとフォルダーのアイコンは、「機能的」として最もよく説明されています。などのアイコンセットfile-iconsは、エディタの外観を改善し、特定のタイプのファイルを見つけやすくします。

• ここからファイルアイコンパッケージを入手してください：file-icons

+インストールペインで「アイコン」を検索して、数十の代替オプションを見つけます。

2.プロジェクトマネージャー

Atomは、シンプルなフォルダーベースのプロジェクト管理を提供します。いくつかのプロジェクトを切り替える場合は十分ですが、project-managerより高度なプロジェクトには理想的です。コマンドパレットオプションと編集可能なJSONファイルを提供し、プロジェクトを定義したり、色やタブ設定などの独自のカスタム設定を使用したりできます。

• ここでAtomプロジェクトマネージャーパッケージを入手してください：project-manager

3.同期設定

複数のデバイスでAtomを実行している場合は、インストール間で設定、キーバインディング、およびスニペットを同期すると便利です。Configフォルダー（ [設定]、[Configフォルダーを開く]）のファイルのクローンを作成することで手動で同期できますがsync-settings、より簡単な自動オプションが提供されます。設定はGistに保存されますが、他のAtomパッケージでは、ローカルフォルダーまたはGitリポジトリを選択できます。

• ここからAtom同期設定パッケージを入手してください：sync-settings

4.Todoショー

Atomを起動し、フォルダーを開いてから…次は何ですか？Atomパッケージは、、、などtodo-showのキーワードを含むプロジェクト全体に散在するコメントを表示しますが、独自の正規表現を追加することもできます。TODOFIXMECHANGED

• ここでAtomTodoShowパッケージを入手してください：todo-show

5.ミニマップ

minimapは最も人気のあるAtomパッケージの1つで、ダウンロード数は700万回を超えています。コードエディタウィンドウの右側にコードの要約ビューが表示されます。これは、すばやくナビゲーションするのに非常に役立ちます。この機能は潜在意識に入ります。あなたはそれを使っているとは思わないでしょう、しかしそれがそこにないときあなたはそれを見逃すでしょう。

ここでAtomミニマップパッケージを入手してください：minimap

6.選択したものを強調表示します

VS Code、Sublime Text、またはNotepad ++でキーワードまたは変数を選択すると、他のすべてのインスタンスが強調表示されます。highlight-selectedその機能をAtomにもたらし、以下と組み合わせるとさらに優れたものになりminimap-highlight-selectedます。

• ここでHighlightSelectedAtomパッケージを入手してください：highlight-selected
• ここでminimap-highlight-selectedパッケージを入手してください：minimap-highlight-selected

7.HTMLを自動閉じる

名前が示すように、このパッケージは、開始タグを完了すると、終了HTMLタグを自動的に追加します。これは単純なパッケージかもしれませんが、HTMLタグを自動で閉じることなしに対処することはできません！autoclose-htmlマークアップの作成速度が2倍になります。箱から出してすぐに機能しますが、パッケージでは、インラインで完了するタグ（<p></p>または<li></li>）と改行ブロックを作成するタグ（<article> ... </article>または）を定義することもできます<ol> ... <ol>。

• ここでAutoCloseHTML Atomパッケージを入手してください：autoclose-html

8.顔料

ほとんどのエディターにはCSSカラープレビューアがありpigmentsますが、Atomのパッケージに一致するものはほとんどありません。色、CSSカスタムプロパティ、プリプロセッサ変数を解析し、やなどの色を変更する関数を実行しlighten()ますdarken()。ソースファイルをスキャンして色のパレットを作成し、どこからでも参照できるようにします。

• ここでPigmentsAtomパッケージを入手してください：pigments

また、カラーピッカーパッケージは、名前や16進値を覚えるよりも色を選択したい人向けです。

• こちらからカラーピッカーパッケージを入手してください：color-picker

9.リンター

コマンドラインからリンターを実行できますが、実際のエディター内コード検証ほど迅速でも効果的でもありません。リンターは最高の1つです。高速で、一部の競合他社よりも邪魔になりません。

Linterは、数十のプログラミング言語用のAPIを提供するコアAtomパッケージであることに注意してください。HTMLやCSSなどの一部は、それ以上のソフトウェアを必要としません。のような他のものeslintは、ノードモジュールと構成設定を必要とします（完全な手順が提供されています）。

コードをリントするとコードの品質が大幅に向上するので、試してみることをお勧めします。

• ここでLinterパッケージを入手してください：linter
• ここでHTMLHintパッケージを入手してください：linter-htmlhint
• ここでAtomCSSLintパッケージを入手してください：linter-csslint
• ここでESLintパッケージを入手してください：linter-eslint

10.インデントの自動検出

コーダーは、タブとスペースのどちらを使用するかについて合意することはありません。彼らがそうするときでさえ、彼らは2、4、または8つのキャラクターフレーバーでそれらを好むかもしれません。私は通常、ほとんどの人を悩ませるもの（3文字のハードタブ？）を選びますがauto-detect-indentation、プロジェクトに必要なものを理解するので、心配する必要はありません。

• ここでAtomAutoDetect Indentationパッケージを入手してください：auto-detect-indentation

または、Atom Beautifyを使用して、全員のコードを好みのスタイルに一致させることもできます。

• ここでAtomBeautifyパッケージを入手してください：atom-beautify

11.テレタイプ

Live Share for VS Codeを使用したことがある場合は、それがペアプログラミングに革命をもたらした方法を理解できます。この拡張機能を使用すると、2人で同じワークスペースのコードを同時にリモートで編集できます。

teletypeAtomと同等のパッケージです。ベータ版のサービスですが、見た目も良く、信頼できるようです。

• ここでAtomテレタイプパッケージを入手してください：テレタイプ

12.その他のAtomパッケージ

私の見解では、最高のAtomパッケージのいくつかについて説明しました。最後に、トップリストには載っていませんが、それでも本当に便利で一見の価値があるいくつかの特別な言及で締めくくります。

• Emmet（以前はZen Codeと呼ばれていました）は、CSSのような式をHTMLタグに拡張できます：emmet
• REST Webサービスを作成している場合、AtomのRESTクライアントはクイックHTTPテストツールを提供します。Postmanのような強力な代替手段には匹敵しませんが、迅速で汚いテストには最適です：rest-client

• 最後に、更新を手動で確認する必要はありません。auto-update-packages6時間ごとにパッケージを検証し、作業を行います：auto-update-packages

営業時間外のアドオン

キーカウント（keycount ）で、その日の十分な作業が完了したことが証明された場合は、 xkcdコミックを読んでリラックスするか、テトリス、リバーシ、ポン、スネーク、またはシムシティの簡単なゲームを楽しんでください。

お気に入りのAtomアドオンを見逃したことがありますか？  

ソース：https ：//www.sitepoint.com/essential-atom-packages-web-development/

#web  #packaging #atom