![]() This post contains a list of five popular plugins which are independent from the language or framework you’re using. By using plugins the editor functionality can be extended with many more features. ConclusionĪtom is a really powerful code editor. Drag and drop the light grey rectangle to scroll. The minimap view can also be used for scrolling. The code area which is shown in the editor at the moment is highlighted with a light grey background color in the minimap. This helps to quickly get an overview of what’s inside the file. It gives you a preview of the complete file content on the right side of the code editor window like you can see in the following screenshot: The minimap is a feature which most developers know from the Sublime Text code editor. This makes it easy to directly see if the correct color code is used. CSS file), detects all color codes and displays the color code string with the corresponding background color as you can see in the following screenshot: In web development you often have to deal with color codes. The File Icons package adds icons for the most common file types: Adding file icons based on the file extensions makes it easier to find files in the tree and keep the overview. #3 File-Icons (by file-icons)īy default Atom only displays filename in the tree view on the left side of the editor window. If the entered file name is not existing yet, the file is created and opened in the editor for editing as well.Ĭlicking on the plus symbol will add this folder to the Atom project structure. You can type in a file name (and use TAB for autocomplete) and hit enter to open that file in the editor. Now you can navigate through the projects by typing in another path in the input field or clicking on a subfolder. The tree view below shows the project folder and files. By default the input field contains the path of the project which is opened in Atom. After having installed the advanced-open-file package you can open the new functionality by using the key combination ALT+CMD+O.Īs you can see the pop-up windows consists of two parts: an input field and a tree view. It can also create new files and folders if they don’t exist. writing the following text string into the code editor: #page>div.logo+ul#navigation>li*5>aĪnd afterwards hitting the TAB key will expand to the following HTML structure: Ī full reference of the abbreviation syntax can be found in the Emmet cheatsheet available at: #2 Advanced-open-file (by Osmose)Īdvanced Open File is a package for helping Atom users to open files and folders easily. Emmet Abbreviationsīy using Emmet abbreviations its possible to write complex HTML structures in short text string. Installing this packages makes it possible to write HTML and CSS code by using abbreviations. More information about Emmet can be found on. One of the most important Atom add-ons is the Emmet package. Here you can click on a specific package to get more information or hit the button Install to add this package to Atom. Searching for a specific package name is possible by using the Search packages input field. Within the settings view you can tab Install from the left navigation menu. ![]() Open the settings view by selecting menu item Atom – Preferences: Installing packages in atom is very easy because all available packages can be accessed and installed in the editor’s settings view. In the following you can find a list of the most essential Atom packages for web developers. This number makes it difficult to identify which packages are essential for every web developer. At the time of writing you can choose from a list of over 6000 packages. The number of available packages is also increasing constantly. The code editor is lightweight, easy to use and extensible by packages. ![]() Github’s code editor Atom is becoming increasingly popular. Posted By Sebastian - 24th August '17 Top 5 Atom Code Editor Packages
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |