I find that this helps me to free up some cognitive space and increases my productivity when working with large projects.
I’ve also enabled the scroll-past-end option.
This enables you to do something cool like well…scroll past the end of the file.
Previously….
Previously you could only add a few spaces to the end of your code in order to scroll a bit further down and see the end of your program.
However, with this new option, you can simply scroll past without adding those pesky spaces into the program!Scroll-past-EndPersonally I love scrolling to the end of my files and seeing some space afterwards so this has really helped fix my obsession with extra space.
:/You can change it in the settings under the editor tab.
ThemesPersonally, I haven’t really played around much with themes except for the default, the material UI theme and Pen-Paper CoffeeCurrently I’m using the Atom Material UI Theme for my UI theme and the Solarized Dark Option that comes bundled with Atom.
It looks something like this for Javascript files with keywords and special characters highlighted.
However, when I’m typing out my Latex, I tend to use the UI theme Atom Light and Pen Paper Coffee for easy reading of my latex.
I’ve also installed some packages(see Packages) that’ve made it easy for me to write latex well.
Some sensitive information was removedPackagesFor Web Development, I am currently usingPigmentsPlatformio-IDE-TerminalDrag-Relative-PathFile IconsTodo ShowPigmentsI find Pigments super useful for deciding on CSS colours and working with CSS variables.
It’s an insanely powerful plugin.
I haven’t been able to use pigments to its full potential because it’s mainly more useful for .
less files.
But Pigments is able to retrieve CSS variables and LESS pre-processor variables which makes things easier when dealing with large repetitive chunks of code.
I’m currently using the native-dot setting in pigments which helps me see the color i’ve chosen in my CSS code as a dot, but there exist a whole bunch of other options which you can play with.
Platformio-IDE-TerminalPlatformio-IDE-Terminal is useful because it immediately opens up a terminal in the file directory that your file is running within.
It also allows you to open multiple terminals, all within the comfort of your Atom WorkstationI’m currently using Oh-My-ZSH for my terminal.
Therefore my terminal will look slightly different than yours.
If you’re interested in checking out Oh-My-ZSH, you can do so hereDrag-Relative-PathDrag Relative Path is super useful when it comes to linking your .
css and .
js files in your html file.
Instead of having to key in the long and lengthy linkage files, just click the file you want to link and drop it into your file and voila!File-IconsFile-Icons is something I’ll recommend highly.
It helps me see at a glance what sort of files I have in my directory using visual icons and works in the background to help de-clutter my workspace.
SnippetsThis is a section of atom which I’ve recently discovered which is so useful, once you get your head around how to configure it.
These allows you to save snippets of text that can be auto completed to form chunks of code that you regularly use.
//Sample Snippet'.
text.
html': 'Add A Button with a class': 'prefix': 'clasbut' 'body': """ <button class="$1">$2</button> """Let’s break down what this snippet code means.
'.
text.
html'This is the main way you group your snippets together according to the file type.
It makes sense given that the code snippets you would want to use for HTML pages will be different from those for Javascript ones.
If you want to add a custom snippet type that isn’t supported by atom, it’s pretty simple!.There is a text file in your %USERPROFILE%.
atom directory called snippets.
cson that contains all your custom snippets that are loaded when you launch Atom.
You can also easily open up that file by selecting the File > Snippets menu.
'prefix': 'clasbut'The prefix represents the text that you’ll be entering in to access your code snippet.
You can name it anything you want but make it easy to type and distinct enough so it doesn’t get confused with a whole range of other snippets that you’ll be creating.
'body':"""<button class="$1">$2</button>"""The body is the text that will be autocompleted in place of the original prefix in your file.
You could potentially add in large multi-line chunks of code.
If so, it’s advisable to use the triple double quotation marks so that atom imports it in as a whole chunk.
Each $ followed by a number is a tab stop.
Tab stops are cycled through by pressing Tab once a snippet has been triggered.
For instance, I’ve just created a clasbut snippet so that I can save time while creating buttons with classes.
As soon as I enter the first half of that snippet prefix.
and hit enter…and the code snippet appears!I hope this article helped you in learning about some of the tips and tricks that you can use for Atom and feel free to leave any of your tips and tricks in the comments below!.