What is the best code editor for WordPress and Shopify?
Tags: wordpress, shopify, beginners, productivity
Published: 2021-11-09 12:17:34

Finding the right code editor for you can have a major impact on your productivity, efficiency and of course, your enjoyment with writing code. Each code editor offers something different but each code editor will provide you with the basics, but which code editor is best for Shopify and WordPress?.

##### The right answer

There is no right or wrong answer here. It’s like finding the best pair of trainers. Yes a brand new pair might be better but nothing can compare to your trusty old worn-in shoes. Code editors are the same. If you’re set up and familiar with Sublime text with all your plugins installed, jumping into Visual Studio code will feel like a big backwards step. The best option is to download the top few editors and go with the one, you like the feel of and set it up to suit your needs.

##### Decisions, decisions, decisions

For WordPress and Shopify development, you will mostly be working with PHP, CSS (or Sass), HTML, Javascript and Liquid. Most code editors will handle these, no problem. However, if you’re delving into other project types and working with other languages such as Python for example, you’re more likely to find PyCharm or other Python specific editors to be the choice as it packs in more features focused to that language.

At Dirty Martini Marketing, we use Visual Studio Code. It’s free, colourful and packed full of features. Similar to Sublime text, you have the option of installing extensions which of course make your coding experience even better.

Here are some of the VS Code extensions we use daily:

### Auto Rename Tag

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/po7vgeyxg3vwgjstvfo9.png)

This extension will automatically rename the closing tag if you edit the opening tag. This makes it much faster when changing h1 tags to a h2 for example as it will automatically change the h1 tag, saving you precious minutes in your day!

### Material Icon Theme

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/294206fmogsfw7rgcyjd.png)

This extension makes all of your theme folders and files have awesome looking icons! Does this help workflow? Probably not. But it makes your working environment look cool and different from the basic install.

### Prettier - Code formatter

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dqxs707vax8q99rid9iq.png)

This will format your code and give you lovely indentation quickly and effectively. Take a look at: https://prettier.io/ for more.

### Bracket Pair Colorizer

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u9a0buyxrpsh7ckxan14.png)

This extension will supercharge your Sass and CSS files, matching opening and closing brackets by colour. A slight customisation that really helps you distinguish between CSS blocks.

The list of VS code extensions goes on and on but here are some of our favourites. You can also see a full list of Visual Studio Code Keyboard shortcuts here: [Visual Studio Keyboard Sheets](https://code.visualstudio.com/docs/getstarted/tips-and-tricks#_keyboard-reference-sheets)

Follow 'Dirty Martini Marketing' to keep up to date with our web development tips + tricks!

Find us on the web here [Dirty Martini](https://dirty-martini.com)