Atom エディタ Advanced_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:15:13
オリジナル
1619 人が閲覧しました

以下の内容は、Atom 公式チュートリアル Atom Flight Manual の最初の章を読んでいることを前提としています:

  • 第 1 章: はじめに

それ以外の場合は、読み進めずに戻って読んでください。第一章 最後にしましょう...

エンジニアが使用するエディターには 2 つの基本的な設計目標があります:

  1. キーボードの入力を減らし、間違いを減らし、より多くの作業を行うようにする
  2. スケーラブルで、カスタマイズ可能で、蓄積可能でなければなりません

Mac のエディター、エンジニアに人気のエディターは、かつては TextMate でしたが、後に Sublimetext や Atom が登場しました...それらはすべてそのようなエディターです。

Atom でキーボードを入力するとき、初心者は、括弧、引用符などがすべてペアで表示されることに「驚く」かもしれません。たとえば、単一引用符 ' をクリックすると、実際にはどうなるでしょうか。は一対の引用符であり、2 つの引用符の間でカーソルが点滅します: '|'... 丸括弧、角括弧、山括弧、中括弧などはすべて次のようなものです。エンジニアは、ある意味では、入力を減らし、ミスを減らし、そしてもちろん、より多くのことを行うために、できる限りのことをして効率を向上させることに努めます。

ここで問題です。引用符「」をクリックすると、2つの引用符が出てきます。すると、カーソルが真ん中にあるので、2つの引用符の間に入力できます...引用符の間に内容を入力した後、マークが付いている場合でも、右矢印キー → を押す必要があります。右矢印キーは右下隅にあるため、右手は長い距離を移動することになります... 非常に面倒ですよね。

Atom エディターで、⇧ ⌘ P を使用してコマンド パレットを呼び出し、その中に init スクリプトを入力します。この入力ボックスは Fuzy マッチングを使用するため、s を入力すると、Application: Open Your Init Script がすでに実行されていると推定されます。最初のものは、Enter キーを押すだけです ⏎... 次のコードをコピーして init スクリプト ファイルに貼り付けます:

# move cursor across the ending symbols...EndingSymbolRegex = /\s*[)}>\]/'";:=-]/atom.commands.add 'atom-text-editor', 'custom:jump-over-symbol': (event) -> editor = atom.workspace.getActiveTextEditor() cursorMoved = false for cursor in editor.getCursors() range = cursor.getCurrentWordBufferRange(wordRegex: EndingSymbolRegex) unless range.isEmpty() cursor.setBufferPosition(range.end) cursorMoved = true event.abortKeyBinding() unless cursorMoved
ログイン後にコピー

その後、 ⇧ ⌘ P を使用して呼び出します。コマンド パレットにキーマップを入力すると、「アプリケーション: 開く」というメッセージが表示されるはずです。キーマップがすでに 1 位にランクされている場合は、Enter キーを押すだけです ⏎... 次のコードをコピーして、キーマップ ファイルに貼り付けます。

"enter": "custom:jump-over-symbol"
ログイン後にコピー

この「Enter」は、「Tab」や「Shift-Enter」など、使い慣れたものに置き換えることができます。

