从零开始配置基本的前端开发环境（windows）-CSDN博客

从零开始配置基本的前端开发环境（windows）

换了台新电脑，除了安装一些常用软件和游戏之外，下一步就是准备开（装）发（逼）环境了。这里只介绍最基础的前端环境+工具配置。

包含: node.js+nvm，VS code（Visual Studio Code）

node.js + nvm

node对前端的重要性不言而喻，基本上只装一个node其实也够用，但难免也会有需要切换版本的时候，总不能每次都要覆盖安装吧，所以就需要一个来控制node版本的工具啦，这里我选择了nvm。

先装nvm

地址在这里：github.com/coreybutler…

点击 nvm-noinstall.zip 就好，我下时最新版本是1.1.7，你可以选择最新版本的。

下载完后解压到一个已存在的目录（自己建个C:\node_nvm\nvm）下，然后运行 install.cmd，会弹出命令行 Enter the absolute path where the zip file is extracted/copied to: ，让你输入刚才你解压的路径（C:\node_nvm\nvm），如果不填直接回车，他会在C盘根目录下创建一个名为：settings.txt 的文件，然后你再把这个文件放到刚才的目录就好。最后把 settings.txt 的内容改为
```
root: C:\node_nvm\nvm
path: C:\node_nvm\nodejs
arch: 64
proxy: none
复制代码
```
tips: 如果你无法科学上网的话最好选择使用淘宝镜像，不然使用npm的时候会很难受（别问我为什么知道，不过还是推荐科学上网！）。在上面的内容中增加如下两条
```
node_mirror: http://npm.taobao.org/mirrors/node/ 
npm_mirror: https://npm.taobao.org/mirrors/npm/
复制代码
```
nvm最后一步：配置环境变量。

按照上面的步骤安装完后会生成两个环境变量：NVM_HOME 和 NVM_SYMLINK，两个变量的值分别为：C:\node_nvm\nvm， C:\node_nvm\nodejs 。然后在path中添加这两个环境变量，如果是win10，选中path编辑，新增两个：%NVM_HOME%，NVM_SYMLINK；不是win10的话，在path的末尾加上：;%NVM_HOME%;%NVM_SYMLINK%;，注意分号不要漏了呦。

这里还是要注意，不能投机只在path里直接添加 C:\node_nvm\nvm， C:\node_nvm\nodejs，一定要通过 NVM_HOME 和 NVM_SYMLINK 这两个变量来设置

好了，来检验最终成果吧！

nvm v来查看下nvm的版本信息。
安装node.js

nvm install latest 安装最新版本

nvm install 11.0.0 安装指定版本

nvm use 11.0.0 使用指定版本

nvm ls 查看已有的node版本

来看一下安装成功没有，node -v

VS code（Visual Studio Code）

曾经我是个sublime粉（现在也是），直到我遇到了vscode，相比sublime，vscode不用折腾太多，主要是安装扩展比较方便（装多了用起来可能会比较卡。

安装

这个真的还用说吗？

算了，还是甩个链接吧(′д｀ )…彡…彡点我
扩展程序推荐

Sublime Text Keymap and Settings Importer

对于像在下一样从sublime转过来的coder来说，用惯了原来的快捷键肯定难以适应新的快捷。那么，你需要他。

GitLens

神器不解释，多人协作开发利器！某行代码看不懂了，还不知道谁写的？队友甩锅？那么，你需要他。

ESint

这个没什么好解释的。

Bracket Pair Colorizer

还在为层层嵌套的括号烦恼？那么，你需要他。

JS JSX Snippets

如果你跟我一样是个React使用者，那么，你需要他。

change-case

工作中需要更改变量的命名方式？栗子?：change-case 改为 changeCase，或者CHANGE_CASE。如果在以前我肯定会默默删掉重写，不仅工作量大而且容易拼错。现在有了这个插件，选中目标（可以按住ctrl或command多选），按下ctrl+shift+P（command+shift+P），然后选择需要的命名方式，常用的有：camel（驼峰），lower（转小写），upper（转大写），constant（常量，就是全大写，单词间用_分割，?：CHANGE_CASE）。如果你有类似需求，那么，你需要他。