Atom is an excellent, powerful text editor, with the ability to install a huge number of extensions that allow to adapt it to almost anything. The editor developed by GitHub on the basis of their Electron platform, which includes Node.js and rendering engine to Chrome. Because of this it allows you to develop applications for desktop, web-based technologies.
In this article we will look at how to use the Atom editor for web development, what plugins to install and how to configure everything to get a comfortable working environment.
For Windows or MacOS editor Atom can be downloaded from the GitHub repository of the project. Then you have to unpack received archive and start atom.exe. The program is portable, so installation is not required.
Version for Linux can be downloaded there as well. Available deb and rpm packages, and have the ability to collect the program from source. To install the downloaded deb package in Ubuntu or Debian, run the command:
sudo dpkg-i atom-amd64.deb
Also in Ubuntu you can install the program via the package Manager snap. To do this, run the following command:
snap install atom
After installation is complete, you can find the program in the main menu of the system:
How to use Atom editor
1. Install Atom packages
The main advantage of Atom is the ability to install various packages to support a huge number of functions. Let’s first look at how to install packages, and then I’ll just say that you need to set to obtain a particular functionality. To install a new package on the tab, Welcome Guide , select Install a package, and then Open Installer.
The same window can be opened through the main menu. To do this, open Edit -> Preferences -> Install. There is a search box in which you need to enter the package name for installation:
Next to install the package you need to choose a package from the list and click Install.
When the installation is complete, you can open its settings, click Settings or deaktivirati it click Disable. You can also install packages atom from the command line. To do this, run in terminal:
apm install package_name
2. Russification Atom
I don’t recommend to Russify the program. If you are a developer, then English you’ll need and don’t have to avoid opportunities to practice it. Besides, nothing complicated on the menu, and in the Internet there are many instructions in Russian. But if you really want to, you can. To do this, install the package atom-i18n. It’s not just crack Atom this package contains the support of a huge number of languages.
When the package is installed, click Settings under the name of the package and in the Language select Russian:
Then you have to restart the editor. Now the main menu and the context menu will be in Russian:
As you can see, to Russian language in the Atom is not that difficult. Further in this manual I’m going to assume that Russification did you put all the button names will be in English. Now the Atom code editor ready to use, but we can make it even better.
3. The choice of themes
The theme is one of the most important aspects of setting up Atom, since the appearance of the interface and code highlighting will always be before your eyes. For theme settings, open Edit -> Preferences -> Themes:
Here you can choose a theme UI Theme UI theme and syntax highlighting Theme Syntax:
Available light theme and dark:
The syntax is also available, select what you like. You can also install themes from the web.
4. Syntax highlighting and error
Also to improve the appearance of the files you can install the package that adds to each file type icons:
In Atom for highlighting errors on the fly, use the interface linedraw. There is a common package Linter and validation is implemented for different languages. To add the highlighting of errors in PHP, CSS, JSON and HTML, it is necessary to install these packages:
After installing these packages, if you make a error in PHP or other supported language, then immediately a text editor will show you this message:
5. Git Support
The version control system used now almost everywhere. To add support for Git in Atom, you need to install the package git-plus. After that, the environment will appear integration with Git. If the project folder is a Git repository, you will see the files that were modified, new files and the current branch. In addition, directly from the program interface you can perform the commits:
To commit, click on Git in the bottom right corner of the screen. Here it is necessary to choose the modified file, then type a description for the commit and click the Commit to imagette. Next to Git, there are buttons with which you can switch between branches or publish changes to the remote repository.
6. Automatic formatting
In the popular development environments is a very handy feature. You can fix the formatting code by pressing one button. In Atom also you can add this possibility. For this install atom-beautify package and the php-cs-fixer to add support for auto-formatting php.
For php you need to install the tool php-cs-fixer in the system. To do this, run the following command in the Linux terminal:
wget https://cs.symfony.com/download/php-cs-fixer-v2.phar -O php-cs-fixer
sudo chmod a+x php-cs-fixer
sudo mv php-cs-fixer /usr/local/bin/php-cs-fixer
Now in the terminal you should be able to run the command php-cs-fixer. If the system were not informed that the command is not found, then everything went fine. In Atom you can now open the menu Packages -> Atom Beautify and select Beautify for automatic formatting.
7. Editor Vim style
If you like the philosophy of Vim, like me, you want to other reactors you can use all the features of vim. In Atom, it may suffice to set:
Now you can navigate the text using the keys h j k l, select with v, use x y and p to copy and paste / search, as well as the vim command, for example :w to save the document.
8. Prefixes in CSS
Many new features that are included in CSS in different browsers are only supported in the form of pilot opportunities that can only be used together with the prefix of the manufacturer. For example,- webkit, -ms, -moz and others. To manually assign these prefixes are very convenient, so you can use the plugin autoprefixer.
After installing it, highlight a code snippet, and then click Packages -> Command Palette -> Toggle:
Next, enter Autoprefixer , and press Enter. After that, the manufacturer prefixes in css atom will be automatically installed:
9. Debugging PHP in Atom
When writing serious projects can not do without debugging. To debug PHP you can use Xdebug. First you need to install Xdebug in the system. In Ubuntu to do this, run:
sudo apt install php-xdebug
Then add the following lines to the configuration in the debugger:
Here an important parameter xdebug.remote_autostart, its value must be false. If this value is true, the debugger will be triggered for all running scripts, we don’t need them. Port leave the default 9000, host 127.0.0.1. Then restart the web server to apply the settings:
sudo systemctl restart apache2
Next you need to install the package php-debugalso install its dependencies, which proposes to set the environment:
To each run was not shown the message “You have both linter and atom-ide-diagnostics enabled, which will display both results for lint Linter-based packages”. Open settings package atom-ide-ui and look for the item Fetures Enabled. Here we need to disable Diagnostics Services and Diagnostics:
After installation, you can start debugging. To do this, simply click in front line where you need to set a breakpoint to see the blue dot:
You can also just select the line and in the menu Debug choose Toggle Breakpoint. Then open the menu and select Debug -> Toggle Debugging.
On make browser. By default debugging is disabled. To enable this, install this extension. Then click on its icon and select Debug:
You can then reload the page in Atom automatically starts the debugger where you can execute the program step by step and watch the values of variables. When the program asks the compliance of remote paths to local file, specify in both fields the same way, if the project is located on the local machine:
Then you will get access debug:
And instructions on how to use Atom for debugging, already beyond the scope of this article, but I think you will understand.
10. Working with projects in Atom
Configure Atom editor is completed, now a bit about the use. I don’t think I need to say, how to open and save files. But the projects have to say. Selecting the File menu, click Open Project Folder, you can select the folder that contains your source code. Further, all files and folders will be displayed in the tree view in the left pane is very convenient:
In this article we examined how to use Atom for web development, as well as basic useful plugins that you can install and use. There are other interesting extensions, such as Emmet, but I do not use, therefore anything about it I can not say. Overall, with enough tuning, the Atom becomes almost a full-fledged development environment. And what plug-ins and the possibility of Atom are you using? Write in the comments!