My Code Editor: Atom, Setup & Packages

[@logomoniclearning6680]

This video Teaches you: 0:55 installing atom 1:30 changing default settings 5:30 disable default packages 7:00 installing themes 9:00 installing Jade 9:33 disabling autocomplete 11:00 installing pigments(color)

[@phorkyz1048]

God bless you

[@kouchsengngy]

How to Find All Atom StyleSheet. For those who can't find this file. You can just go to top bar. -File -> StyleSheet. -To open a developer tool, just use Ctrl + Alt + i -Now copy and paste this whole thing into your 'style.less' file: atom-text-editor::shadow pigments-markers::shadow pigments-color-marker.dot, atom-text-editor pigments-markers::shadow pigments-color-marker.dot, atom-text-editor::shadow pigments-markers::shadow pigments-color-marker.dot, atom-text-editor pigments-markers::shadow pigments-color-marker.dot, atom-text-editor::shadow pigments-color-marker.dot, atom-text-editor pigments-color-marker.dot { transform: translate(-8px, -50%) scale(0.4); } I hope this help!

[@LomidzeDavid]

I have just switched from Brackets to Atom and you really helped me to set it up, thanks

[@OfficialDevTips]

You are welcome!!

[@kouchsengngy]

How to Split Left. In order open the command search, just use Ctrl + Shift + P Then type: any keyword. Hope this helps!

[@avaiaidarov5617]

thank u so much

[@vasuummidi3374]

What are the atom packages to run JavaScript and jquery

[@david_d-_-b_in]

Hah! Great timing again Travis! Just yesterday I started searching for other options after many years using Sublime Text. I tried Brackets but I missed the key bindings I already knew from Sublime among other things. And today you make this video :) I'm enjoying Atom a lot. It keeps the appearance and keys from Sublime with a more polished UI and plugin customization. I find it very useful and powerful. Thank you once again!

[@OfficialDevTips]

Glad you like it man!! Thanks for watching :)

[@SergyOrloff]

Hey, man, this video helped me. Just installed Atom yesterday and was horrified by everything, watching you doing some stuff easily and fast made me more confident for experimenting=) I am just studying basic HTML on Coursera (for a week), that is my excuse to be afraid of everything =)

[@gingerbenw]

Sergy Orloff and how are you getting on now? =]

[@spencerwhite3400]

A dev who deletes Atom, sacrificing all of the settings he has configured? You are a true martyr

[@SnowHunter44]

Thanks for the tree-view tip - I was scratching my head wondering what was going on. Great video, more needed. LOL

[@Timooooooooooooooo]

Hiding those ignored files definitely looks a lot cleaner. I would probably still display the VCS ignored files myself, as I regularly check them for debugging. Great video once again Travis!

[@OfficialDevTips]

Yea, every now and then I need to get in there too...

[@KillerKyuubi]

Ahh yes! Just when I was wondering about people's preferred editor and extensions. Can't wait to watch!

[@OfficialDevTips]

Hope you like it!

[@apistosig4173]

Thanks

[@tsujin3122]

Great video! Solarized dark ui + the matching syntax theme are my absolute favorites. They're subtle, usable, and easy on the eyes.

[@chrisconrad234]

Waw! Thank you so much for this video Travis, i love it! Have a great week buddy! Greetings from Germany!

[@OfficialDevTips]

Thanks Chris!

[@t.7527]

Thanks Travis. Always good stuff from this channel. Here's to a great 2016!

[@OfficialDevTips]

Thanks Taure!

[@FaradayAcademy]

I've been using atom at work and now it is finally how I want it. Thanks

[@OfficialDevTips]

You are welcome!

[@FabienLasserre]

After years of using Sublime, your video made me reinstall Atom today, and boy did that editor change! It's definitely slicker, faster, and better than I remembered.

[@OfficialDevTips]

yea, it's improved. I uninstalled it a while ago too. It's much better :)

[@rje613]

I dont know about anyone else but I had tons of trouble trying to get the pigment to change shape. This worked for me: atom-text-editor .gutter[gutter-name="pigments-native-dot"] .pigments-gutter-marker div span, atom-text-editor .gutter[gutter-name="pigments-native-dot"] .pigments-gutter-marker-in-selection div span { transform: scale(0.6); }

[@dazeh10]

Oh wow, i didnt even know this editor existed. I have been using Brackets, but this seems so much more polished.

[@DQuranJar]

File > Stylesheet (this will show style.less) to open the inspector in windows press Ctrl+ Shift + i copy this : atom-text-editor .gutter[gutter-name="pigments-native-dot"] .pigments-gutter-marker div span{ transform: translate(100%, 0) scale(0.7); } change the scale that suits you Hope this helps :)

[@MyBeerwdHurts]

I really appreciate the tip for changing the pigments values to dots. Thanks!👍

[@alxdelko]

Btw regarding emmet and jade... They work together, for example if you want to create 5 li elements in jade, you can write li*5, hit tab and with emmet installed it will covert it to 5 li jade elements (you don't have to write li 5 times). Have fun!

[@kishanshetty17]

You're Awesome! Everything you do is of great help to all the beginner developers out there!

[@OfficialDevTips]

You are welcome man!

[@thomastallis8819]

First time to see this fellow. Travis's lucid explications are super helpful! Even his lighthearted carping of tiny annoyances rings true; after all, don't we all have a few pet peeves about editors, ill-conceived defaults, etc.? Thank you Travis for taking the time to create this! (my personal editor journey over the years: emacs/vi -> sublime -> atom)

[@jeis93]

Hey, one of my comments on what Atom packages you use made it onto the video! Woohoo!

[@Timooooooooooooooo]

Haha, congratulations!

[@OfficialDevTips]

Nice!

[@jeis93]

+DevTips Anyway, thanks so much for your help; your videos and podcast have helped me grow as a coder/designer, as well as a young professional. Keep being awesome!

[@christopherjspiteri]

Switching to Atom. Thanks for the tutorials, many features I did not know about.

[@andywongable]

You were close to starting a tab vs spaces debate lol

[@Candyapplebone]

The advice on ignoring files was great

[@HowdyhoNet]

Switched just now from Sublime Text 3 to Atom, hope it will be good enough :) I mean i used Brackets before and it was not enough performant than i expected. Thanks for this tutorial :)

[@OfficialDevTips]

Hope you like it :)

[@HowdyhoNet]

For now i do, but only some job project will show :)

+Хауди Хо - Просто о мире IT! But this is a Sublime just with ui for user settings thats all.... as far as I can tell. All the shortcuts are the same. But Sublime are a little faster.

[@HowdyhoNet]

This is not Sublime, at all, though the shortcuts is same. I've tried to use Atom, and it's too slow for me, so i removed it and using only Sublime for now.

[@clitaiulian4497]

+Хауди Хо™ - Просто о мире IT! You should try Visual Studio Code as a Sublime replacement. It's fantastic. I've made the switch and never looked back. Atom, yes, to slow while VS Code is only slightly slower than Sublime.

[@daveyhi3154]

I misunderstood what you were saying about pigments and variables initially. I thought you were saying that you could assign a color to a to a variable and it would show that variable in that color anywhere it occurred in the code. Seemed like a good idea so I was wondering if there was a package that would do that? For example, you were to have a declaration "int MyVariableName = 0" in the package you could assign a color to that variable name, say RED. So anywhere in the code myvariablename would be shown in RED. if you had "unsigned long AnotherVariableName = 0; you could assign BLUE to that and everywhere AnotherVariableName occurred it would be in BLUE. This way you could quickly scan the code and see where the variables were used. It'd also be sort of a second check. If you typed in the wrong variable name (one with a similar spelling) you'd know right away as the color would be wrong. Nothing would change in the code itself, just its appearance in the editor. Does such a package exist?? Thanks!

[@Jonesrful]

mmm it's something new and interesting. Definitely worth the tryout. I can't resist after watching this.

[@jagaso367]

It actually helps that you don't use auto-complete. As for beginners and learners it makes it easy to follow your tutorial.

[@charlesw2022]

The tree-view setting explains so much. Manna from Devtips indeed

[@OfficialDevTips]

yea, that caused me a lot of confusion :)

[@JohnSmith-bj7uc]

VERY high quality videos man. Keep up the good work!

[@vlad981]

Thanks dude) very useful thoughts about colors package)

[@OfficialDevTips]

Thanks man!

[@joumaicomaulas5273]

“It's not the tools you used, it's how you used it” - Travis. I had the same experienced with my colleague in college, he keeps on publicizing on Facebook about his anticipation of the new update version of his iPhone's OS yet he doesn't know what I am talking about AFS which is being bundled in its latest version. LoL.

[@stevebez2767]

Andrew AFS or Sna print AFP ibm or ZFS 2 AFS DFS ?hahaa,ADO b?

[@joumaicomaulas5273]

I said iPhone so obviously I'm referring to Apple File System. Common sense please.

[@kaz770]

An excellent video turned out, everything is well thought out, a very clear instruction turned out)))

