Sublime Text 2/3 Example Setup


Using FTP you can use any editor you'd like, see the FTP Access documentation.

But this is an example of setting up Sublime Text for working with FTP and Twig templates.


Installation steps:

  1. Install sublime text
    1. Go to http://www.sublimetext.com/ 
    2. Download and install sublime.
  2. Install package control (Package/addon management for sublime)
    1. https://packagecontrol.io/installation#st2
    2. Follow the simple install instructions here for the version of sublime you're using
  3. How to now install a package:
    1. Open sublime's command pallet: Press ctrl+shift+p (Win, Linux) or cmd+shift+p (OS X)
    2. type Install and press enter
    3. type the name of the package you'd like to install and press enter to install it
  4. Install Twig package
    1. Follow above install package instructions for "Twig" package, this adds support for .twig files and sytnax. 
  5. Install SFTP package
    1. Follow above install package instructions for "SFTP" package, this allows us to setup an FTP account to sync files with.
      ( http://wbond.net/sublime_packages/sftp/installation )


Setup a project:

  1. Create a folder on your laptop for your project
  2. Open sublime
  3. Project > Add Folder to Project (and add your new project folder in)
  4. Project > Save Workspace As... (and save your sublime project config file somewhere, this can be inside your project folder too btw)
  5. Now to setup the config file for the sublime SFTP package
    1. Create a file in the root of your project directory: sftp-config.json
    2. Inside this file add the following:

        

      {
    // The tab key will cycle through the settings when first created
    // Visit http://wbond.net/sublime_packages/sftp/settings for help
    
    // sftp, ftp or ftps
    "type": "ftps",

    "save_before_upload": true,
    "upload_on_save": true,
    "sync_down_on_open": true,
    "sync_skip_deletes": false,
    "sync_same_age": true,
    "confirm_downloads": false,
    "confirm_sync": true,
    "confirm_overwrite_newer": false,
    
    "host": "DOMAIN_HERE",
    "user": "USER_HERE",
    "password": "PASSWORD_HERE",
    "port": "21",
    
    "remote_path": "/",
    "ignore_regexes": [
        "\\.sublime-(project|workspace)", "sftp-config(-alt\\d?)?\\.json",
        "sftp-settings\\.json", "/venv/", "\\.svn/", "\\.hg/", "\\.git/",
        "\\.bzr", "_darcs", "CVS", "\\.DS_Store", "Thumbs\\.db", "desktop\\.ini"
    ],
    "file_permissions": "666",
    "dir_permissions": "777",
    
    //"extra_list_connections": 0,

    "connect_timeout": 30,
    //"keepalive": 120,
    //"ftp_passive_mode": true,
    //"ftp_obey_passive_host": false,
    //"ssh_key_file": "~/.ssh/id_rsa",
    //"sftp_flags": ["-F", "/path/to/ssh_config"],
    
    //"preserve_modification_times": false,
    //"remote_time_offset_in_hours": 0,
    //"remote_encoding": "utf-8",
    //"remote_locale": "C",
    //"allow_config_upload": false,
} 

        

    3. Then change the DOMAIN_HERE to your sites domain, e.g. demo.recds12.co.uk

    4. Change the USER_HERE to the ftp user, e.g. views@demo.recds12.co.uk

    5. Change the PASSWORD_HERE to your password, as given in the FTP section of your REC sites admin

    6. And then save

  6. Now download all folders from remote to local

    1. Open the command pallet again (see above for keyboard shortcut)

    2. Enter SFTP to see all the SFTP commands

    3. Select Download Folder

    4. Alternatively you can get to this by right clicking on the folder name on the sidebar > sftp > download folder



Day to day usage:

  1. Downloading / syncing files files

    1. Open the command pallet again (see above for keyboard shortcut) 

    2. Enter SFTP to see all the SFTP commands

    3. Select Sync Remote -> Local

    4. Alternatively you could select Sync Both Directories, to make sure any changes you have made are sent back up and any remote changes are brought down. 

  2. Uploading files
    1. Save the file and it'll auto upload :)
  3. Using Twig syntax
    1. Any files you open with a .twig extention will auto open in Twig/HTML syntax, 
    2. So if you open a .css.twig file, it'll still be in Twig/HTML syntax, but you can change the syntax to css if you'd like by selecting the language in the bottom right of the editor, or using the command pallet you can just enter CSS and it should find the "Set Syntax: CSS" command for you, press enter to run.