0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Nodejs

Last updated at Posted at 2019-12-14

#やること

  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のチートシート
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 用

.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,
}
0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?