[@911jaz]

I hit the like button within a minute of watching it. brilliant start. haha

[@OfficialDevTips]

haha, thanks!!

[@sweetbabyjesus1000]

I was using Webstorm for quite a while but Atom seems to be my new go to. It just looks so dam good !

[@danieljohns1318]

Hey man, great video! Are you going to use the "green screen" from now on? I find it distracting and prefer the circle in the corner. Thanks!

[@1sickday]

I am a simple man, I see Ableton, I upvote (or like).

[@nancya7289]

I like your style. Just installed the app and was having difficulty figuring out how to open an html file in a freaking browser. The ATOM open-in-browser page was distinctly useless.Couldn't figure out how to open the freaking Settings. It was just a word on the lower left of the screen with a rollover message about freaking paths. So first helpful info in your video: Command-, (that symbol is a comma) opens the freaking Settings window. Oy and gevalt already. Watching you install a package helped me to install a freaking package. Then looking at where your cursor was located in order to open the Settings of a package showed me not to click on the title (which leads to the unhelpful open-in-browser page to which I previously alluded) but on the description text. Not very intuitive imho. There may be a quicker way of opening in browser. I have received the distinct impression there's a line of code I'm supposed to write somewhere. Your video shows how elusive and needlessly complex such tasks can be (re: final step for making certain files invisible). Perhaps I need to work a little on developing frustration tolerance. Sigh. Your calm, precise presentation helped.

[@awakekat]

If you switch between a lot of projects, I recommend the package Project Manager. The reason I switched from Sublime Text to Atom: autocompile of Jade and Sass with the packages Jade Autocompile by ManRueda and Sass Autocompile by armin-pfaeffle. Just add a little front matter to the top of your files and your cookin' code.

[@Timooooooooooooooo]

+Katherine Wakefield I love Project Manager, but for some reason it doesn't show up in my command palette anymore for some reason, so I kind of stopped using it. It's easy enough to open it from the file explorer for me now, but I might want to reinstall that package again, because it's really awesome.

[@OfficialDevTips]

+Katherine Wakefield Sounds great! Thanks for the recommendation!

[@supahfly_uk]

Thanks for the share im using atom right now love it :]

[@KristoferKarlsson]

It makes perfect sense that the autocomplete recommends HTML at 9:20. That would create the selector ".cf marquee".

[@karlsolitario8013]

Just wanna say, you're awesome!

[@OfficialDevTips]

Thanks!!

[@IaMaWeSoMe7478]

My top Favorite Editors are: Brackets, Atom, Bluefish, and Netbeans!!!!

[@TheMalni]

I loved the intro so much! Talking about Atom, I installed it a few days ago and it's a big change from Notepad++ :D Anyway, it was nice to compare my my own settings with yours.

[@Timooooooooooooooo]

+TheMalni That must be a big difference! I can't image coding in Notepad++, I would probably go crazy. Respect for you my friend!

[@OfficialDevTips]

Awesome! Glad you liked the video!

[@jamster0777]

Very appealing video, great delivery style,if Travis develops as good as he presents, Travis is making some great software.

[@OfficialDevTips]

Haha, thanks!!

[@meleecraft]

Im no patreon (cause i'm broke most of the time..workin on it *nervous* *laughter*) but inside, i feel like one, watchin all these cool video tips from @Travis @Devtips

[@OfficialDevTips]

you don't need to give to be a part of the fam. Thank you so much for supporting where you can!

[@stevebez2767]

hey,everything if broken,goof off two,HAL editor!!

[@eggwaffle]

Travis, emmet works with jade. you can type img *tab* and it will make the brackets, write src, alt and put the cursor at src="" . Emmet + Jade = maximum laziness

[@OfficialDevTips]

hahah, nice :)

[@AurovrataVenet]

Really nice video, top quality. Any chance you have a video showing how to work with atom on a project, sftp/ftp remote tree view, project set up, and saving all these configurations in a project so as to re-open the project where you left off ?

[@whadayatinkin2245]

Hi, I have no background in programming or hacking. I do have an extensive background in IT. In the past have written batch scripts and such for Windows. I work 99% on my Mac now. I am wanting to get into reverse engineering software. I've wanted to learn for ages, but never have taken the step because of being too busy in work. Now that I am retired, I have more time, but I have also learned that memory and things aren't as good as when I was younger. I always said, "That's not happening to me"... but age is declaring war on me... My son is 13 and he has shown an aptitude at learning some of this, but he is really into gaming more than anything else. When he isn't gaming, he is watching youtube. Now, to the point. I was hoping that my son and I could get into this together and learn how to reverse engineer software hoping that might get him interested more in programming as I think he would be pretty good as meticulous as he is. My question is does anyone have a suggestion as to where newbies can get started with the very basics and learn step by step how to do this and is Atom the right tool for that or other? Is this doable on the Mac or do I need to be on a Windows computer? Thank you to anyone willing to help us get started.

