從零開始配置基本的前端開發環境（windows）

leonsux發表於2018-12-08
前端開發環境Windows

從零開始配置基本的前端開發環境（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，你可以選擇最新版本的。

    從零開始配置基本的前端開發環境（windows）

    下載完後解壓到一個已存在的目錄（自己建個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的版本資訊。

    從零開始配置基本的前端開發環境（windows）

  2. 安裝node.js

    nvm install latest 安裝最新版本

    nvm install 11.0.0 安裝指定版本

    nvm use 11.0.0 使用指定版本

    nvm ls 檢視已有的node版本

    來看一下安裝成功沒有，node -v

    從零開始配置基本的前端開發環境（windows）

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。如果在以前我肯定會默默刪掉重寫，不僅工作量大而且容易拼錯。現在有了這個外掛，選中目標（可以按住ctrl或command多選），按下ctrl+shift+P（command+shift+P），然後選擇需要的命名方式，常用的有：camel（駝峰），lower（轉小寫），upper（轉大寫），constant（常量，就是全大寫，單詞間用_分割，?：CHANGE_CASE）。如果你有類似需求，那麼，你需要他。

相關文章