As a web developer, I do both frontend and backend. For me, it is very important to have the right code editor for speeding up my developing time.
In the past, I tried some PHP editors(Notepad++, ECLIPSE ide, NetBeans, Atom, Sublime Text, and Brackets) that are available in the market. I found out VSCode is the best one for me. VSCode loads faster when I have a lot of extensions working. I can limit which extensions I need for each project by using Workspace. Moreover, VSCode has a lot of useful extensions to choose from in the Marketplace.
VSCode extensions
- GraphQL
- Tabnine: Tabnine is the AI code completion assistant. It helps to boost productivity. It supports all popular coding languages including PHP.
- PHP Intelephense: Install this extension in order to see the outline information from your code in VSCode.
- Format HTML in PHP
- Path Intellisense
- IntelliSense for CSS class names in HTML
- CSS Flexbox Cheatsheet
- Auto Close Tag
- Twig Languages 2
- ESLint
- Python
- Javascript(ES6) code snippets
- Tailwind CSS IntelliSense
- WordPress Hooks IntelliSense
- WordPress Snippets
- LottieFiles for VSCode
- Material Icon Theme: The extension has a set of folders and file icons that helps you visually categorize your folders and files in your project.
- Bracket Pair Colorizer 2: With the color of the bracket pair, you can read your complex code easier.
- Peacock: This extension works in the workspace only. You can change the color of your VSCode workspace. Ideal when you have multiple VS Code instances which I have some time for.
- Color Highlight: Let you see the visual color in your code.
- Prettier – Code formatter
- Beautify: It works the same as the Prettier-Code formatter.
- Icon Fonts: Work on Frontend, this extension is useful. You don’t need to refer back to the online document.
- Live SASS Compiler
- Live Server: Let you build the templates and see the result at the same time.
- Easy LESS
- GitLens: As a web developer, I can live without Gitlens. It helps me to see how the code is changed right in VS Code.
- Git History: I normally use Git History and GitLens on every project.
- Remote Development
- Remote – SSH: Let you use any remote machine with an SSH server as your development environment.
- Docker
- TODO Highlight: Let you highlight TODO, FIXME, or other annotations you create in VSCode. You can view the TODO or FIXME list in VSCode as well.
- TODO tree: Let you highlight TODO, FIXME, or other annotations you create in VSCode. You can view the annotations list on the left sidebar. It will show which file contains the annotations then you can open the file from the annotations list.
- Better Comments: It is better than the TODO Highlight extension. It offers more human-friendly comments in your code.
- Excel Viewer
- Markdownlint
- Regex Previewer
- Task Explorer: View and run tasks from VS Code. It supports npm, grunt, sass, yarn, docker, gulp, and more.
- Test Explorer UI: It supports many programming languages including PHP.
- JS&CSS Minifier (Minify): It is a simple Javascript & CSS minifier. You can minify the CSS and JS files by clicking the Minify status bar on the opened CSS or JS files. You can also enable the source maps generator by changing
es6-css-minify.genCSSmapandes6-css-minify.genJSmap. Moreover, you can enable the minify on saving in settings (disabled by default). The minify files and source map will store in the same target CSS and JS files directory. It will generate the minify file when you open the CSS or JS file and click on the Minify status bar only. It generates one by one file.
Wrap up
The extensions are changed from time to time. You may use the free or paid version to match your need. If you don’t see any benefit to using VS Code, you can try PHPStrom which is another best choice for PHP project development.
