Quite recently I came across the post IDE - The beginner's trap. It's a must a read, good article by Younes
But
I can't agree to it 100%. Moreover, sometimes it seems to be misleading for beginners. That's why I'm writing this down. Let's discuss
What's an IDE?
An integrated development environment (IDE) is a software suite that consolidates basic tools required to write and test software - Wiki
Basically some tools on top of a code editor, right?
Training a few newbies - My story
In the past, I used to train students programming in HTML, CSS, JavaScript using editors like Notepad++. I went quite well. But it was 3 or 4 years back
Recently I'd to train some freshers in my startup. They've some basic knowledge from college. I'd to make good at the backend (NodeJS) and frontend (ReactJS). I'd configured VS code for them with everything I know when it comes to the best practices in React and Node.
- Setup Prettier
- Setup Eslint
- Strict rules from Airbnb style guide for JS in Eslint
- Install extensions for JS, JSX, CSS etc
- Some intellisense extensions
What I learned
Once you make some mistakes in Nodepad++, most of the time it's not intelligent to tell you those mistakes, you need to run and see the console for errors
But if you're in IDE, whenever you make mistakes, before you run it show you the errors and the suggestions to fix it. For beginners, I think it's really good. Because if they aren't seeing the output really fast, they will eventually hate programming, and they'll lose track
We'd very strict rules and config so that our developers follow the best practices. Some good examples would be (in front-end, React)
- Shows warning whenever a lifecycle hook that is deprecated is used - Beginners are not very well interested in reading docs, or even experienced ones are not up to date with docs.
- Shows warning when
setState
is used in hooks that have side effects - Not only IDE shows it's not recommended, but also indicated why! - Suggestions on what to do when you add
onClick
to div (beginners forgot to make themcursor:pointer
), followinga11y
style guides - Naming variables - beginners always tend to write
var=a,b,c
. A properly configured IDE can suggest using camelCasing or whatever you follow var
is not required. We never usevar
. Alwayslet
orconst
. IDE will suggest why it's not needed, and alternatives. You can say beginners need to study JS before writing JS, but I believe 90% of the learning is while doing it- You missed catch statement - Beginners always think "yup I'll get a response for this HTTP call", what if it fails? My IDE always throws errors whenever there is a
catch
is missing - No console logs - Whenever someone uses
console.log
and tries to commit code, our tools in IDE will stop them from committing. - No parameter reassign - Not just for beginners, Experts also forget it sometimes.
- Warning or
JSON.parse(JSON.stringify(Object))
- It's a very dangerous one, some beginners I've seen frequently use it without knowing the proper method. IDE suggest to not use that. So they'll eventually use the proper method
There are plenty of things to add. But I'm ending up here.
Conclusion
IDE is not always for auto-complete and code-snippets. It's much beyond that. Whenever I'm coding in a properly configured IDE like what I said before, it feels like an experienced engineer is sitting next to me. He helps with my errors, suggestions, best practices, indentation, tools and more.
After training a lot of beginners I found that using a properly configured IDE can help you make better programmers, by following the best practices. It's also less headache for senior engineers because we're sure that 80% of the basic code review is done by the editor. Otherwise, they can't commit code!!
I regret the days where I taught newbies programming with Notepad++
IDE is not always a trap - I feel it's a blessing for beginners