欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

从零开始配置基本的前端开发环境(windows)

程序员文章站 2022-04-22 08:01:35
...

从零开始配置基本的前端开发环境(windows)

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

包含: node.js+nvm,VS code(Visual Studio Code)

node.js + nvm

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

  1. 先装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_HOMENVM_SYMLINK,两个变量的值分别为:C:\node_nvm\nvmC:\node_nvm\nodejs 。然后在path中添加这两个环境变量,如果是win10,选中path编辑,新增两个:%NVM_HOME%NVM_SYMLINK;不是win10的话,在path的末尾加上:;%NVM_HOME%;%NVM_SYMLINK%;,注意分号不要漏了呦。

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

    好了,来检验最终成果吧!

    nvm v来查看下nvm的版本信息。

  2. 安装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不用折腾太多,主要是安装扩展比较方便(装多了用起来可能会比较卡。

  1. 安装

    这个真的还用说吗?

    算了,还是甩个链接吧(′д` )…彡…彡 点我

  2. 扩展程序推荐

    Sublime Text Keymap and Settings Importer

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

    GitLens

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

    ESint

    这个没什么好解释的。

    Bracket Pair Colorizer

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

    JS JSX Snippets

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

    change-case

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