My Code Extensions

I’ve previously written about my Sublime Text packages, but I’ve since switched to the excellent Code editor. If you’ve not heard of this editor before, you may be surprised by it. It’s a fast, lightweight, powerful, well supported, free, open source, cross platform, MIT licensed, Electron powered editor, and it’s built by Microsoft. A few years ago nobody would have believed Microsoft would build such a product, but they have, and it’s excellent.



If you’ve already disregarded this editor based on the Visual Studio prefix in its name, please don’t. There really is no relation to Visual Studio, and I suspect that the marketing team at Microsoft were entirely responsible for the naming prefix.

Unlike Atom, Code really is fast. If you’re used to the speed of ST3 then you won’t be disappointed. It feels like a lightweight editor with a few useful IDE features included, such as Git support, debugging integration, and intelligent code completion.

Here are the extensions I use:

  • Alignment: Align characters (such as equals or colons) in a multiple line selection.
  • Annotator: Display git blame info along with your code.
  • Beautify: Beautify JavaScript, JSON, CSS, Sass, and HTML.
  • Bookmarks: Quickly create and view line bookmarks.
  • DashDash documentation integration.
  • Git Lens: I actually disable everything in this extension except for the ability to toggle Git blame for a file. It’s too noisy by default.
  • Incrementor: Advanced increment / decrement actions for just about anything.
  • IntelliSense for CSS class names in HTML: CSS class name completion for HTML class attributes.
  • PHP Debug: The xDebug client for Code.
  • PHP DocBlocker: More easily create docblocks for your PHP code.
  • PHP Intelephense: A high performance and feature rich PHP language server that provides intellisense, code completion, full symbol search, and a bunch more. I’ve found this to be much more performant and more reliable than the more popular PHP Intellisense extension.
  • phpcs: Hooks up the phpcs sniffer to Code.
  • Rainbow CSV: Highlight columns in CSV files in different colours.
  • Scope Bar: Shows the current scope symbol name in the status bar. Helps avoid losing track of where you are in large functions. This is redundant now that breadcrumb functionality is built in to Code.
  • SCSS IntelliSense: SCSS IntelliSense (Variables, Mixins and Functions) for all files in the workspace.
  • SVG Viewer: View rendered SVGs inside Code.
  • SVN: A source control provider for SVN.
  • Trailing Spaces: Highlight and delete trailing spaces in files.
  • Transformer: Provides text transformation controls such as sorting, alignment, and filtering.
  • XML Formatter: Pretty-print the text inside XML files.

I also use several linter extensions and a bunch of language extensions. There’s plenty of them.

If you’re a stickler for Sublime Text I’d definitely recommend giving Code a try, along with the Sublime Text Keymapping extension.

6 thoughts on “My Code Extensions

  1. Hi there, I also checked out VSCode, but went back to ST due to not being able to work out how to include external packages (like the WordPress Code, for example) for code completion, without creating a project file for each of my projects.

    Any chance you also tried this and got it to work?

    1. Yeah I use the relatively new functionality in Code which allows you to add multiple folders to a workspace. I drag the WordPress folder into an existing workspace, then you get all the completion, code navigation, etc. I think the functionality was added in June so it might not have been there when you tried it.

      1. Wow that was fast ;)
        I think I tried that, but always really liked ST’s capability to do stuff like this without the need of creating a workspace. I put my core files to a folder outside of all my projects and sniffed that one with SublimeCodeIntel:

        {
          /*
             Defines a configuration for each language.
          */
          "codeintel_language_settings": {
              "PHP": {
                  "codeintel_scan_extra_dir": [
                    "/Users/name/my/path/to/wp/core",
                    "/Users/name/my/path/to/wp/plugins",
                  ]
              }
          }
        }
          1. …turns out, you can define additional workspace folders relative to the .code-workspace file (in my case inside a WordPress theme folder):

            {
            "folders": [
            {
            "path": "."
            },
            {
            "path": "../../../core"
            },
            {
            "path": "../../plugins"
            }
            ],
            "settings": {}
            }

            So, no need to change those settings ever again, Yejjh ;)

Leave a Reply

Your email address will not be published. Required fields are marked *