![]() ![]() We will simply add a line at the beginning of our source code with the address of the folder where we want to save our HTML or CSS file.Formatter plugin adding a js-beautify interface to the Atom editor. We will not need to install other software on our computer to compile the code. This extension is meant for all those who use Jade/Pug and /or Sass. For this, we will have to install also in Google Chrome (only browser supported by now) the extension LiveStyle Jade-autocompile / Sass-autocompile With LiveStyle we will see the changes that we make in our code in real time in our browser. This extension is based on a function that will be recognizable for those who use Sublime Text. Thanks to Highlight Selected, we can highlight a single word in the whole file, no matter how many times it has been used. In addition, it makes use of the autocomplete function of Atom, so it will give us suggestions of the coloursthat we have already used in our project when we start to write the colour code. ![]() Pigments searches within your project and creates a directory with all the colours used. It also allows us to convert any colour code to another format, for example from RGB to HEX.Īt first, Pigments may just seem like a nice colour highlighter within our code, but it goes much further. Using the keyboard shortcut CMD-SHIFT-C (on Mac) or CTRL-ALT-C (in Windows) a small window with a colour selector in HEX / HSL / HSV / VEC formats will open. With Color Picker, the colour selection will be simpler than ever. We can also boost this extension with Minimap Highlight Selected, which will highlight in the minimap the parts selected in our code. It is very useful to have everything visible, to be able to move easily and verify the code quickly. Minimap lets us have a column, on the left or right of the editor a preview of the source code of the open file. Similarly, it will let us choose between different icons, in case we are using a dark or clear theme. It also supports different languages such as JavaScript, PHP, Python, Ruby, Java, C, C ++, C #, TypeScript and SQL.įile Icons adds an icon to each of the file types in the Atom navigation panel to make it much easier to recognize them. It is very useful when we work with third-party files, or we want to correctly display HTML / CSS files if we work with Jade / S CSS. With Atom Beautify we will not need to fix code and tabulate hundreds of lines to leave them to our liking, making it more readable anymore. Or if we write this: div>(header>h1.logo+li*5>a)+footer>pĪgain, when we press the tab, we will have: Then, we will press the tab key to obtain: At first it may be hard, but once we have become accustomed to Emmet’s syntax,we will save writing and working time. If you have installed Atom, the next thing to do is to look for Emmet in the catalogue of extensions. They are essentials for us, as without them our daily workflow would not be the same. We will show you in this post our two favourite extensions. An example of this is that currently, in version 1.12.7, it has more than 5400 Atom packages available on its official website: extensions and themes to modify the appearance of the program. ![]() Besides being free, it is open-source, which is why it is the favourite of many developers, since it gives the possibility of being able to customize it practically to our liking.Ītom had its first stable release in the middle of 2015, and since that date, its community has grown exponentially. All Our Premium Themes in a Theme Bundle See ThemesĪtom is a code editor developed by the team behind GitHub. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |