{"id":13027,"date":"2016-05-31T09:58:10","date_gmt":"2016-05-31T13:58:10","guid":{"rendered":"https:\/\/webdevstudios.com\/?p=13027"},"modified":"2024-04-15T12:02:25","modified_gmt":"2024-04-15T16:02:25","slug":"phpstorm-front-end-developers","status":"publish","type":"post","link":"https:\/\/webdevstudios.com\/2016\/05\/31\/phpstorm-front-end-developers\/","title":{"rendered":"PHPStorm for Front-End Developers"},"content":{"rendered":"
As a developer, front-end or back-end, there is no lack of strong opinions on why or why not developers choose their text editor or IDE. It tends to be a very personal choice.<\/div>\n

A few popular editors in use these days are Sublime Text<\/a> and Atom<\/a>. On the IDE side of things, there is Coda<\/a> and PHPStorm by JetBrains<\/a>.\u00a0It seems that most front-end developers steer clear from IDEs and lean more towards the more \u2018lightweight\u2019 code editors that have plugins for just about anything imaginable.<\/p>\n

As for me, I seem to be a bit of an anomaly, because I am a front-ender who has only ever used PHPStorm! As a disclaimer: Late last year I tried to make the switch to Atom, but that experiment only lasted a few days.<\/p>\n

I\u2019ve never used Sublime Text. SHOCKING, I know!<\/p>\n

Making a Case for PHPStorm<\/h3>\n

In this post, I want to share some of the key features I like about using PHPStorm from a front-end WordPress developer’s perspective. Perhaps you are one of those\u00a0who is on the fence about giving it a try and just need a little convincing. Hopefully, I’ll be able to do just that!<\/p>\n

Also, if you are a back-end developer, there’s a good chance you still might learn something new as well!<\/p>\n

Saying that PHPStorm is feature rich is a bit of an understatement. I\u2019ve been using it for a solid year or so and I\u2019m constantly finding out about new features.<\/p>\n

Let\u2019s dive right in!<\/p>\n

<\/p>\n

Settings<\/h3>\n

In this section, I will share some of the basic settings I use for each project. All you really need to know is that virtually everything<\/em> can be customized. I\u2019ll also cover things such as plugins and themes as well.<\/p>\n

WordPress Projects<\/strong>
\nStarting with version eight, PHPStorm started to support a WordPress specific project type. You basically tell it where your WordPress install is and it will index all the files as well as provide some other really great features such as code completion.<\/p>\n

Code Style<\/strong>
\nPHPStorm has WordPress specific PHP code styles built in that are set right from the WordPress PHP coding standards<\/a>. Gotta keep that code clean!<\/p>\n

\"coding-styles\"<\/p>\n

\n

Hex Colors<\/strong>
\nI really like to be able to preview what a hex color is going to look like. I know other editors have plugins that will do this, but PHPStorm has it built right in:<\/p>\n

\"hex-colors\"<\/p>\n

Plugins<\/h3>\n

JetBrains has\u00a0their own official plugins, but they make it possible for other developers to create plugins, too. Although there are quite a few plugins, I think this is one area where PHPStorm falls short to other text editors. That being said, let’s go over\u00a0a few plugins I am currently using.<\/p>\n

CSS Alphabetical Rearranger (beta)<\/a>: At WDS, we keep all our CSS\/Sass in alphabetical order. This plugin will do this automatically.<\/p>\n

Sass Lint Plugin<\/a>: With help from Greg<\/a>,\u00a0I was recently able to get this plugin configured and working with the custom sass-lint.yml<\/code> file that wd_s<\/a> uses. This is AWESOME! Now anytime Sass is not formatted properly, PHPStorm will let me know!<\/p>\n

\"Not
Not in alphabetical order!<\/figcaption><\/figure>\n

Material Theme UI<\/a>: One of the things that attracted me to try Atom was using it with the Material theme. This plugin is the best attempt at porting the Material theme over to PHPStorm.<\/p>\n

Themes<\/h3>\n

Even though I mention above that I use the Material theme via a plugin, there are a lot of options out there to choose from if you would prefer something different.<\/p>\n

Here are two great resources:<\/p>\n