Nodejs

#やること
1. aptでnodeとnpmをインストール
2. npmをアップデートしてからyarnをインストール
3. yarnでnをインストールして最新のnodejsをインストール
4. yarnでプラグインをインストール

#開発環境
Linux

# npm,yarn,n,typescript インストール
```
sudo apt install nodejs npm yarn && sudo npm install -U npm && sudo npm install -g n && sudo n stable
```

# yarn globalのパスを通す

```bash:.rc
export PATH="$(yarn global bin):$PATH"
```

# プロジェクトディレクトリに移動

## Step1. yarn init

```
yarn init
```

####yarnのチートシート
https://qiita.com/morrr/items/558bf64cd619ebdacd3d

## Step2. 開発用のプラグインとしてインストール
インストールする前にまず `--save-dev` or `--dev/-D`とは何かを予習復習。

>これらは開発用の依存関係です。開発ワークフローのどこかで必要で、コードの実行時には必要のない依存関係です（例：Babel もしくは Flow）。
https://legacy.yarnpkg.com/ja/docs/dependency-types#toc-devdependencies

####すべてインストール
```
yarn add -D eslint prettier eslint-config-prettier eslint-plugin-prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin react eslint-plugin-react
```

####別々にインストール
```:elsintとprittierインストール
yarn add -D eslint prettier eslint-config-prettier eslint-plugin-prettier
```

```:typescript用プラグイン
yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin 
```

```:その他プラグイン
yarn add react && yarn add -D eslint-plugin-react
```

##Step3. eslintrcを作成
まずここを読め！
ESLint公式 https://eslint.org/docs/user-guide/configuring

#### JS　用
```json-doc.eslintrc.json
{
  "extends": [
    "eslint:recommended", 
    "plugin:prettier/recommended"
  ],
  "plugins":[],
  "parserOptions":[],
  "env": {
    "node": true,
    "browser": true,
    "es6": true
  },
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "singleQuote": true,
        "trailingComma": "es5"
      }
    ]
  },
}
```

#### TS　用

```json-doc:.eslintrc.json
{
  "env": {
    "node" : true,
    "browser": true,
    "es6": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "plugins": [
    "react",
    "@typescript-eslint",
    "prettier"],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "singleQuote": true,
        "trailingComma": "es5"
      }
    ]
  },
  "parser": "@typescript-eslint/parser"
}
```

#VSCODE

##tsconfig.json

```terminal
tsc --init
```

これ忘れるとエラーが出まくるので注意。


##settings.json

まずここを読む！
**prettier-vscode** https://github.com/prettier/prettier-vscode


```json-doc:settings.json
{
  // -------------------------------------
  // javascript
  // -------------------------------------
  "[javascript]": {
    "editor.formatOnSave": false,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2,
    "editor.codeActionsOnSave":{
      "source.fixAll.eslint": true,
    }
  },

  // -------------------------------------
  // typescript
  // -------------------------------------
  "[typescript]": {
    "editor.formatOnSave": false,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },

  // -------------------------------------
  // pretteir 
  // -------------------------------------
  "prettier.singleQuote": true,
  "prettier.printWidth": 80,

  // -------------------------------------
  // ESLint 
  // -------------------------------------
  "eslint.enable": true,
  "eslint.packageManager":"yarn",

  //// -------------------------------------
  //// format
  //// -------------------------------------
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true, // 言語ごとに設定する
  "editor.formatOnPaste": false,
}
```