Best Web Development Plugins for Atom IDE / Text Editor

Atom is a collaborative effort by the team behind Github and it has several plugins that help you achieve various objectives.

It’s a very versatile IDE in that can be used to edit and debug a wide range of different programming languages.

Atom has a plethora of ways to achieve different tasks such as accessing a remote server through FTP/SFTP, formatting code, connecting to a git repository, or minifying code.

If you’re developing locally, Atom has a built-in plugin for connecting to a repository that you don’t even have to install.

1. Remote ftp

Remote ftp is a very useful plugin if you’re looking to edit files on a remote server. It has settings for ftp as well as sftp as well as different options that can allow you to trouble shoot any connection issue you might be having. The alternative is editing remote files using Filezilla which I find can be tedious with repeatedly right-clicking on files and opening them. With remote-ftp, the entire file-tree is in the explorer and you can even choose to sync a local directory to the remote directory or vice versa.

2. Atom Beautify

Writing or editing code can be a painstaking task when you have to manually format every line if it becomes too far or too near to the margin. With this plugin you can simply press “Ctrl” + “Alt” + “b” and your code is instantly formatted. The code becomes several times more readable and easy to maintain. It has the ability to format any kind of code there is, all you have to do is install the respective addon and you can even format php/html in the same file.

3. Vim Mode Plus

Vim Mode Plus is a plugin that brings vim functionality to your IDE. It’s essential to have complete control over how you edit code. Repeatedly reaching for the mouse can become tedious but with vim functionality, you can perform tasks such as deleting lines, navigating to a section of the page, and replacing text much more easily. There’s a learning curve in memorizing the hotkeys but once you understand them, editing code becomes much easier.

4. Git Integration

Git integration is an essential aspect of software development. Usually this requires you to open up the command prompt to input the commands to add, commit, and push your changes. Git is a core package that comes pre-installed with Atom that makes the whole process a lot easier. With a GUI you can visualize your changes in real time before committing them.

5. ESlint

ESlint is one of many plugins that identifie errors in Javascript, css, html, and json. What makes this one different is dependability, and that it’s actively maintained. Upon installing it, it’ll ask you to install the needed dependencies. This makes the whole process of getting it working is fairly straight forward. Here’s an example .eslintrc.json file to get you started, put it in the root directory of your web application

{

    "parserOptions": {

        "ecmaVersion": 6,

        "sourceType": "module",

        "ecmaFeatures": {

            "jsx": true

        }

    },

    "rules": {

        "semi": 2

    }

}

Why Atom’s plugins are so great

Atom is an IDE that can be used for a plethora of different coding practices. It’s minimalist attributes give way to several possibilities for customization so that you can change it to fit your needs.

Web development encompasses a full range of different methodologies. It’s natural that this IDE would serve as a great median.

Hopefully, you’ll be able to use these plugins in an effective manner to increase your productivity. Check out our other web development articles, or read how you can set up really neat page transitions using Barba.js here.