So in October 2018 I took a week off work on
I last blogged about what and why I was using things a few years ago and I really meant to make it a regular thing as stuff changes and even since then I have been tinkering, so this is not a definitive guide even into the IDE I use let alone the rest.
One thing I have noticed in my “organic” approach over the last few years is
This is, therefore, the “New” approach.
It’s worth remembering where possible this has to be for both Linux and MacOS as I use both and I wanted the setup to be identical or close to on both machines.
It’s also worth remembering that my day to day is writing in Python & PHP with Go and increasingly a little bit of RUST so while this article is focusing on PHP I’m sure I will be publishing a Python/Go/RUST versions as well.
My Chosen IDE – Atom
Ok before we start:
- PHPStorm is clearly the most superior IDE in the world, it’s so powerful and it makes you an amazing developer you’re totally right.
- VIM you are so cool and hardcore, you are amazing and your knowledge of arcane finger combinations shows how determined you are.
- VS Code, I mean it just is… You know how to follow the crowd and your right all the people are using it. It’s just swell!
- EMACs really, come on you’re just here to wind folks up
- Others, every IDE has positives and negatives if it works for you, then that is awesome and I would love to read how you use your IDE.
So I switched from Sublime to Atom a few years ago and haven’t really looked back, yes it had memory issues and it can be slow at startup but it’s easy to modify and I’m comfortable with it.
I did spend some time with VS Code and seriously considered moving, there was nothing wrong with it at all but I was comfortable with Atom and didn’t think the negatives outweighed the need to come familiar with an entire new IDE.
That said my Atom editor was taking GBs of memory, and close to 2 minutes to startup and had plugins I wasn’t using, deprecation warnings and
I’m going to go through the process of setting everything up on MacOS as that will be what the majority of folks will be using out of the two (Windows folks I “think” every plugin mentioned would work for you as well) for Linux folks, most of the Brew commands can be swapped for yum/Apt etc as everything is pretty standard packages. Once you get to Atom command line commands i.e
Getting Atom Uninstalled
Yeah before getting started I actually had to get Atom uninstalled, which on the mac wasn’t as easy as it should be :( even CleanMyMac missed most of these ultimately with a bit of Googling I needed to do
[1] % rm -rf ~/.atom ~
% rm -rf /usr/local/bin/atom ~
% rm -rf /usr/local/bin/apm ~
% rm -rf /Applications/Atom.app ~
% rm -rf /Library/Caches/Atom
Getting PHP7.2 running
Note when I wrote this in (October 2018) since then PHP7.3 has been released, and as such you should probably be using that!
While I use a VM (virtual machine) for development, the linter in Atom uses the hosts, not the VM version of PHP. I did ponder setting it up to use to the VM but that seemed like a hole full of vipers waiting to happen. I had previously installed PHP7.0 (you can tell when I last properly did a setup my Mac) for linting and using wp-cli.
Moving versions was fairly trivial:
brew update && brew upgrade
brew uninstall php70 --force php@7.00
brew install php72
Which installed PHP7.2 common libraries and CLI, job done
Except it didn’t put the PATH in my .zshrc so I just needed to append
export PATH="${PATH}:$(brew --prefix homebrew/core/php@7.2)/bin"And reload zsh, job now actually done.
Setting up Atom
I try to install all my software via either the Apple Store (MAS-CLI) or HomeBrew where possible down to having a private tap for some personal bits. I’m assuming you have both HomeBrew and the casks package installed.
Atom already had a cask (Home Brew packages with UIs tend to be installed via Cask then brew directly) setup so install was as simple as:
brew cask install atomThere we go, Atom reinstalled happy days, and now in a much better maintainable position then we were previously.
Setting up Atom for PHP development
On the whole, I have significantly reduced down the number of Atom packages I use by making use of the Atom IDE which is based on Facebook Nuclide.
This is a package that combines a bunch of features and makes some cosmetic changes to the interface. The cosmetic changes does make Atom feel a bit more like something like PHP Storm for example. This also gives you the features with far less performance hit then the individual packages. It has only a limited set of languages that it supports but there is support for Python and PHP which makes me happy.
Installing is as simple as:
apm install atom-ide-ui
apm install ide-phpIf you are not familiar APM, is atom package manager CLI interface and is a lot easier then using the IDE for adding/removing packages. It also means you can run commands like:
apm updateTo update packages quickly again, without using the interface, for me I prefer to have this command running in background and turn of the in IDE updates off which slightly improves startup time with no loss of functionality
Linter
A Linter highlights when something is “broken” this could mean that the PHP is erroring, or you are not meeting your code standard. It normally gives you a nice red underline under the offending code, and with the IDE package, a description shows in the diagnostic panel at the bottom of the GUI.
apm install linter
apm install linter-phpNow once installed I did notice that the IDE Outline section, which shows each function/class/object and makes them clickable for quick navigation suddenly decided to stop working with the error “Language Pack not working”
Which was suitably vague, I would love to say I came up with a clever solution but again after a bit of Googling:
apm uninstall ide-php
apm install ide-php
It does seem that the order of install makes little matter, if I had installed the linter first, it would been the one in need of a reinstall.
Coding Standards
One of the reasons to use an IDE in general is to not have to worry about if your code meets your coding standards, and ideally have it fix any issues for you.
The simplest way to do this is (especially in the WordPress world) is with Code Sniffer.
To install Code Sniffer it’s a brew command (as its a separate thing from Atom itself)
brew install php-code-snifferI did have to uninstall the existing one, then redo the brew install which meant I had a version knocking around in my PATHs so did:
brew link php-code-snifferOnce installed you can access it via the:
phpcs /my/file.php
While handy it will be more useful in real time in Atom yet before we do that for folks working in WordPress then you will want a copy of the WordPress Coding Standard.
I had an older copy of WordPress Coding Standards so after removing that, I downloaded a new version (Really this should be a homebrew tap, but I didn’t do that and I will suffer the consequences)
git clone -b master https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards.git wpcs
phpcs --config-set installed_paths /Users/tnash/Servers/wpcsWhich clones the git repo and then adds the coding standards within the folder to PHP code sniffer, its worth then checking via phpcs to make sure it’s there which should return WordPress-*
(master) % phpcs -i ~/Servers/wpcs
The installed coding standards are MySource, PEAR, PSR1, PSR12, PSR2, Squiz, Zend, WordPress-34SP, WordPress-VIP, WordPress, WordPress-Extra, WordPress-Docs and WordPress-CoreWith that setup we can then add it to Atom with:
apm install linter-phpcsWhen you install it the next time you open Atom you will be prompted to make a choice, use the default Linter UI or the ide-diagnostics. I selected and recommend the IDE Diagnostics and deactivated the Linter UI.
So now we have Atom running, telling us about PHP errors, and Code Standard warnings this is great but wouldn’t it be better if you know we didn’t have to care and it would just fix stuff for us!
Atom Beautify
This is a “magic” package and I really mean it, you can either with one click or on save, have it fix issues that PHPCS and indeed other linters find.
To get it working install is:
apm install atom-beautify
Then in the Atom IDE (This might be the first time we have had to go into the IDE, and we could have edited the config file) go to Packages drop down and Beautify and Settings. (If your on a smaller monitor, scroll down I missed the actual settings several times when using the laptop screen)
You can enable “Save on exit” and also select the ruleset you wish to use by default this can be overridden on individual projects, because I tend to be using WordPress I have this set to WordPress-Extra
Open your ugly file full of underlined red, and run it, told you its magic!
Now I feel compelled to say it won’t make everything perfect and it won’t solve every sniff issue, its also automated so inevitably it will break something. but come on your life is just so much better now right?
Getting a Browser and Terminal Support
One of my goals with this re-working was to make my workflow more productive and ideally to leave my IDE less. For example, I was running PHP Codesniffer from the terminal previously so moving that in the terminal just makes sense.
There are two other places I’m likely to be when not in my IDE, my Terminal and my Browser and while I certainly didn’t want to replicate these entirely, there are plenty of times where I just need to run a command on terminal or want to refresh the page to see what I’ve done in a browser. It would be great if I could do short small commands in Atom..
Setting up Terminal
My first attempt at getting a terminal in Atom was the package terminal-plus which on paper was perfect, except it doesn’t work on MacOS since Sierra. Sadface
Instead, I went with PlatformIO-IDE-Terminal, which is a working fork and being maintained.
npm install -g node-gyp
apm install platformio-ide-terminalNow I could have tightened node-gyp to just the Atom version of Node but hey what could possibly with global dependencies.
Once up and running, a nice feature of the terminal is that it picks up my actual shell so zsh and oh my zsh.
Setting up Browser
Did you know Atom is written in Electron which is a by-product of Chrome (So is Slack and you can make your Electron jokes and sniggering now, but quietly and to yourself) and is in effect a browser so it will come as no shock getting a browser within the IDE is pretty simple:
apm install browser-plusOnce installed I can either pre-set in the project configuration a URL or simply browse to the page I want, hitting the lightning button means it will auto-reload every time you save a page in that project.
Other General stuff
This is in no way an exhaustive list of packages installed just the ones I think are worth highlighting for general PHP development/general development.
Atom File Icons
apm install file-iconsIn the Project view it shows a file icon of the file type. Simple, and just helps speed up sorting files in the project.
Highlight Selected
apm install highlight-selectedSimply highlight a piece of code, all the other instances in the file will also be shown.
Bracket Colorizer
apm install bracket-colorizerThis makes each
DocBlockr
apm install docblockrAdd comment code block quickly and easily, genuinely helps me write cleaner documentation quickly inline with code.
MiniMap
apm install minimapThis provides a small view of your entire codebase on either the left or right hand side, its useful for judging where you are in a file, and to be honest if your intimately familiar with a file allows you to jump to sections quickly and easily.
Wrapping up for now
This is quite a lot of stuff, but the reality it takes not to long to setup and is nicely upgradable if we ignore that annoying PHPCS that really needs putting into a package, something on my todo list, speaking of Todo I have a bunch of project management bits to discuss and then their is my Python and Go setups and I haven’t covered anything front end.
Actually, before those, we have a missing element which is debugging/profiling but before we can do that we need to talk Virtual Machines.
Also, I haven’t even touched on fonts and my journey into Less to get rid of a pair of deprecation warnings
Guess I’m going to need to write more blog posts. Though if you liked this please do tell me, and share it with others. Also, show me your dev setups I would love to be inspired!