kinanson的技術回憶

前言

其實已經想要研究node.js很多時間了，雖然最近node.js有點飽受批評，但是其簡單和生態系夠完整，想要實做某些功能都很快，而要做大型專案的話我已經有C#的基礎了，所以基於自己有javascript的基礎，就想來嘗試一下node.js的世界，而每次研究都是斷斷續續的，一段時間沒回來就又忘記了，這次如果稍稍有花一點時間研究的，就來寫個文章記錄一下

安裝相關package

我們需要安裝一系列的package，因為筆者是使用vs code來開發，所以配合ide的工具來安裝相對應必要工具，以下則是我為了eslint而安裝的清單

npm i eslint eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard --D

我安裝的是standard的style，這個style是基於 JavaScript Standard Style 為出發的 coding style，有另一套更為知名是(https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb)，青菜蘿菠各有所好。

另一種安裝eslint的方式

其實我們有另一種方式來自動安裝相關eslint style的package，就是安裝install-peerdeps，首先安裝為全局，方便在command line可以下指令

npm install -g install-peerdeps

安裝完成之後，如果我要安裝standard風格的，只要打上如下指令就會自行安裝相關的package

 install-peerdeps eslint-config-standard --dev

配置eslint相關檔案

首先加入我們要忽略檢查的目錄，檔名為.eslintignore，裡面輸入要排除的資料夾

bin/*.js

接著新增一支為.eslintrc.js，裡面配置挺多的，最基本的我們至少要指定extends

module.exports = {
  extends: 'standard'
}

那eslint裡面有多少種設定呢?其實非常的多，可以直接參考(http://eslint.cn/docs/user-guide/configuring)，在此我特別記錄一下我比較常看到的設定

module.exports = {
  root: true, //設為根層，不會再往上尋找
  parser: 'esprima', //預設為esprima，你可以指定為babel(babel-eslint)
  parserOptions: {
    sourceType: 'module' //如果你有es6模塊的話，就設為module
  },
  env: {
    browser: true, //啟用環境為browser和node js
    node: true
  },
  extends: 'standard',
  'rules': { //設定規則0為關閉，1為警告，2直接出錯，也可用英文設定off or warn or error
    'arrow-parens': 0,
  }
}

為express加上babel

習慣寫es6語法了，不能用import就是覺得有點怪和不習慣，那我就開始為express加上babel吧，首先一樣下載相關的package

npm i babel babel-cli babel-eslint babel-preset-es2015 babel-preset-stage-2 babel-register --D

記得.eslintrc.js要加上parser

parser: 'babel-eslint'

接著新增.babelrc

{
  "presets": ["es2015", "stage-2"],
  "plugins": []
}

最後在原本的package json的加上一個run dev改成如下，順便一提我是使用nodemon

"dev": "nodemon ./bin/www --exec babel-node --presets es2015,stage-2"