Web 開発者向けの Atom エディター プラグインの紹介_html/css_WEB-ITnose

Atom コミュニティは非常に繁栄しており、拡張機能/プラグイン (パッケージ) が豊富にあります。 Atom のパッケージのインストールは非常に簡単です。エディタの環境設定でインストールすることも、コマンド ラインで apm コマンドを使用してインストールすることもできます。

WEB開発に適したパッケージを紹介する前に、Atomパッケージのインストール方法を簡単に説明します。

Atom パッケージをインストールします

環境設定からパッケージをインストールします

ショートカット キー command + 、 / ctrl + を使用して環境設定を開きます。左側の [インストール] をクリックして、オンライン パッケージを参照します。 上部には検索ボックスがあり、atom.io で公開されているパッケージを検索でき、続いて機能パッケージ (選択されたパッケージ) が表示され、比較的高品質なパッケージがいくつかリストされます。

apm コマンドによるパッケージのインストール

Atom には、apm パッケージ管理ツールが付属しています。コマンドラインで次のコマンドを実行して、apm がインストールされているかどうかを確認できます。

apm help install

コマンドの後に apm install の詳細情報が出力されます。出力が apm install のコマンド情報でない場合は、Atom メニューを開き、Install Shell Commands を選択して apm をインストールします。

apm が正しくインストールされていることを確認したら、パッケージのインストールを開始できます。上記の apm help install を実行すると表示されるように、インストール コマンドは次のとおりです:

apm install [<package_name>...]apm install <package_name>@<package_version>apm install --packages-file my-packages.txt

パッケージ推奨

クイック入力クラス

• autocomplete-plus 、入力すると、候補が表示されます。

• atom-ctags、オートコンプリート機能を強化するには ctag を使用します。autocomplete-plus を使用する必要があります。

• javascript-snippets は、その名前が示すように、特殊文字を入力すると、対応する JavaScript コード スニペットに自動的に展開されます。

• vim-mode

  VIM-Mode は、VIM エディターの操作モードを使用した Atom での編集をサポートします。これは私にとって非常にキラー パッケージです。これまでは、WebStorm 上のプラグインを使用して VIM 操作をシミュレートしていましたが、これは非常に使いにくかったです。 Atom 上でシミュレートされた VIM 操作は、比較的スムーズに使用できます。 VIM 操作と通常の編集操作を混在させることができます。

• emmet

  HTML の手書きはやや専門的に見えますが、手書きの問題は、大量のコードが必要なことです。 Emmet は手書きの効率を大幅に向上させます。着る価値は十分にあります。

• 行に移動、指定した行にジャンプします。ctrl + g を押して行番号を入力します。

リンター

• jshint、JavaScript を検証し、より専門的な JavaScript コードを作成します。

• csslint、CSSLint は不正な CSS ルールを報告します。

バージョン管理クラス

• git plus、ターミナルとエディターを行き来せずに Atom で Git コマンドを実行。

• git-log は、Atom のコミット レコードをグラフィカルに表示します。

• merge-conflicts、Atom でマージされた競合ファイルを処理します。

補助クラス

• ミニマップは、Atom と Sublime Text のソース コード プレビューであり、豊富なカスタマイズ オプションを提供しており、使用する価値があります。

• ファイルアイコンでは、ファイルの種類に対応するアイコンが表示されます。

• アトムの美化、コードのフォーマット、より統一されたコード スタイル。

• カラーピッカー

  エディターで色を選択します。右クリックしてカラーピッカーを選択するか、cmd + shift + c / ctrl + alt + c ショートカット キーを押してカラー選択パネルを表示します。 HEX、HEXA、RGB、RGBA、HSL、HSLA の形式で指定されたカラー値をサポートします。

• csscomb、CSSComb の拡張ツール、CSSComb は、より美しい CSS を書くのに役立ちます。

• autoprefixer。特定のプレフィックスを CSS プロパティに自動的に追加する AutoPrefix の拡張機能。

• ローカリゼーション、国際化パッケージ、簡体字中国語をサポートします。ただし、私が使用しているバージョン0.179.0では使用できません。