How To Develop a Package for GitHub's Atom Code Editor

Atom Editor Extension Guide: Create and publish your own syntax highlighter package

Atom editor is powerful, but sometimes you may need some features that are not provided by default, such as syntax highlighting for a specific language. At this time, it is particularly important to create custom packages. This article will guide you to create a syntax highlighting package and publish it to the Atom community.

Core points:

• Extend the functionality of the Atom editor by creating custom packages, especially for features that are missing by default.
• Create a folder in the .atom/packages directory and add a valid package.json file to initialize the new package.
• For syntax highlighting, create a grammars subfolder, define language rules in a CSON file, and specify how Atom recognizes and highlights the language syntax.
• Test your package in Atom using the View/Reload function to view changes immediately and make sure that the functionality is working.
• Set up a public repository on GitHub and use the apm publish command to publish your package to the Atom community to benefit other developers.

What will we build?

This article will guide you to create a syntax highlighter similar to language-scilab that you can apply to any language you need. We will learn how to initialize a new package, write syntax highlighting rules, and how to publish your package to the Atom community.

Initialize the new Atom package

Atom uses a configuration file folder called .atom to store personal options and installed packages. Packages are located in the packages subfolder of this folder, and each package has its own folder.

The first step is to create your package folder, such as language-mylanguage (this is a naming convention to add language support). Then, create the package.json file in that folder, and Atom can recognize and load it.

The following is an example of the language-mylanguage file of a package.json package:

{
  "name": "language-mylanguage",
  "version": "0.0.0",
  "description": "Mylanguage language support in Atom",
  "engines": {
    "atom": "*"
  },
  "dependencies": {},
  "repository": {
    "type": "git",
    "url": "https://github.com/JeremyHeleine/language-mylanguage.git"
  },
  "bugs": {
    "url": "https://github.com/JeremyHeleine/language-mylanguage/issues"
  },
  "license": "MIT"
}

Keyfield explanation:

• "name": Package name.
• "version": Version number, following the convention for major, minor, and revised versions. It is recommended to use 0.0.0 in the initial version.
• "description": Package description.
• "engines": Atom minimum version requirements.
• "dependencies": Package dependencies.
• "repository": The GitHub repository address of the package (can be empty before release).
• "bugs": Address to report the problem.
• "license": License.

After creating the package.json file, Atom can recognize your package. You can use the View/Reload command to force Atom to reload the package so that changes are immediately visible.

Create a syntax highlighter package

Create a grammars subfolder in the package folder and create a CSON file named after the language name (for example mylanguage.cson). This file contains syntax highlighting rules.

Basic Information

Before defining grammar rules, you need to tell Atom how to recognize your language:

{
  "name": "language-mylanguage",
  "version": "0.0.0",
  "description": "Mylanguage language support in Atom",
  "engines": {
    "atom": "*"
  },
  "dependencies": {},
  "repository": {
    "type": "git",
    "url": "https://github.com/JeremyHeleine/language-mylanguage.git"
  },
  "bugs": {
    "url": "https://github.com/JeremyHeleine/language-mylanguage/issues"
  },
  "license": "MIT"
}

• scopeName: Language identifier, used for topics, other packages, or configuration files.
• name: The language name displayed at the bottom of the Atom editor.
• fileTypes: The file extension array used by the language.

Grammar Rules

All rules must be declared in the patterns array, each rule is enclosed in {}:

'scopeName': 'source.mylanguage'
'name': 'Mylanguage'
'fileTypes': ['ext1', 'ext2']

Match syntax elements

Match syntax elements using the match attribute, such as matching numbers:

'scopeName': 'source.mylanguage'
'name': 'Mylanguage'
'fileTypes': ['ext1', 'ext2']

'patterns': [
    {
        # 规则1
    },
    {
        # 规则2
    }
]

matchUse regular expressions, nameSpecify the style class name, and follow certain naming conventions so that the theme can apply the style correctly.

Match multiple elements

Match multiple elements using the captures attribute, such as matching function declaration:

{
    'match': '\b(([0-9]+\.?[0-9]*)|(\.[0-9]+))\b'
    'name': 'constant.numeric.mylanguage'
}

Match begin with end and

beginMatch the start and end tags using the end and

properties, such as matching single quote strings:

{
    'match': '\b(function)\s+(\w+)\s*\(.*\)'
    'captures': {
        '1': { 'name': 'keyword.control.mylanguage' },
        '2': { 'name': 'entity.name.function.mylanguage' }
    },
    'name': 'meta.function.mylanguage'
}

beginCaptures You can also use endCaptures and patterns to capture the start and end tags, and the

attributes match sub-elements inside the matching element.

Release Atom package

package.json Please check if the package with the same name already exists before publishing it. You need a public GitHub repository. Update the repository address in the

file.

apm publish minorUse the minor command to publish the package (major, patch, and

respectively update the minor version, major version and patch version respectively). This command will register your package name, add version number, create Git tags and push changes.

Use the apm unpublish name-of-the-package command to cancel the release package.

Conclusion

This article describes how to create and publish Atom syntax highlighting packages. Atom's flexibility allows the creation of various types of packages, but this article is limited to the creation of syntax highlighted packages. Hope this article helps you expand the functionality of the Atom Editor and share your results with the community.

FAQs (FAQs)

(The FAQs part in the original text is omitted here, because the content of this part is highly repetitive from the above, which is a summary and explanation of the above content. In order to avoid redundancy, repeated output is not performed here.)

The above is the detailed content of How To Develop a Package for GitHub's Atom Code Editor. For more information, please follow other related articles on the PHP Chinese website!