ISO the new guy tool kit

2

Well, Here’s a list of what I would recommend to install for programming.

DO MIND THAT THIS IS FOR FRONT-END DEVELOPER

  • Text-editor: VS Code or ATOM.

    • VS Code is a free open source Code Editor made by Microsoft. It is feature rich, and fully customizable. It has Git built in the text editor, so if you use GitHub, you can push, pull and commit easily. It also have a really amazing Extension Marketshop integrated inside the code editor So you can install extensions in it. Here’s what VS Code can look with a little bit of extensions and tweaking:

    image
    image1366×743 128 KB

    • ATOM is another code editor that I would recommend if you do not like VS Code. It is made by GitHub, so Git is integrated automatically inside the text editor. It is “A hackable text editor for the 21st Century” - ATOM.io, which means that you can code Atom to your own liking. It also have a marketplace for packages and extensions. Here’s what Atom would look like:
      image
      image1366×697 54.6 KB

  • Node.js and NPM.

    • Nodejs is the server side JavaScript Environment. If you’re a front-end developer you know that JavaScript can only be run in the browser. Well Ryan Dahl wrote Nodejs that lets you run JavaScript in a server-like environment, so you’re not stuck on running it through a browser.
    • NPM is an open source package manager for Node. It has recently became a part of GitHub. This is where you download packages so you can write codes easier. NPM is normally installed WITH nodejs when you install Nodejs.

  • VS Code Extensions:

    • Code Spell Checker - You asked for something that checks for typos, this is the extension that does exactly that. It checks if your code that you typed is in a library of dictionary. If it’s not, it’s going to give a nice info that it’s not in a dictionary for that specific language.
    • Prettier - This extensions will format your code into a nicer looking, indented format. You can customize it to your liking. So you don’t need to worry if you forgot to indent your function inside a class, because Prettier got you.
    • Quokka.js - “RAPID JAVASCRIPT PROTOTYPING IN YOUR EDITOR” as the documentations said it. It will display your console.log();, and functions. If you’re a JS developer definitely a tool you want.
    • Material Icon Theme - This is an icon theme that will, change the icons of files. So an HTML file will have a nice looking icon. It has a wide variety of icons across a variety of file extensions.
    • Live Server - Working with HTML is hard, everytime you want to see what it’s doing, you have to find the file and click it. But with Live Server, it will open up a browser for you with the HTML compiled. It also auto reloads everytime the code changes.
    • Bracket Pair Colorizer - If you work with JS, you know that there is going to be A LOT of nesting. All of this will also create a lot of brackets{ } and parentheses( ), and when you come back to it, you’re quite confused which block contains what. This extension colorize the pair brackets with the same color. No more eye strains
    • CSS Peek - As the name suggest, it will peek the CSS that is assigned to a specific class selector. Not just peeking, you have full control over the CSS, that means you can modify it on the fly. So no more using mouse to go across different files just to get to the CSS.

That was my list, Sorry if it is REALLY LONG, but hope this will help your journey :slight_smile:

1 Like