Atom Editor Code Snippet: Efficient Code Reuse Tool

Code snippets are reusable code blocks that can quickly insert program files and are the core function of Atom text editor. Predefined fragments are usually provided with Atom packages and language syntax.

Custom snippets can be created and defined in the ~/.atom file located in your snippets.cson folder. They require language identifiers, names, trigger text, and fragment body code (optional tabs).

Snippets can be used in any programming language supported by Atom, just specify the correct scope of the language when defining the fragment. They can contain variables and can be used to insert common code blocks, saving time and ensuring code consistency.

Code snippets are common code blocks that you can quickly insert program files. They are very useful and are also the core feature of the Atom text editor. That is, you can use the editor for months without realizing the existence of code snippets or experiencing their power! Atom packages and language syntax usually come with predefined code snippets. For example, start or open a new HTML file, then type img and press Tab. The following code will appear:

<img src="" alt="" />

cursor will be located between the src attribute quotes. Press the Tab key again and the cursor will move to the alt property. Press the Tab key for the last time and the cursor will move to the end of the label. When you start typing, the code snippet trigger text is indicated with a green arrow. You can view all defined code snippets of the current file language type by putting the cursor anywhere and pressing Alt-Shift-S. Scroll or search the list to find and use specific code snippets. Alternatively, open the Package list in Settings and enter language to see a list of all syntax types. Select one and scroll to the Code Snippet section to view predefined triggers and code.

How to create your own code snippet

You will have your own commonly used code blocks that can be defined as code snippets. The useful command I use when debugging a Node.js application is to log the object as a JSON string to the console:

console.log('%j', Object);

Atom already has a predefined log trigger for console.log(); however, you can improve it with custom code snippets. Custom code snippets are defined in the ~/.atom file located in your snippets.cson folder. Select Open your code snippet from the File menu to edit it. The code snippet requires the following information:

1. Language identifier or rangeString
2. Simplely describe the name of the code
3. Once the Tab key is pressed, the trigger text of the code snippet will be triggered, and
4. Code snippet body code with optional tabs.

Go to the end of snippets.cson, type snip and press Tab - Yes, there is even a code snippet that can help you define the code snippet! …

<img src="" alt="" />

Note that CSON is a CoffeeScript object notation. It is a concise syntax that can be mapped directly to JSON; essentially, use indentation instead of {} brackets. First, you need a range string that identifies the language in which the snippet of code can be applied. The easiest way to determine the scope is to open the Package list in Settings and enter "language". Open the required syntax package and look for the "Scope" definition near the top.

snippets.cson must also add a period at the beginning of the string. Popular Web language ranges include:

• HTML: .text.html.basic
• CSS: .source.css
• SASS: .source.sass
• JavaScript: .source.js
• JSON: .source.json
• PHP: .text.html.php
• Java: .source.java
• Ruby: .text.html.erb
• Python: .source.python
• Plain text (including Markdown): .text.plain

Therefore, you can define a JSON logging code snippet using the following method:

console.log('%j', Object);

Once your snippets.cson file is saved, the code snippet will take effect. In this example:

1. Scope is set to .source.js (for JavaScript)
2. The code snippet is named "log JSON"
3. Tab trigger (prefix) is set to lj
4. The body of the code snippet is set to console.log('%j', Object); (However, we have added some extra control code as shown below).

Single quotes in the body must be escaped with a backslash(). Tab stops are defined using a dollar sign followed by a number, i.e. $1, $2, $3, etc. $1 is the first tab position where the cursor appears. When the Tab key is pressed, the cursor will move to $2, and so on. The above tab stop $1 has been defined using the default text to remind or prompt the user: ${1:Object}. When using a code snippet, Object is selected in console.log('%j', Object);, so it can be changed to the appropriate object name.

Other code snippets can be added to the bottom of the snippets.cson file. If you need two or more code snippets of the same language, add them to the corresponding scope section. For example, you can create another JavaScript code snippet in the scope of .source.js to record the length of any array:

'.source.js':
  'Snippet Name':
    'prefix': 'Snippet Trigger'
    'body': 'Hello World!'

Please note that there are two ${1:array}tags. When console.log('array length', array.length); appears, you will see two cursors and both instances of array will be highlighted - you just type the array name once and both will change!

Multi-line code snippet

If you feel more adventurous, you can use three double quotes """ to define a longer multi-line code snippet at the beginning and end of the body code. This code snippet generates a 2×2 with a single header line. Table:

<img src="" alt="" />

Code indentation inside the body of the code snippet has no effect on the CSON definition, but I recommend that you indent it outside the body definition for greater readability. I wish you a happy writing of the code snippet! If you are new to Atom, you should also refer to 10 essential Atom add-ons for recommended packages.

FAQ on using code snippets in Atom

How to create a new code snippet in Atom?

Creating new code snippets in Atom is a simple process. First, you need to open the code snippet file by going to the File menu and then to the Code Snippet. This will open a .cson file where you can define the code snippet. Each code snippet begins with a line .source that specifies the language it applies to, followed by the code snippet name in quotes. You then define the prefix that will trigger the code snippet and the body of the code snippet itself. The body can be multiple lines and use the ${1:default_text} syntax to specify tabs.

How to use code snippets in Atom?

To use code snippets in Atom, you just type the prefix defined for the code snippet and press the "Tab" key. This inserts the body of the code snippet at the cursor. If your code snippet has tabs, you can use the "Tab" key to move between them and enter the text you want.

Can I use code snippets in any programming language in Atom?

Yes, you can use code snippets for any programming language supported by Atom. You just need to specify the correct scope of the language when defining the code snippet. For example, for JavaScript you will use .source.js and for Python you will use .source.python.

How to share my code snippet with others?

If you want to share your code snippet with others, you can simply share your snippets.cson file. This file contains all your code snippet definitions and can be found in your Atom configuration directory. Alternatively, you can create a package with code snippets and publish it to the Atom package repository.

Can I use code snippets to insert commonly used code blocks?

Absolutely! Code snippets are a great way to insert common code blocks. You can define a snippet for any snippet you type frequently and then insert it with just a few keys. This can save you a lot of time and help ensure consistency in your code.

How to edit existing code snippets in Atom?

To edit an existing code snippet in Atom, you need to open the snippets.cson file and find the code snippet to edit. You can then modify the prefix, body, or scope as needed. When you are done, remember to save the file to apply the changes.

Can I use variables in code snippets?

Yes, you can use variables in your code snippet. The variable is represented by ${1:default_text}, where "1" is the tab and "default_text" is the default text to be inserted. You can use variables to create placeholders in code snippets so that you can quickly fill in these placeholders when inserting code snippets.

How to delete code snippets in Atom?

To delete a code snippet in Atom, you need to open the snippets.cson file and find the code snippet to be deleted. Then, just delete the line of code that defines the code snippet and save the file. The code snippet will be deleted immediately.

Can I import code snippets from other editors into Atom?

Although Atom does not have built-in functionality to import code snippets from other editors, you can manually copy snippet definitions from other editors and paste them into the snippets.cson file in Atom. You may need to tweak the syntax a little to match Atom's code snippet syntax.

Can I use code snippets in Atom's find and replace functions?

Yes, you can use code snippets in Atom's Find and Replace features. When you open the Find and Replace panel, you can enter a code snippet in the Replace field. When you perform a replacement operation, the code snippet is inserted into the location of the found text.

The above is the detailed content of How to Use Code Snippets in Atom. For more information, please follow other related articles on the PHP Chinese website!