Setting Up a New MacBook for JavaScript Development

栏目: IT技术 · 发布时间: 5年前

Setting Up a New MacBook for JavaScript Development

I just got a new MacBook Pro 16" , and I need to prep it for JavaScript software development. This happens all the time when you get hired for a new job, or when you just need to upgrade your personal machine for side projects.

Note:Last updated: Feb, 2020

1. Install Brave and/or Chrome .

2. Install nvm, Node, and XCode Developer Tools

There is an official mac installer for Node, but you’ll want to be able to easily upgrade or switch Node versions, so use nvm , instead.

Run the following command to set up your .zshrc :

touch ~/.zshrc

Visit the nvm GitHub page and copy/paste the curl version of the install/update script into the Terminal.

To find Terminal, click the Launchpad icon, type “Terminal” into the search bar, and then drag Terminal into your dock. You’re going to use it a lot. MacBooks running Catalina (10.15.x+) use zsh by default, but zsh works fine with most Bash scripts.

NVM Installer Script

Launch the terminal and paste that curl script into it. It should look something like this (but use the version from GitHub because it might be newer):

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash

The first time you run this on a new MacBook, you’ll get an error like this:

xcode-select: note: no developer tools were found at '/Applications/Xcode.app', requesting install. Choose an option in the dialog to download the command line developer tools.

But that’s good, because it should automatically ask you if you want to install the XCode Developer Tools to get Git. Go ahead and do that, now.

Then run that curl command again, then close and restart your terminal.

To install the latest LTS version (Long Term Stable):

nvm ls-remote

That will list all the available versions. You want the one labeled “Latest LTS: <name>”:

Setting Up a New MacBook for JavaScript Development

Then:

nvm install v12.16.1 # Replace v12.16.1 with your latest LTS

Note: You might be tempted to install the latest version of Node, but lots of packages don’t work with it, yet. Be careful on the bleeding edge.

Node comes with npm, but it’s unlikely to be the latest version. Let’s grab that while we’re at it:

npm install -g npm

Now you can install JavaScript modules.

Set Up Your GitHub Keys

Generate a new SSH key for GitHub access . SSH is a more secure and more convenient alternative to HTTPS access for cloning, pushing, and pulling from and to GitHub.

Set Up Your Prompt

Typically, if I’m using the terminal, it’s because I’m coding, so I like to use a command prompt that tells me about the current git status at a glance.

You can start by installing Oh My Zsh . Follow the instructions on the linked website. This is going to wipe out your nvm settings, but don’t worry. Scroll up and run that nvm installer script again, and you’re back in business.

Install a theme. There are precisely 179,769,313,486,231,570 themes listed indiscriminately. Let me save you some time. PowerLevel10k seems pretty good . It looks like this:

When you install it, it will ask you some questions. You may want to install the Power Level font, but it’s optional for this theme. I skipped it this time around, and check it out! No puppies were harmed. :dog::tada:

Install and Configure VS Code

Download VS Code from the official website. After you open the zip file, drag VS Code to your dock, though you’ll probably frequently open it by typing code . in your project directory from the terminal (at least, that’s what I do).

Enable the terminal code command: open VS Code and type CMD+SHIFT+P and type “shell command” and select “Install ‘code’ command in PATH”.

Setting Up a New MacBook for JavaScript Development
Extension Icon

Install the ESLint extension:Click the extension icon in the sidebar and click the green “Install” button next to ESLint.

Now you’ll want to set up VS Code to automatically fix anything it can automatically fix on file save.

Add this to your settings (Preferences -> Settings):

"editor.codeActionsOnSave": {
       "source.fixAll.eslint": true
}

I wrote another article about configuring ESLint and Prettier to work together on your projects. That needs to be configured for each project.

Install Homebrew

Time to install Homebrew . Once that’s done, grab some nice tools:

brew install graphviz
brew install wget

What’s that graphviz thing? It lets you generate graphics, of course! Check this out:

npm i -g dependency-cruiser

Now you can do stuff like this:

depcruise --exclude "^node_modules" --output-type dot src | dot -T svg > dependencygraph.svg

That will use graphviz to build a dependency graph of your project.

That’s probably too much detail for your project though. Here’s a command that will generate the dependency graph for just one view. I’m running it on the source for EricElliottJS.com :

depcruise --max-depth 2 --exclude "^(node_modules)" --output-type dot src/Components | dot -T svg > dependencygraph.svg

Which produces:

Setting Up a New MacBook for JavaScript Development

Dependency Graph for the Lesson Module for EricElliottJS.com

That’s it for now. You should be ready to rock!

Next Steps

Now that you’ve got your development environment all set up, head over to EricElliottJS.com and learn how to use it to make some magic.


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

金融计算与建模

金融计算与建模

朱世武 / 清华大学 / 2007-8 / 40.00元

《金融计算与建模:理论、算法与SAS程序》全书分为4大模块:1-9章为金融学基础指标计算模块;10-12章为股票定价模块;13-18章为风险度量模块;19-23章为固定收益定价模块。每一模块的内容一般由三部分组成:金融理论与模型、算法实现及计算程序。其中,算法实现与计算程序全部以中国金融市场的实际问题为应用背景而设计。《金融计算与建模:理论、算法与SAS程序》不仅展现了应用SAS软件的技术,同时也......一起来看看 《金融计算与建模》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具