Testing/Code im Pagemachine Blog

14 + 1 tips to make Sublime the best IDE for TYPO3

A lot of us at PAGEmachine fell in love with Sublime Text and TYPO3. Today, we’ll give you a few hints on how you can simplify your TYPO3 development workflows.

While Sublime Text is well-suited for TYPO3 development out of the box, there are various settings, packages and tweaks which make for an even faster workflow.

The very first package which must be installed is Package Control which makes package management a breeze; simply follow the installation instructions and trigger it via Ctrl+Shift+P and „package“. The following packages are highly recommended for TYPO3 developers:

  1. TypoScript: Adds Syntax Highlighting for TypoScript files with an own file extension, e.g. .ts:
    Syntax Highlighting
    It works rather well for TypoScript2 as used in Neos, too:
    typoscript2-syntax
  2. ApplySyntax: While the TypoScript package works if there is a specific file extension, common files like constants.txt/setup.txt and ext_typoscript_*.txt are not recognized as TypoScript files. For cases like this the ApplySyntax package allows for adding more sophisticated rules to apply a syntax. To make sure the mentioned files are recognized as TypoScript, the following rules can be used:
    {
      "syntaxes": [
        {
          "syntax": "TypoScript/TypoScript",
          "rules": [
            {"file_path": ".*(\\\\|/)ext_conf_template\\.txt$"},
            {"file_path": ".*(\\\\|/)ext_typoscript_(setup|constants)\\.txt$"},
            {"file_path": ".*(\\\\|/)(setup|constants)\\.(txt|ts)$"},
            {"file_path": ".*(\\\\|/)Configuration(\\\\|/)TypoScript(\\\\|/).*\\.(txt|ts)$"}
          ]
        }
      ]
    }

    (The upcoming TYPO3 7 LTS will also support constants.ts and setup.ts.)

  3. DocBlockr: Writing PHPdoc styled class and method comments can be tedious, especially with many parameters and type hints, thus DocBlockr to the rescue. This package automatically inserts a template after entering /** and hitting the Tab key to trigger autocompletion:
    docblockr-method
    Simply add the necessary info and jump to the next placeholder via Tab. You can also jump back via Shift+Tab to amend the already entered info. This also works very well for class properties. DocBlockr even is a bit smarter than that by analyzing default values and automatically inserting suitable type hints. It even presets boolean as return type if a method name begins with is or has.
    The following settings have proven useful for readable doc blocks:
    {
      "jsdocs_align_tags": "no",
      "jsdocs_return_description": false,
      "jsdocs_spacer_between_sections": "after_description"
    }
  4. SublimeLinter: To avoid having to constantly switch between editor and browser to verify PHP code is not causing errors, a syntax checker is a must-have. The SublimeLinter provides the foundation and common interface for various language hinters and thus needs to be installed first to get started.
  5. SublimeLinter-php: Obviously, to have PHP code linted, this package should be installed.
    sublimelinter-php
    As with basically all other SublimeLinter language packages, you have to install the actual runtime yourself. For this package PHP (at least CLI) needs to be installed which is pretty straightforward; simply install it through the package manager of your choice or get it from the PHP website. Afterwards you only have to make sure that the php binary is in your PATH.
  6. SublimeLinter-json: Not absolutely necessary for TYPO3 development but JSON is a very common format for web development:
    sublimelinter-json
    Compared to other linter packages the installation is straightforward since Sublime already provides an embedded JSON parser.
  7. PHP Companion: This package eases the work with namespaces in PHP which can be awkward to enter, especially on keyboards where the backslash is rather hard to type. With this package a single keystroke can e.g. add the suitable use statement for the class name at the cursor position. Also expanding the class name at cursor position to its FQCN with or without leading backslash is as simple as pressing a single key. This is useful for PHP < 5.5 where ::class is not yet available.
    PHP Companion uses the internal index of Sublime which is based on the current project, thus make sure you have added all necessary directories. General rule of thumb: if a class cannot be found via Sublime’s „Goto definition“ (F12), it cannot be imported.
    The PHP Companion package does not provide default keybindings but the shipped Default.sublime-keymap-sample file can be used to set up shortcuts for all commands. The import_namespace needs some settings to work with TYPO3 extensions:
    {
      "exclude_dir": [
        "Classes",
        "Tests"
      ],
      "namespace_prefix": "PAGEmachine"
    }

    This makes sure that the Classes and Tests directories are not taken into account when building the namespace, the namespace_prefix is inserted in front of every namespace. Thus if we trigger this command within my_extension/Classes/Editors/Sublime.php a namespace like PAGEmachine\Editors will be inserted.

  8. Sublime Alom: While not available in Package Control this package adds a very neat namespace insertion which complements the PHP Companion package. It does this by taking the composer.json into account and is thus the most reliable solution for inserting the current namespace. The installation invokes cloning the repository and setting up a suitable shortcut which is Ctrl+Alt+N by default. The following should be added to the user settings for TYPO3 extensions:
    {
      "PhpNamespace_breakwords":
      [
        "Classes",
        "Tests"
      ]
    }
  9. PHP Completions Kit: To have everything autocompleted which makes up the PHP language (classes, methods, functions, constants, etc.) this package is very useful.
  10. GotoDocumentation: Since Sublime does not yet support inline tooltips for displaying class/method documentation a usually lookup in the PHP manually requires copying the name to search for and opening http://php.net/<name>. What if Sublime could do all this itself? With GotoDocumentation it can and when binding it to F1, a lot of users should find themselves right at home:
    [
      { "keys": ["f1"], "command": "goto_documentation" }
    ]

    Just put the cursor at the name to lookup and press F1.

  11. Xdebug Client: While it works most of the time, inserting echo, die or throws for debugging purposes is rather bad and has its own limitations (e.g. debugging an AJAX response from PHP). With Xdebug a well-established PHP extension exists which provides debugging, profiling, tracing and a lot more. After installing Xdebug on the target system and the package in Sublime the user settings should be customized as follows:
    {
      "path_mapping": {
        "/var/www": "Z:"
      },
      "close_on_stop": true,
      "break_on_exception": [
        // E_ERROR, E_CORE_ERROR, E_COMPILE_ERROR, E_USER_ERROR
        "Fatal error",
        // E_RECOVERABLE_ERROR (since PHP 5.2.0)
        "Catchable fatal error",
        // E_WARNING, E_CORE_WARNING, E_COMPILE_WARNING, E_USER_WARNING
        "Warning",
        // E_PARSE
        "Parse error",
        // E_NOTICE, E_USER_NOTICE
        // "Notice",
        // E_STRICT
        // "Strict standards",
        // E_DEPRECATED, E_USER_DEPRECATED (since PHP 5.3.0)
        "Deprecated",
        // 0
        "Xdebug",
        // default
        "Unknown error"
      ]
    }

    Since TYPO3 doesn’t work very well with E_STRICT yet, it should be excluded. The path_mapping makes sure that breakpoints set on the Windows desktop through a Samba share mounted on Z: are properly mapped to the physical paths within a virtual machine. You can skip or customize this part as necessary.
    To enable Xdebug within PHP only two lines in the php.ini are absolutely necessary:

    [xdebug]
    xdebug.remote_host = 10.0.2.2
    xdebug.remote_enable = 1

    This instructs Xdebug to connect to an IP address (fixed for all Vagrant machines) in case a debug session is started.
    Now all that is left is starting a session on the desktop via Ctrl+Shift+F9 in Sublime and on the website, e.g. via the Xdebug helper Chrome extension (use „sublime.xdebug“ as „Other“ IDE key):
    xdebug
    When debugging PHP CLI commands, simply prepending XDEBUG_CONFIG="" does the trick (the Sublime Xdebug Client does not require a special idekey).

  12. EditorConfig: Citing from the website EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs. This package makes sure Sublime behaves like a good citizen and follows the guidelines if a .editorconfig is present.
  13. LESS: Not only Neos but also TYPO3 has picked up LESS as CSS preprocessor. This package adds syntax highlighting to Sublime.
  14. Predawn: One of the most refined themes for Sublime as of now:
    sublime-predawn

One more useful package one doesn’t want to miss once installed:

  1. InsertDate: insert dates with arbitrary formats. Whenever you add an Exception, you need the current UNIX timestamp as exception code. Why not have this automatically inserted via shortcut? Now you can, for example by pressing Ctrl+Shift+U:
    { "keys": ["ctrl+shift+u"], "command": "insert_date", "args": {"format":
    "unix"} }
    

The following additional settings/snippets are useful for handling TYPO3 projects within Sublime:

  • "typo3temp/Cache" in folder_exclude patterns
  • "temp_CACHED_*" in file_exclude_patterns (TYPO3 4.x)
  • The sublime.snippets repository adds shortcuts for adding getters/setters for simple and ObjectStorage properties. It can be cloned into the User package directory to enable these snippets. Afterwards type e.g. gss and hit Tab to let the magic happen.

Happy coding!

Did you think our tips are helpful? We are looking forward to your comments.  like our article? Please please share it.

 

Wir arbeiten seit 20 Jahren mit CMS TYPO3 und sind daher bereit, Sie professionell bei der Entwicklung oder Update Ihrer Website zu unterstützen. Erfahren Sie mehr über unsere Dienstleistungen: https://www.pagemachine.de/typo3-websites

Kontaktieren Sie gerne uns unter info@pagemachine.de

https://www.pagemachine.de/pagemachine/kontakt.

6 Gedanken zu „14 + 1 tips to make Sublime the best IDE for TYPO3“

  1. thanks for the article and specially that it is in english. i want to feature it in This week in TYPO3. can you write an abstract why you developed it? what problem did it solve for you? how will you maintain it etc.

    that would be great

    tHNx ben

  2. But how do I use Sublimetext in conjunction with Typo3? Am I supposed to copy and paste my files from T3 to ST? Or is there a way to sync both (when I edit something in ST the change will automatically be made inside T3)?

Schreibe einen Kommentar zu Ari Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert