Atom Editor Getting Started to Mastery (iv) Atom use advanced

Source: Internet
Author: User

Original time: 2016-01-31
Update Time: 2016-03-27

The more advanced usage techniques provided by Atom are described in this section, and these techniques will further improve the efficiency of your code writing.

Code Snippets (Snippets)

Snippets is a quick way to insert code blocks in your code, and here's what Wikipedia explains about snippet.

A fragment (Snippet) is a programming term that refers to source code, machine code, and small chunks that can be reused in text. Usually they are formally defined units of execution to incorporate larger programming modules. Fragments are often used to clarify the function of other "messy" functions, or to minimize the use of duplicate code that is shared with other functions.
Fragment management is a feature of some text editors, program source editors, Ides, and related software. It allows users to maintain and use these fragments in repetitive editing jobs.

Let's take an experiment and experience the convenience that snippets brings to us.
1. Open the Atom Editor
2. Use Ctrl+N a new file
3. Use Ctrl+S the save file to change new.html the file name to
4. new.html type html four characters in and press the tab key, and you'll see html that the text is expanded to

<html>  <head>    <title></title>  </head>  <body>  </body></html>

And the cursor is moved <title> between the tags so that you directly enter the title of the HTML file
5. <title> after entering the HTML page title between the tabs, type the tab key again
You'll notice that the cursor is moved to the bottom of the <body> label.

This is snippets, which allows you to easily insert a block of code through a keyword, and also allows you to tab move the cursor between the input points of the code block to achieve fast encoding.
Different types of files have different snippets, you can use shortcut keys Alt+Shift+S to list all the snippets that are provided by the current file.

Custom Snippets

There are many plugins in atom that provide support for Snippets in a particular file, such as the html Snippets above, from language-html plugins
Of course, we can also define our own snippets so that we can use this feature more flexibly during the coding process.
In the Atom configuration directory (if it is a Linux system, this directory is ~/.atom ) contains a snippets.cson file named, this file is responsible for saving our custom snippets. You can Edit Open Your Snippets easily open this file by using the main menu.

Snippet Configuration format

The basic snippet format is this

‘.source.js‘:  ‘console.log‘:    ‘prefix‘‘log‘    ‘body‘‘console.log(${1:"crash"});$2‘

The first line of the configuration specifies the file type of the snippet app, and the simplest way to get a file type string is to view the scope entry for the language plug-in for that file
For example, if you want to add a snippet entry for a Java file, you need to view the plugin's plugin information on the Settings page, and language-java you can see the value of the first row of the plugin information, Scope so the source.java file type string for the Java file is a dot . source.java(Just like a CSS class selector)

The second line of the configuration is the name of snippet, and it is best to take a look at the name of the snippet to guess the role.
Next prefix indicates the string that triggered the snippet
bodyThe value of the ‘console.log(${1:"crash"});$2‘ snippet indicates the specific contents of the triggered
Each followed by a number $ represents an insert, and when the user presses it tab , the cursor moves between the inserted items that are set

To summarize, the example above will add a snippet to the JavaScript file log
When entered and pressed in the JS file log tab , it will be extended to

console.log("crash");

"crash"The string is selected, so if you enter other characters directly, you can change "crash" the string, and when pressed tab , the cursor jumps to the end of the line ; .

Configuring multiple lines of snippet

Multi-line snippet is configured as follows, which is """ to wrap a body together with a symbol

‘.source.js‘:  ‘if, else if, else‘:    ‘prefix‘‘ieie‘    ‘body‘"""      if (${1:true}) {        $2      } else if (${3:false}) {        $4      } else {        $5      }    """
Snippet's snippet

When you snippets.cson configure snippet in, you can use snip and snipns snippet to insert a new snippet Fragment

Auto-complete

Atom comes with a basic auto-completion function

By default, Atom automatically complements the contents of the current document according to its content.
If you want more options, you can set autocomplete-plus it at the plugin settings. For example, you can set the plugin to complete all open documents (not just the current document)

Code Folding

Code folding is useful when viewing or writing code, and Atom also supports this feature
You can Ctrl+Alt+[ Ctrl+Alt+] collapse or expand the code by clicking the arrow next to the line number or by using the shortcut key

In addition you can also Ctrl+Alt+Shift+[ Ctrl+Alt+Shift+] collapse or expand all the code by
Ctrl+K Ctrl+Numto specify which level of indentation to collapse ( Num specifies the depth of indentation)
Ctrl+Alt+Fto collapse any of the selected code snippets

Sub-column


You can use it Ctrl+K 方向键 to create a new column, where the direction of the arrow key determines how the column will be divided, such as Ctrl+K ↓ creating a new horizontal column
Ctrl+K Ctrl+方向键toggles the cursor focus between columns when a column already exists.
If you want to close a column, use theCtrl+W

Code type

Atom will automatically recognize the type of file you are currently editing
If the recognition fails, atom will treat the file as a normal text document
In this case we can use Ctrl+Shift+L to manually specify or change the type of the current file

Atom Editor Getting Started to Mastery (iv) Atom use advanced

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.