今日文章目录：

• 建立专案步骤
• 参考资源

刚刚发现昨天的文章打到一半就上传了？昨天脑子到底是多不好使，我还真不记得我只打了一半，其他的部分是在梦里完成的吗？？？
但今天也没好到哪去，我边吃月饼边纠结这10天要练习什麽东西，想个半天(对～又是当天才想)，决定还是做一个番茄钟时间管理(干！那麽没创意！这个有什麽好想的)，弄个Prettier + ESLint弄个半死，今天只有基础设定可以写了！等等还要回去补昨天的文章～

建立专案步骤

• 以下的步骤，我使用 VS Code编辑，并直接在VS Code的终端机下指令。
  

• 使用官网-create React app说明，但这里我统一使用 yarn 套件管理工具。

      yarn create react-app 我的专案名称
      yarn create react-app pomodoro-project
  

• 下指令将目前位置指向刚刚新建的专案，并执行 yarn start，程序会安装React的基础环境。
  浏览器会自动打开位置在http://localhost:3000/，画面显示Welcome to React，代表安装完成。

      cd pomodoro-project
      yarn start
  

• 我先到我的github新建Pomodoro-project专案，并复制该专案的位址，等等会串连本地端的React专案，之後作为备案资料纪录。

• 回到VS Code，在终端机下指令

      git init
      git add remote 自订远端名称 串接的github位址
      git add remote origin https://github.com/chen-chens/Pomodoro-project.git
  

• 来试试看能不能成功与github连接：执行以下指令，重新reload github，有看到资料就代表上传成功！

      git add .                              // 将刚刚异动的资料全部存档(local)
      git commit -m "init pomodoro-project"  // 纪录修改内容
      git push 刚刚自订的远端名称 哪一个分支 
      git push origin master                 // 将local资料更新至remote
      git status                             // 查看目前git 状态，可以在每次执行动作後确认
  

• 在专案中加入 Prettier + ESLint package (这里我还是有点模糊，附上我参考的教学文章)

  • Setting up ESLint(教学文有使用Typescript，这次专案不会用到)
  • Setting up Prettier(教学文有使用Typescript，这次专案不会用到)
  • ESLint官网规则
  • Prettier官网规则

参考资源：

在设定专案 Prettier + ESLint 的时候，我一直在想如果我在 VScode 已经有 Prettier + ESLint 外挂，为什麽还要在专案弄一遍？翻了一轮教学文章，总算找到两篇回覆：

• What is the difference between installing eslint as extension and installing as npm package?
• what is the difference between installing prettier as a NPM package and installing prettier extension in VS Code
  基本上在多人专案时，每个人习惯使用的IDE或coding style setting都不尽相同。
  为了确保该专案每个人使用(1) 一致的 coding style (2) 辅助工具 Prettier + ESLint 都在相同版本上，故专案开发会载入Prettier + ESLint package，如果有任何更新版本，只要下指令yarn install就可以让所有人都拿到同一个版本，可以有效维护专案统一性。

我在找到这两篇答案，心里的灯泡亮了!!