Atom Liveサーバーをアクティブにする方法


答え 1:

Atomの汎用パッケージ:

  • atom-like-brackets-editor-中括弧「{}」、括弧「()」の開始位置と終了位置を、カーソルに触れるだけで確認できます。
  • atom-beautify-AtomでHTML、CSS、JavaScript、PHP、Python、Ruby、Java、C、C ++、C#、Objective-C、CoffeeScript、TypeScript、SQLを美化
  • atom-live-server-livereload機能を備えたhttpサーバーを起動します。
  • browser-plus-新しいタブでAtom内のWebブラウザーを起動できます
  • クリップボードオートコンプリート-編集で「cp」を使用して、クリップボードからテキストを簡単に取得します。
  • file-icons-視覚的なgreppingを改善するために、ファイル拡張子アイコンと色をファイルに割り当てます
  • filesize-現在のファイルのサイズをステータスバーに表示します
  • file-watcher-ディスク上のファイルが変更されたときにプロンプ​​トを表示する、Atomのオープンファイルウォッチャー。
  • git-clone-リポジトリをすばやくgit cloneして、新しいAtomウィンドウで開きます
  • git-plus-端末に行かなくてもgitアクションを実行できます
  • git-time-machine-ファイルのgit commit履歴を視覚的に操作します
  • highlight-line-エディターで現在の行を強調表示します
  • ハイライト選択-単語をダブルクリックすると、ファイル内のその単語の他の出現箇所が強調表示されます。 (minimap-highlight-selectedを含むこのパッケージは素晴らしいです)
  • jumpy-表示されているペイン間でファイルをジャンプするための動的ホットキーを作成します。
  • linter-Atomの基本リンター。 この上に他のリンターパッケージをインストールします。 先頭に "linter"という単語が付いている他のlinterパッケージを検索します。 例:linter-jshint、linter-csslint、linter-jsonlint、linter-ruby、linter-pylint
  • local-history-GITがDIDNTになったときに何度も救われました! コードファイルに対する変更の履歴を保持します。 Googleドキュメントの変更履歴を考えてください。 何かをコミットしたりGitを使用したりするのを忘れたときは本当に強力です。
  • maybs-quit-[CMD-Q]キーでエディターを誤って閉じるのを防ぐために終了する前のモーダル確認。
  • merge-conflicts-Atom内でのgitの競合を解決できます
  • minimap-完全なソースコードのプレビュー(Sublime Textなど)。 注:以下の他のミニマップパッケージは、ミニマップのインストールに依存しています。 これらのパッケージを一緒に使用すると、強力な編集エクスペリエンスが得られると思います。
  • minimap-cursorline-ミニマップにAtomカーソルラインを表示します
  • minimap-find-and-replace-検索と置換の結果をミニマップに表示
  • minimap-highlight-selected-ミニマップに選択を表示します。 ⚠ハイライトされたパッケージが必要です。
  • minimap-selection-ミニマップで現在選択されている単語の出現箇所を強調表示します。 これは、オカレンスの数とファイルのどこに存在するかを確認するのに最適な方法です。
  • minimap-git-diff-ミニマップにgitの変更を表示します(緑=追加、黄色=変更、赤=削除)。 大きなファイルで変更したセクションをすばやく確認するのに最適です。
  • ブラウザーで開く-コマンドパレットとオプションクリックメニューに[ブラウザーで開く]を追加します
  • open-terminal-here-コマンドパレットとオプションクリックメニューに「ここにターミナルを開く」を追加します
  • package-manager-commands-コマンドパレットからパッケージを無効/有効にします(Sublime Textなど)。
  • package-settings-特定のパッケージ(Sublime Textなど)の設定ペインをすばやく開く
  • ペインレイアウトプラス-エディター内に複数のペインを作成できます(崇高なテキストのように)
  • スクリプト-Atom内でさまざまなスクリプトファイルを実行できます。 JavaScript、CoffeeScript、Ruby、Python、Go、Bash、PowerShellスクリプトをサポートします。 さらに追加できます!
  • set-syntax-現在のファイルの構文を設定するための簡単なコマンドパレットコマンドを作成します(崇高な同一のset構文コマンド)
  • swackets-関数、条件ステートメントの内部にどのようにネストされているかを簡単に知ることができます
  • sync-settings-パッケージ設定、キーマップ、およびインストール済みパッケージの同期
  • tree-view-autoresize-フォルダーを開いたり閉じたりするときにツリービューを自動サイズ変更
  • tree-view-git-status-AtomツリービューでGitリポジトリのステータスをすばやく確認できます。
  • platformio-ide-terminal-を使用すると、Atomエディター内から複数のターミナルセッションを起動できます(zshなどの他のシェルをサポートします)。
  • rest-client-お気に入りのエディター用のシンプルなRESTクライアント(Postmanと思いますが、エディター内にあります)
  • wakatime-プログラマー向けのFitbit。 プログラミングに関する自動化されたメトリックと洞察を取得します。

Atomのフロントエンド/ Web関連パッケージ:

  • atom-json-color-レベルごとの色を使用して色JSON
  • 自動IDクラス
  • autoclose-html-HTMLタグのクローズを自動化します
  • autoprefixer-CSSおよびSCSSファイルにautoprefixer
  • color-picker-Atom内からインタラクティブなカラーピッカーを起動します
  • css-clean-CSSとSASSを美しく並べ替えて揃えます
  • css-specificity-AtomのCSSファイルのセレクターの具体性を示します
  • docblockr-JavaScriptコードのコメントを簡単に書くことができます!
  • emmet-HTMLおよびCSSファイルを操作するときに、要素の作成、属性と値の追加などのショートカットを提供します
  • livestyle-atom-CSS、LESS、SCSS用のリアルタイム双方向編集ツール
  • 顔料-プロジェクトとファイルの色を表示します。
  • es6-javascript-開発生産性のためのJavaScriptスニペット

これらすべてのパッケージを使用すると、エディターの速度が低下しますか?

  • いいえ、減速は感じていません。 回転ディスクハードドライブ(HDD)と少ないRAMを持っている人がいるかもしれませんが、4 GBを超えるRAMとソリッドステートハードドライブ(SSD)がある場合、速度は速いはずです。
  • なぜそんなに多くのパッケージを使うのですか?

    • Atomは必要最低限​​のエディターであり、パッケージをインストールして追加機能を追加するかどうかはユーザー次第です
    • 私は実際にこれらすべてのパッケージを使用しています。 これらのパッケージの多くは、他のエディターの機能をSublime、VScodeなどのAtomにもたらします。
    • 私のテキストエディターは私の車のようなものです。

    デモ:

    • 上記のAtomエディターパッケージのほとんどは、私が作成したYouTubeビデオで見ることができます。Atomエディター-概要と上位パッケージのまとめ
    • 使用したパッケージをリストしたブログ投稿:

      Atomエディター:概要とパッケージのまとめ

答え 2:

アトム-ミニマップ:

ハイライト選択:

minimap-highlight-selected:

ハイライト列:

プロジェクトマネージャ:

アトム美化:

ファイルアイコン:

カラーピッカー:

ヒント:一部のプラグインは、アトムを本当に遅くする可能性があります。 アトムが遅いと感じる場合は、Packages-> Timecopを見て、プラグインがアトムを遅くしているのかどうかを確認してください。


答え 3: