[新手筆記] Next.js (React) + VSCode @ windows7 64bit安裝筆記

1. 下載並安裝Nodejs (如果Reactjs要用NPM 還是裝一個比較方便)

2. 下載安裝VSCode、並建立專案資料夾 e.g., vassistant (VSCode開啟該資料夾會當目錄)

3. 開啟VSCode選擇專案目錄後，安裝VSCode extensions

• ESLint
• JavaScript (ES6) code snippets
• JavaScript Standard Style
• npm
• npm intellisense
• Path intellisense
• React Native Tools
• React-Native / React / Redux snippets for es6/es7
• Search node modules

4. Package.json 設定

npm init
... 輸入相關資訊 ...

npm install standard --save-dev 
採用javascript的CodingStyle, 記得重新開啟編輯器

安裝Next.js 2.0與React.js套件
npm install next@beta react react-dom --save

因為Next.js 已經有套好一些Script 在 Package.json裡的Script改成

  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }

5. VSCode 自己的設定值 (檔案 → 喜好設定 → 設定):

{
    "window.zoomLevel": 1,
    "editor.tabSize": 2,
    "editor.wordWrap": "off",
    "editor.wordWrapColumn": 80,
    "editor.rulers": [80],
    "javascript.validate.enable": false,
    "eslint.autoFixOnSave": true,
    "files.insertFinalNewline": true,
    "html.format.endWithNewline": true,
    "standard.autoFixOnSave": true
}

6. 在根目錄新增 pages 資料夾
7. 在pages/ 下新增 index.js
8. 在index.js 輸入

1 2 3

export default () => ( <div>Welcome to next.js!</div> )

9. 在Command line輸入:  

npm run dev

看是不是有Build成功
10. 打開 localhost:3000 , 看內容是否有出現 Welcome to next.js 就OK~ 
Ref: https://github.com/zeit/next.js/