从零开始配置基本的前端开发环境(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
)。如果你有类似需求,那么,你需要他。