美しいエディタ - Github Atom_html/css_WEB-ITnose

週末に何もすることがなかったので、フォーラムを閲覧していたところ、github からリリースされている新しいエディターである Atom エディターを見つけました。すぐに惹かれてしばらくいじってみたのですが、このエディタの特徴は「美しい」の一言です。 ！ ！

ダウンロードアドレス、公式ウェブサイトのダウンロード速度が遅すぎます。 。 。 githubのダウンロードアドレスはこちらです。エディターをより速くダウンロードするには、ここをクリックしてください。

Atom の紹介

Github 従業員の Nathan Sobo が Atom ブログで次のように述べています。「Sublime と TextMate は非常に便利ですが、スケーラビリティが不十分です。一方、Emacs と Vim は非常にスケーラブルですが、日常業務ではほとんど使用されないスクリプト言語を学習する必要があります。「そこで、彼らはバランスを見つけたいと考え、Atom プロジェクトを思いつきました。

Atom コード エディターは、Windows、Mac、Linux の 3 つの主要なデスクトップ プラットフォームをサポートしています。完全に無料で、すべてのソース コードが GitHub で公開されています。さまざまなプログラミング言語 (HTML / CSS / Javascript / PHP / Python / C / C++ / Objective C / Java / JSON / Perl / CoffeeScript / Go / Sass / YAML / Markdown など) のコードのハイライトをサポートします。

以下は Youku の Atom のプロモーションビデオです。おばあちゃんでも CSS を書くことができます。私の意見を共有してください。 Sublime エディターを使用している者としては、Atom への切り替えは非常に簡単です。Atom と Sublime の機能は非常に似ており、多くのショートカット キーも同じです。既存の機能は似ていて、Sublime の方が軽いですが、Atom は Sublime に比べて、より美しいインターフェース、強力な機能、使いやすいプラグイン、強力な拡張性などを備えていることは明らかだと思います。 。 。

美しい

Atom がエクスポーズ プラグインをインストールした後、Mac ユーザーは、shift+command+e キーの組み合わせを使用して予期せぬ快適さを得ることができます。 ！次のスクリーンショットは、各ファイルのおおよその内容を簡単に確認し、開いたファイルをすぐに選択できることを証明します。便利！ ！ ！美しい！ ！ ！

git との完全な統合

Atom エディターは GIT と完全に統合でき、コードとテキストに対するすべての変更をエディター インターフェイスに反映できます。

たとえば、ファイルに新しく書き込まれたコードは左側に緑色でマークされ、削除されたコードは赤色でマークされ、変更されたコードは黄色でマークされます。また、左側のディレクトリ ナビゲーションでファイルの変更を簡単に確認できます。変更されたファイルのファイル名とフォルダー名は強調表示されます。

エディターの下部には、現在のブランチとファイルの変更された行数が表示され、GIT ユーザーにとって非常に便利です。

WEB テクノロジーをベースに構築されています

Microsoft がリリースした Visual Studio Code エディターと同様に、Atom も WEB テクノロジー (Chromium+Node.js) をベースに開発されています。実は、Web ページがローカルで動作するだけで、多くの WEB エンジニアが興奮するのです。ユーザーは Javascript を使用してエディター プラグインを作成でき、これが Atom の強力なバックエンド サポートであることは Github の誰もが知っています。Atom プラグインは今後も増加し、Atom も増加すると信じています。ますます良くなります。

Atom 推奨プラグイン

プラグインのインストールは、設定画面で検索してインストールするか、Shift+command+P のショートカットキーを使用して行うことができます。検索入力ボックスをポップアップ表示し、インストールするキーワードを入力します。

atom-beautify: コードを美しく整形するためのプラグイン。

autocomplete-paths: . または / を入力すると、パスとそのパスの下のファイルが自動的に入力されます。とても使いやすいです！

自動プレフィクサー: CSS スタイルの互換性が追加されました。独自の CSS を記述すると、-webkit- などの接頭辞が付いた CSS スタイル コードが自動的に追加されます。

カラーピッカー: CSS で色を割り当てる必要がある場合、このプラグインを使用すると完全なカラーピッカーを表示し、リアルタイムで色を選択して変更できます。 。 。とても便利です！

ファイルアイコン: 左側のプロジェクト ディレクトリ内の各ファイルに、それを表す小さなアイコンがあれば美しいでしょう。はい、このプラグインが必要です。

git plus: もちろん、git をより有効に活用するためのものです。

マークダウン形式、マークダウンライター: Mac ユーザーではなく、マークダウンを使用して何かを書くのが好きなら、間違いなく Atom でマークダウンを書く感覚に夢中になるでしょう~~

リンター: コードの不規則性を自動的に通知し、より標準化されたコーディング習慣を身につけることができます。完全な情報プロンプトを取得したい場合は、このプラグイン linter-jshint

ミニマップをお勧めします。崇高なテキストを使用した学生は、右側の便利なサムネイルを知っておく必要があります。Atom では利用できないこのような便利なツールです。 ?そうしません！このプラグインは、見慣れたサムネイルを表示できるようになり、機能がさらに強力になります。

插件	说明
minimap-codeglance	放大镜的功能，这个插件就会让你的鼠标移动到缩略图上的时候放大显示那边部分的代码
minimap-find-and-replace	当你想替换单词的时候你会想起 ctrl+D ，可以你知道全篇有多少你要替换的字符串吗？通过这个插件你就可以在缩略图上看到所有你选中的字符串
minimap-git-diff	通过这个插件，每当你修改你的代码的时候你就会在缩略图上看到和之前git中的区别
minimap-highlight-selected	当你选中部分代码的时候，它就会高亮的出现在缩略图中
minimap-linter	这个插件让你的缩略图显示的更加漂亮和完整

公開: 一度に複数のファイルを開くときに、分割画面を使用してそれらを表示できます。このプラグインをインストールすると、shift+command+e を使用して分割画面で表示できるようになります。スクリーンショットはすでに上に表示されていますが、美しいと思いませんか? ！ ！

atom-material-ui: これは、非常にクールなダイナミックなエフェクトを備えたテーマ プラグインです。多くを語る必要はありませんが、自分で試してみればわかります。

ようやくこのエディターに長い時間を費やしましたが、プラグインをインストールするたびにその威力を実感できると、とてもやりがいを感じます。以下はこのテーマを使用しているときのスクリーンショットです。 、 右？

Atom ショートカット キー

実際、Atom と sublime の国境を越えたコンポーネントはよく似ています。たとえば、私がよく使用する cmd+d はほんの一部です。よく使うショートカットキー。

ctrl+shift+s 開いているファイルをすべて保存します

cmd+ ディレクトリ ツリーの表示または非表示

cmd+b 開いているファイルをすばやく切り替えます

cmd+d選択したコンテンツを検索

cmd+right、ctrl+E 行末に移動

cmd+left、ctrl+A 行頭に移動

cmd+ K, cmd+U 現在の文字を大文字にする

cmd+K, cmd+L 現在の文字を小文字にする

ctrl+shift+K 現在の行を削除

ctrl+shift+U エンコードオプションの切り替えを表示します

cmd+F 現在開いているページ内を検索

cmd+shift+f プロジェクト全体を検索

ctrl+space プロンプト完了情報

ctrl-shift-M Markdown プレビュー (Markdown プラグインがインストールされている場合)

必要に応じて、このリンクにアクセスしてください。ショートカット キーの概要は非常に包括的です。見たい方はここをクリックしてください