Which code editor to use for web development?

By under Trends

When it comes to IDE code editor I get pretty excited since we developer spends our most of the time using a code editor like Sublime, Atom, PHPStorm, Visual Code Studio, Brackets or more. you know what I tend always try new editors very often, this is one of thing I like. In here I am listing all of the best Code Editor / IDE which I have used. Hopefully, this will help you choose the best editor for yourself. Trust me I have used them all 🙂

Let’s begin some of the awesome and not so awesome editors I use on daily basis.

Sublime Text

Sublime text

So, first one is Sublime Text, it’s most popular text editor with lots of community build packages and this is fastest of all. If you are getting started in learning a new language or pro developer this is the best option out there. It’s cross-platform and comes with an unlimited trial.

Sublime Text Features

  • Sleek UI & Super Fast
  • Goto Anything with fuzzy search: Triggered with ⌘P, it is possible to search part of a file name, Type @ to jump to symbols, # to search within the file, and : to go to a line number.
  • Multiple cursors for multi-select: Try pressing ⌘D to select the next occurrence of the selected word.
  • Customize Anything: Key Bindings, Menus, Snippets, Macros, Completions and more – just about everything in Sublime Text is customizable with simple JSON files
  • Split Editing windows
  • Distraction Free Mode
  • Cross Platform

Must have Plugins for sublime text

  • Emmet ( Earlier known as Zen coding magically write HTML & CSS in seconds )
  • AllAutocomplete ( Give suggestions from all opened files instead from current file )
  • SublimeLinter ( To lint js, CSS, PHP in editor )
  • SidebarEnhancements ( It adds lots of useful context menu for sidebar )
  • AdvancedNewFile ( Create new file quickly without opening dialog box )
  • Git ( Add git command in sublime, no more switching to terminal  )
  • SublimeCodeIntel ( Turn sublime into IDE with code intelligence and smart autocomplete )

Download Sublime Text

Atom

Atom

Atom is very hackable you can customize to do anything but also use productively without ever touching a config file. Tthe best part is that its open source and free :). It’s not as fast as sublime text but its new addition and going very fast. Atom is a desktop application built with HTML, JavaScript, CSS, and Node.js integration runs on Electron, a framework for building cross-platform apps using web technologies.

Atom Features

  • Cross-platform editing: Atom works across operating systems. You can use it on OS X, Windows, or Linux.
  • Built-in package manager: Unlike sublime Atom has an inbuilt package manager to Search for and install new packages or start creating your own.
  • Smart autocompletion: Atom helps you write code faster with a smart, flexible autocomplete.
  • File system browser: Easily browse and open a single file, a whole project, or multiple projects in one window.
  • Multiple panes: Split your Atom interface into multiple panes to compare and edit code across files.
  • Find and replace: Find, preview, and replace text as you type in a file or across all your projects.

Must have Plugins for Atom

  • file-icons ( Display icon of file type )
  • atom-beautify (Beautify HTML, CSS, JavaScript, PHP, Python, Ruby, Java and more )
  • Activate Power Mode ( Make coding fun with sparkles and COMBO )
  • emmet ( magically write HTML & CSS in seconds )
  • git-plus ( Full Git integration )
  • pigments ( Shows colors right there from cryptic color code )
  • linter ( Lint code in Atom to make debugging easier )

Download Atom

WebStorm / PHPStorm

PHPStorm

I kept WebStorm and PHPStorm under single head because they are literally same, PHPStorm has additional PHP support ( PhpStorm = WebStorm + PHP + DB/SQL ) on the other hand WebStorm is most targeted at front-end only. If I am working on a Laravel, WordPress or any sort of PHP project I use PHPStorm, it’s fantastic with tons of feature since it’s an IDE, you can use FTP, Git, Database and terminal right from IDE. But I wouldn’t suggest you use if you just getting started with web development or learning a new language, you should let all the syntax sync in your mind and IDE will always give you autocomplete and unwanted help which can be distracting for memorization.