[@TheB0sss]

Minimap is amazing to imo. You can also install sync-packages (I don't know if this is the exact name). This way when you install atom fresh you can install that 1 package and it'll install everything else for you, including custom css etc. It works with GitHub gist

[@tallatom6499]

Very helpful! Thank you Travis, you're awesome!

[@OfficialDevTips]

You are welcome!!

[@TheTyrellWellick]

The "Native" UI theme is also quite cool using MacOS.

[@3eform]

Pigments man! simplifies a lot :) I tried to learn most of the tools I can, but mastering just one. Sometimes I switch from one to another depending of the project or personal mood lol. Thanks for sharing Travis, I'll give it a try to Atom.

[@OfficialDevTips]

Glad you liked it :)

[@mondovila4106]

Congrats on the 1M+ minutes of viewing of this video! I saw your most recent video. :D

[@rankvolume]

the autosuggest feature tho its fine as it is. What you did there is in the CSS console/window you didn't properly typed in the class or the id for a particular element.

[@rankvolume]

oh I can see now. You're not really a coder. Newbie? most of the players that works on real world projects as I am(themeforest/clients). Emmet is our best-friend, at least it is in our end. I'm wondering how many hours you can finish 1 project.

[@discoboy1500]

Great Video, Thank you for taking the time and effort to make it I was just wondering how to get the style.less file to change the dots?

[@pengmarkgang4627]

Thank you for all of your videos which are so amazing!

[@OfficialDevTips]

You are welcome. Thanks for watching!

[@techdragon9790]

Brackets is the one I use, great themes available and packages :)

[@BryceStradling]

+Devtips actually you can use emmet with jade. I'm pretty sure it's the only HTML preprocessor you can do that with. I think in your videos it would get to abstract for people to follow, but when I'm trying to make a quick web page or email emmet + jade = AWESOME.

[@OfficialDevTips]

I'll have to look into that. Thanks!!

[@nealpatel7696]

You guys should checkout LiveReload it's especially great for web developers so that once linked up to your browser, every change you save on Atom is shown automatically in the browser. Just makes life easier.

[@AravindBalla]

Great one! Was waiting for something like this :)

[@OfficialDevTips]

Fantastic!!

[@teqch]

Nice video! I'm currently using Atom for my internship in a company, but I have to change to VisualStudio because of ASP.NET love the intro! haha

[@nonamo828]

Really cool video Travis!

[@aynseenqaf5355]

