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のパスを通す

.rc

export PATH="$(yarn global bin):$PATH"

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

Step1. yarn init

yarn init

yarnのチートシート

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　用

.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

tsc --init

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

settings.json

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

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,
}