PHPStorm Features

  • Intelligent Coding Assistance: Hundreds of inspections take care of verifying your code as you type, analyzing the whole project
  • Smart Code Navigation: Thanks to efficient, lightning-fast navigation features. The IDE understands where you want to go and gets you there instantly.
  • Fast and Safe Refactoring: Refactor your code reliably with safe Rename, Move, Delete, Extract Method, Inline Variable, Push members Up / Pull members Down, Change Signature, and many other refactorings.
  • Easy Debugging and Testing: PhpStorm is renowned for its zero-configuration Visual Debugger, providing extraordinary insight into what goes on in your application at every step. It works with Xdebug and Zend Debugger Unit Testing etc.
  • Development Environment: Version control using Git, SVN, Mercurial, and Perforce, Databases & SQL with support for Vagrant support, Docker, Composer, and more

Must have Plugins for PHPStorm

  • gfm ( GitHub markdown plugin for IntelliJ platform. )
  • .ignore ( To add any file in .gitignore by right clicking and choosing add to .gitignore file )
  • Not many plugins since most of the functionality are already present in IDE and it’s a paid tool.

Download PHPStorm

Visual Studio Code

This is from Microsofts and its free, open source & runs everywhere:) It borrows many features from its popular IDE Visual Studio. You can Install extensions to add new languages, themes, debuggers, and to connect to additional services. Extensions run in separate processes, ensuring they won’t slow down your editor. If you are from the .net family you will feel at home with this editor.

Visual Studio Code Features

  • IntelliSense: It provides smart completions based on variable types, function definitions, and imported modules.
  • Inbuilt Debugger: Debug code right from the editor. Launch or attach to your running apps and debug with breakpoints, call stacks, and an interactive console.
  • Git commands built-in: Review diffs, stage files, and make commits right from the editor. Push and pull from any hosted Git service.
  • Extensible: Want even more features? You can install lots of extensions to customize it further.

Must have Plugins for Visual Studio Code

Download Visual Studio Code

Brackets

Brackets

Brackets is for the front-end developers, it is a lightweight, yet powerful, modern text editor. It blends visual tools into the editor so you get the right amount of help when you want it without getting in the way of your creative process. Brackets is an open-source project, supported by an active and passionate community. It’s made by web developers like us from around the world.

Brackets Features

  • Inline Editors: Instead of jumping between file tabs, Brackets lets you open a window into the code you care about most. Want to work on the CSS that applies to a specific ID? Put your mouse cursor on that ID, push Command / Ctrl+E and Brackets will show you all the CSS selectors with that ID in an inline window so you can work on your code side-by-side without any popups.
  • Live Preview: Get a real-time connection to your browser. Make changes to CSS and HTML and you’ll instantly see those changes on screen.
  • Preprocessor Support: In Brackets you can use Quick Edit and Live Highlight with your LESS and SCSS files which will make working with them easier than ever.
  • Extensible: Like other editors, you can customize and extend brackets using extensions.

Must have Extensions for Brackets

  • Emmet ( High-speed HTML and CSS workflow )
  • Beautify ( Beautify javascript, JSON, CSS, Sass, and HTML )
  • File Icons ( File icons in Brackets’ file tree )
  • Git ( Git integration for Brackets )
  • Snippets ( Snippets extension lets you define a series of triggers for common typing tasks )

Download Brackets

Color Themes

I like to keep changing my theme very often, it keeps development work fresh, here are the some of the themes option for your editor.

Sublime
Atom
PHPStorm
VS Code
Brackets

Conclusion

There you have all the code editor I have used, I suggest you try most of them and don’t marry one, In our industry, there is always some new editor is in the wild. sure all of them will get things done just fine, but some will give you more speed, productivity, and creativity over others. If I missed you favorite one please put in the comment and let me know why you like it most, Happy coding 😇