次に、⇧ ⌘ P を使用してコマンド パレットを呼び出し、その中に [Window: Reload] が最初に表示されていることがわかります。それが最初の場合は、Enter キーを押すだけです。このコマンドには実際にはショートカット キー ⌃ ⌥ ⌘ L があることもわかりますが、コマンド パレットはとても使いやすいですが、いくつかの基本的なショートカット キーはあるものの、あまりにも多くのショートカット キーを覚えるのは非常に負担であることが後でわかります (たとえば、 , コマンド ライン ツールの一連のショートカット キーと Control キー ⌃ の組み合わせは、広範囲に使用することで脊髄の記憶に変わる必要があります...

Window: Reload が完了すると、設定したばかりのショートカット キーが有効になります。

Atom プログラム全体は単なる大きな HTML ファイルです。先ほど作成したリロードはブラウザを更新するようなものです。また、Atom 全体は HTML ファイルであるため、理論上は、HTML/CSS/JAVASCRIPT を理解していれば、そのどの部分も好きなようにカスタマイズできます。ただし、以前に何をコピーして貼り付けたかは理解できません。遅かれ早かれコードは理解できるようになりますが、心配しないでください。

次に、次のキーボード シーケンスを順番に入力してみてください...

( ' th i s ⏎ ⏎

最終的な表示は次のようになります (最後の | は点滅するカーソルを表します):

('this' )|

ご存知のように、Atom は、すべての最新のテキスト エディターと同様、高度にカスタマイズ可能なエディターです。Github でのタイトルは次のようになります:

atom: ハック可能なテキスト エディター

すべてをカスタマイズできます...しかし。これは確かに良いことですが、次の警告があります:

最も重要なカスタマイズのみに焦点を当て、重要でない詳細に人生を無駄にしないでください

最も重要なカスタマイズは、これから説明するスニペットです。次に、重要ではない詳細とは、スキンやカラー マッチングなどのことを指します。そのような重要ではないものを簡単に選択し、その後は決して触れないでください。たとえば、私はテーマと構文ハイライトに spacegray-dark-neue-ui を選択しました。色も同じ学校の spacegray-dark-neue-syntax を選択しました。これで終わりです。時間を無駄にしないでください。たとえば、サフィックス .html に test.html という名前を付け、デスクトップなどに保存します (後で削除したい場合に備えて、すぐに見つけることができます)... サフィックスは非常に便利です。重要です、間違えないでください

次に、このファイルに次のキーボード キーを順番に入力します。最後の ⇥ はマジック TAB キーです:

h t m l ⇥

在按 ⇥之前,你可以看到一个列表,先别管它,直接按 ⇥…… 你会看到编辑器里突然多了一大堆东西:

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>|</title>  </head>  <body>  </body></html>
ログイン後にコピー

随便再输入点什么,比如, test html title,而后再按一下 ⇥,光标就挪到 之后、 之前了。

能这么做,归功于 Atom 内建了 Html Language 的插件,其中设定了所有 HTML5 的标签“自动展开代码”(即,Snippets),该插件的项目代码托管在 Github 上:

https://github.com/atom/language-html

上面提到的这个 Snippets, 代码如下:

'HTML':    'prefix': 'html'    'body': '<!DOCTYPE html>\n<html>\n\t<head>\n\t\t<meta charset="utf-8">\n\t\t<title>$1</title>\n\t</head>\n\t<body>\n\t\t$2\n\t</body>\n</html>'
ログイン後にコピー

你可以大概理解一下,其中:

  • \n表示的是纯文本中默认并不显示的“换行符号”;
  • \t表示的是 tab(不是 tab 键,而是文本中显示的“缩进” —— 通常相当于两个空格,或者四个空格);
  • $1是展开后光标所在的位置;
  • $2是再次按 ⇥键的时候,光标应该所在的下一个位置……

你看,工程师们想了多少办法让自己少敲多少键盘…… 他们做事、干活,累的不是手啊,用的是脑!有脑子不用就等于没有脑子…… 不是吗?

在 Atom 编辑器中,用 ⇧ ⌘ P呼出 Command Palette,在里面输入 Open Your Snippets,你会看到里面有这样一段被注释掉(即,不被执行)的代码:

# Your snippets## Atom snippets allow you to enter a simple prefix in the editor and hit tab to# expand the prefix into a larger code block with templated values.## You can create a new snippet in this file by typing "snip" and then hitting# tab.## An example CoffeeScript snippet to expand log to console.log:## '.source.coffee':# 'Console log':# 'prefix': 'log'# 'body': 'console.log $1'## Each scope (e.g. '.source.coffee' above) can only be declared once.## This file uses CoffeeScript Object Notation (CSON).# If you are unfamiliar with CSON, you can read more about it in the# Atom Flight Manual:# https://atom.io/docs/latest/using-atom-basic-customization#cson
ログイン後にコピー

以后你就可以把自己写的 Snippets 放在这里(当然以后还有更高级的方法)……

在 Comman Palette 里,输入 Available,可以找到 Snippets: Available,不妨逐个玩一玩…… 给自己定个 Timer,玩上半小时之后一定要停下来。

现在可以回去再仔细看看 Atom 官方教程 Atom Flight Manual的第二章了,尤其是 Snippets 那一节。

读完之后再回来。

Atom 的 Snippets 有个概念,叫 Scope,也就是说,根据文件类型确定究竟有哪些“自动展开”可以使用的。所以,你若是在一个 .md的文件里敲击 h t m l ⇥,就不可能被展开成上面那个例子那样。

写 Snippets 的时候,如何确定 Scope 呢?请认真阅读这段话:

If it’s difficult to determine the package handling the file type in question (for example, for .md-documents), you can also proceed as following. Put your cursor in a file in which you want the snippet to be available, open the Command Palette (cmd+shift+p), and run the Editor: Log Cursor Scopecommand. This will trigger a notification which will contain a list of scopes. The first scope that’s listed is the scope for that language. Here are some examples: source.coffee, text.plain, text.html.basic.

摘自于: https://atom.io/packages/snippets

你现在看不懂无所谓,大致留个印象就好,反正以后都是通过反复用,反复研究产生真正理解的。

这里有个重要的建议:

尽量不要直接使用别人写好的 Snippets,要 自己写、自己敲;而别人写好的,尽量只用来参考。

无论你学什么语言(或者框架),就一定要在学习的过程中不断添加积累自己关于那个语言(或者框架)的 Snippets,这是一个自己给自己“添麻烦”的过程,但这种所谓的“麻烦”,其实是一种刻意训练,不做其实是偷懒,偷懒这东西,真心不划算的。

我在参考别人写好的 Snippets 的时候,有个习惯,把那些他们定义的“缩写”全部换成自然语言。比如,人家原来写的是这样的:

"if/else statement":  prefix: "ies"  body: """ if (${1:condition}) { \t${2://statements here}; } else { \t${3://statements here}; };${4} """
ログイン後にコピー

我会改成这样(注意 prefix那一行):

"if/else statement":  prefix: "if/else statement"  body: """ if (${1:condition}) { \t${2://statements here}; } else { \t${3://statements here}; };${4} """
ログイン後にコピー

这是因为我觉得花时间记忆那么多缩写没必要,尽管他们编制的缩写也有一定的规律…… 因为在 Atom 编辑器里,无所不在的有一个叫 Fuzy Matching的东西(也是工程师们设计好用来提升自己效率的东西)—— 它会不分字母前后顺序地帮你寻找你可能要输入的内容…… 在 Fuzy Matching无所不在的情况下,缩写的意义其实并不大。

哪怕是把别人写好的 Snippets 如此修改一下的过程中(其实本质上好像完全没干什么),也有机会读一遍,也有机会留个印象,甚至因为在修改中可能出现错误而不得不反复读了很多遍 —— 那更好,因为那就加深了印象……

スニペットの使い方と書き方を学び、エンジニアになった気分です、はは!遅かれ早かれ、Atom 用のパッケージを作成することになるでしょう - そうすれば、それはそれほど難しくないことがわかるでしょう。

タスク

  • これらのフレーズをGoogleに移動してください:
    • お気に入りのatomパッケージ
    • 最も人気のあるatomパッケージ
    • 開発者向けの必須パッケージ
原則として、あまり多くのパッケージをインストールする必要はありませんパッケージ一つずつ試して楽しんでください。遊んだ後は、現在使用していないパッケージを無効にすることができます。パッケージ間でショートカット キーが競合する場合があり、慣れていないため、時間とエネルギーの無駄になる可能性があります。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート