ホームページ > 記事 > ウェブフロントエンド > Atom エディタ Advanced_html/css_WEB-ITnose
Atom エディタ Advanced_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:15:131589ブラウズ
以下の内容は、Atom 公式チュートリアル Atom Flight Manual の最初の章を読んでいることを前提としています:
- 第 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，而后再按一下 ⇥，光标就挪到 6c04bd5ca3fcae76e30b72ad730ca86d之后、 36cc49f0c466276486e50c850b7e4956之前了。
能这么做，归功于 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パッケージ
- 開発者向けの必須パッケージ