Why I moved away from Atom to Visual Studio Code and my Setup
VSC: Visual Studio Code
Why I moved away from Atom
I was an Atom user for nearly a year. Everything about this text editor was perfect for me. For starters, the packages manager was much more beginner friendly than Sublime. Also, there were always new updates which seemed to make my text editor more and more powerful with each update. But 4 months ago I started to feel the pain of the slow speed of Atom. This nearly broke my heart as I had put so much time and effort customizing the perfect setup for my needs. I built custom packages, created color syntax for different languages and even made my own code snippets.
So VS Code?
Yes, I choose VS Code and yes I wasn't sold the first time I saw it. I don't like Microsoft products, but this one had something I really liked.
Fast
Open VSC took me less than 10 seconds.
CPU
VSC took almost no CPU! I got some weird stuff with code helper in the activity monitor of my MAC but I quickly resolved the issue by tweakng the settings(I’ll show these magic settings at the end of this post).
Intelisense
The Atom JavaScript autocomplete was really great but when I switched to VSC I never missed it. The fact than you can mouse over a function and see what it does or cmd + click
on a file path and go right to the file is awesome! You can do the same thing in Atom. I know. But it’s just not as smooth as VSC.
Packages
Like Atom, VSC has a lot of packages. The VSC community put a lot of effort into making your experience with this text editor better everyday. I miss some of Atom packages but at the same time, I have some new favorites for VSC.
My Top Packages
Here you can click on the packages name. This is a link :)
Path Intelisense
This helps you get the relative path of your file and help you to autocomplete path names when you do something like…
import MyComponent from './src/components/MyComponent';
Plus, this works with dependencies from your packages.json
.
Project Manager
This extension helps my life so much. When you have a lot of projects and don't want to waste time finding each one on your computer, you can just save them right inside the window. Just press shift + cmd + p
and Project Manager: Save Project
. Afterwards, you can just come back to your text editor and search right in the project manager by typing shift + cmd + p
and Project Manager: List Projects to Open
.
Auto Rename Tag
This one doesn't do much. But what it does do is a huge help! For example, you’re working on a React project and you want to change your component MyApp
to be YourApp
. This extension will rename rename every ‘MyApp’ to ‘YourApp’ at the same time.
JavaScript (ES6) code snippets
Some es6 snippets you help you write code faster.
Output Colorizer
Add color to the internal terminal. Did I mention there is a built in terminal in VSC?!?
Babel ES6/ES7
You need this if you work with React.
Color Highlight
This will highlight your color variables inside CSS and JS. So, when you type something like #fff
you’ll see a white colored highlight on it.
EditorConfig
If you follow me on Youtube you have surely seen how much I like this little tool. It makes your code more consistent for multiple users. What do I mean by this? It allows you to not worry so much about your Text Editor settings and will add some handy settings like indentation
or trim whitespace
. This is useful for teams because it can be painful to see some 4 space indents on one page and 2 space indents on another. This works on almost every code editor too, so if your friends don't use want to use your new favorite text editor, it will work for them too.
EditorConfig Generator
This will generate a .editorConfig
file for you with some nice editor settings.
Eslint
Again, this is a tool I use on every project. This tool will help you to make your code better and let you know about errors before your code runs. For example, eslint will show you when you miss a semicolon or when you declare a variable but you never use it. But these errors depend on your eslint config.
PS I have created my own. You can install it from npm npm i -D eslint-config-equimper
. This one is an extension of the Airbnb linter.
Link to mine:
Flow Ide
If you are like me and you like Flow you need this tool. Less laggy than the nuclide one in Atom plus it's the better solution for VSC I’ve found.
Guides
Add some indent guide lines to your code. Much easier on the eyes.
Indent-Rainbow
Again, an extension to make your eyes happy when looking through lots of indented code.
Jumpy
This is an awesome extension, but I don't really use it. But for the those who don’t like using their mouse, this is something you need. It will help you navigate your file really quickly without using your mouse.
Rainbow Bracket
Another one that’s easy on the eyes.
React Native Tools
React-Native user? This tool it's for you.
Wakatime
This plugin will track your time spent in your text editor each week. It's like a Fitbit for a programmer. It will tell you which project you spend the most time on, which language you use the most and can even keep track of goals you set during the week.
My Editor
My color schema is One Monokai. For icons I use Material Icon Theme
My settings
You can add some of my settings to your.
My Snippets Packages
Hidden Gem
One of my friends have started his own youtube channel where he talk about programming in general. Take a look at his channel :)
If you want to learn React-Native with NodeJS for your server side, I'm building a tutorial on youtube.
https://youtu.be/qmNPpoVkY2Y?list=PLzQWIQOqeUSNX\_ZDqt9L3TMSwFa9GbIwp
3.4K+ developers have started their personal blogs on Hashnode in the last one month.
Write in Markdown · Publish articles on custom domain · Gain readership on day zero · Automatic GitHub backup and more
JS is Love, JS is Life. Love web development in all levels of the stack
Man thanks for your video. VSCode has some amazing extensions but discoverability is a real problem on the store. Thanks to you, I've found some super useful extensions that help a lot!
I'm so happy you liked this one :) I really appreciate this kind of word :)
Learning ...
I've moved to VS Code from Vim recently. Sick of Vim's glitches (to be precise, it's plugins), poor syntax highlighting, How using VS Code in Vim mode and it is a great editor.
Web and programming
Right as I just got into setting up my Manjaro distro, I see this article which makes me want to try VSCode (thanks to you) instead of sticking with ST3 (Sublime Text) as I was for the past years (I haven't tried any other graphical code editors like Atom or Bracket tho).
Maximilian Berkmann I haven't tried Arch Linux yet but certainly am looking to try in the future. Manjaro is suppose to be kind of my introduction to it.
Frontend Developer
Can you explain a bit more about what you mean when you say Atom is slow? I've never seen it slow down and I'm curious what your use case is. It is a sentiment I've heard before from others. Your screenshot suggests it's simple javascript apps. For me Atom takes ~ 4s to start from within a VM.
If you have the time, I would recommend reading this article to find out what's causing the issues you're seeing. http://flight-manual.atom.io/hacking-atom/sections/debugging/
In the latest explorer i have to share some knowledge here fileexplorerwindows.com you have to go and see that there shortcut keys function and also more advanced featured have been provided in this explorer.
i visited your site and its nice and informative. airaindia.com/valve-automation/ball-valve-m..
Full stack web developer working on .NET stacks. CTO @ badeggs.it
The youtube channel of your friend doesn't exist!
Thank you for let me know :) I edit my post and this is the link :) https://www.youtube.com/watch?v=MickjHEDC4k
Comments (16)