you`re great dude, i totally love your channel

[@DavidKarlsson]

Emmet automatically expands into Jade if you're in a Jade file and css/sass if.. You get it. :) But hey, use whatever you're comfortable with.

[@OfficialDevTips]

I think i've heard that before. I should look into it. Thanks man!

[@peteryu4353]

Travis, you're the best! Keep up the great work!

[@harikrishnan621]

you are absolutely awesome

[@kunalbehrunani1166]

Sir, I am unable to install any package in my Atom editor. Every time I search for one, it fails and shows the message "tunneling socket could not be established, statusCode=407". Kindly Help @Devtips

[@HindiMonitor]

same problem

[@eskinatmert]

i really like the explanation and the style!!

[@mamiesharrieffschrean2575]

Thank you for this video and bless your day

[@slslslslsl556]

Great walkthough, Travis! Edge case: After installing pigments and viewing a minified css file (with +6600 lines before minification) Atom freezes. I assume there are too many colored circles to display at once and that is why it happens.

[@Timooooooooooooooo]

+Simon Lindberg Andreassen That's a large CSS file you have there! I hope it's not too much of a problem, I wouldn't think so since you probably won't really view a minified CSS file that often. Does it work in the unminified file? This might be something to file an issue for on the package's repo, to disable itself if it needs to display too much at once. I know that Atom doesn't do syntax highlighting for files over 2MB (I believe it was something like that) because it currently can't handle it.

[@OfficialDevTips]

yea, Man, I don't know. A lot of ppl are saying that Atom is too slow for them. Interesting.

[@zeys1073]

When i am opening , Let's say an .lua file (it is just like a text file) how can i open these files with atom by default?

[@g4rdo984]

uve helped me to find a new IDE editor for nodejs :D thankssssssssss a lott!!! blessings!! :D

[@shay00795]

awesome video man. loved it. never stop doing this, you will always have our support. Liked and Subbed.

[@MeanMachineRex]

Hey Travis, I set up my Atom with you, yeah! And in a Udacity course on Git, they integrated Sublime into their working space. I guess I will follow suit to set up mine with Atom. By the way, now I got Atom, Visual Studio Code, Git Bash and Git Shell. Is this too OTT? Shall I get rid of some? I realize the Visual Studio code is a code editor and Bash and shell are text editors but can you tell me more about the differences?

[@HindiMonitor]

same

[@rja421]

My packages at the moment are: stylus, atom-beautify, emmet, linter, linter-jshint, minimap, pigments.

[@OfficialDevTips]

Thanks for the list. Awesome!

What is shortcut for the inspector I have tried cmd + i but it doesn't work.? Thank you

[@unbekannt792]

Does someone know where he got the code from to make the dots a bit smaller?

[@stevebez2767]

Etch a Sketch?

[@hfhacksflyhigh283]

the jump-cuts are killing me bro

[@PierrePLANTIE]

Hello mate, thanks for the great free content , keep up the awesome work !

[@OfficialDevTips]

You are welcome! Thanks for your comment!

[@mamiesharrieffschrean2575]

Thanks travis great help, but a long way to go

[@regather59]

This is a convincing and enthusiastic description of Atom usage, and it might just tempt me away from gVim!

[@OfficialDevTips]

I think you might like it. Like Broccoli!

[@regather59]

Okay, I spent a day trying it, and building up a configuration that I liked (including Sync Settings with a Gist). Discovered: - it's probably superb for working on a complex coding project that's all in one folder. - Windows uninstall (if ever required) is labrynthian - github > atom > tree-view > issues > 946 - explains why I gave up as a gVim replacement. I've been working from gVim on a daily basis for over two years now. I regularly improve my configurations, and keep them on GitHub for rapid transferability between machines. I use gVim for general note-taking, creative writing, LaTeX document creation and coding in various scripting languages with GitHub integration. My setup is very easy to install/uninstall on another machine, and then allows me to zip around my entire OS & data structures with ease.

[@FlashManinSpace]

Joseph Harriott Atom with Hydrogen will leave gvim faaar behind! My mind is still blown from it 😂

[@stevebez2767]

what about nuclearbpower gene divi of semantics,syntacts,manner,ground zero raise punch card combine ,pavlov yunno?

[@jessie19painter]

How do you 'run' your HTML code? I saw scripts which atom supports. Any suggestions?

[@jozef_s]

What do you think of new Coda 2.5? Is the Atom the only one you use? Thank you. Congratulations on your new job btw. ;)

[@SansP3ur]

Interesting that you're able to use spaces inside the input cells (e.g. roboto mono). The spacebar doesn't seem to have any affect when I use it anywhere in the settings. #sad

[@ivanprintis16]

What are you using to create your videos? Camera, Mic, Video Editing Tools

[@OfficialDevTips]

There is a behind the scenes video on the channel somewhere

[@jessesibley5056]

Yes Travis!

[@OfficialDevTips]

Thanks!

[@adamcollier1907]

Hi Travis, love the video! just wondering does atom compile sass automatically or do you have to install a package?

[@OfficialDevTips]

I normally use codeKit, but I think atom does have a package

[@monkeymaster6489]

New sub here. Kinda new to the coding stuff as well. This was fun watching. Keep it up

[@Timooooooooooooooo]

+MonkeyMaster 64 Welcome!

[@OfficialDevTips]

Thanks for subbing!

[@DennisVlaanderen]

How did you set up Atom for working with SASS and Jade/pug?

[@vasuummidi3374]

What are the atom packages to run JavaScript and jquery

[@bikutoso]

I might look into this when the package is available in the repository for the system i use.

[@AkashsinghSisodiya]

Thanks a lot for this Video

[@adio]

super helpful video. thanks:)

[@katstevens3318]

Hi! Im in a beginner course and when I'm typing my code into the classroom computer's atom it comes up in different colors, but the atom that I just downloaded only shows my code in all white and im having a hard time figuring out how to make it come up with the colors. What do I do? Thanks

[@AsifHassanran]

You are simply awesome bro #DevTips

[@OfficialDevTips]

Thanks man!

[@vasuummidi3374]

What are the atom packages to run JavaScript and jquery

[@lnvincent13]

it's again, a good one! :) I really like your videos!