近況報告

2022/02/04

去年から関わっていた
プロジェクト

  • Market, X1 (Go, Kotlin)
  • Xevo Ads (Nuxt.js v2, TypeScript, vuex, eslint, prettier)
  • LBS Server (Nodejs, TypeScript, eslint, prettier)
  • DCAPP 2.1
    • Native (React Native, TypeScript, eslint, prettier)
    • UI (React, Redux, TypeScript, eslint, prettier)
  • Fleet (Next.js, TypeScript, recoil, Tailwind CSS, eslint, prettier)

去年から関わっていた
プロジェクト

  • Market, X1 (Go, Kotlin)
  • Xevo Ads (Nuxt.js v2, TypeScript, vuex, eslint, prettier)
  • LBS Server (Nodejs, TypeScript, eslint, prettier)
  • DCAPP 2.1
    • Native (React Native, TypeScript, eslint, prettier)
    • UI (React, Redux, TypeScript, eslint, prettier)
  • Fleet (Next.js, TypeScript, recoil, Tailwind CSS, eslint, prettier)

環境構築職人してました

しかし、この作業何かに似てる？

盆栽はやったことないけどね

環境構築と盆栽って似てるよね

盆栽と何が同じ？

  • 流行り廃りがある
  • 決まった型がある
  • マメに世話をしないとダメになる

流行り廃りがある

  • eslint 自体の更新
version published
v8.8.0 2022/01/29
​v8.7.0 2022/01/16
v8.6.0 2022/01/01
v8.5.0 2022/12/18
v8.4.1 2021/12/07
v8.4.0 2021/12/04
v8.3.0 2021/11/21
v8.2.0 2021/11/06
v8.1.0 2021/10/23
v8.0.1 2021/10/14
v8.0.0 2021/10/10
v7.32.0 2021/07/31

流行り廃りがある

  • eslint 自体の更新
  • TypeScript の更新
version published
v4.5.0 2021/11/18
​v4.4.2 2021/08/27
v4.3.2 2021/05/27
v4.2.0 2021/02/26
v4.1.2 2020/11/20

流行り廃りがある

  • eslint 自体の更新
  • TypeScript の更新
  • prettier の設定方法が変わったり

決まった型がある

  • `recommended` な設定
{
  "root": true,
  "extends": [
    "eslint:recommended",
  ],
  "plugins": [],
}

決まった型がある

  • `recommended` な設定
  • browser 向けか nodejs 向けかの設定
{
  "root": true,
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": [
    "eslint:recommended"
  ],
  "plugins": [],
}

決まった型がある

  • `recommended` な設定
  • browser 向けか nodejs 向けかの設定
  • TypeScript のための設定
{
  "root": true,
  "env": {
    "browser": true,
    "es6": true
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking"
  ],
  "plugins": ["@typescript-eslint", "import", "unused-imports"],
}

決まった型がある

  • `recommended` な設定
  • browser 向けか nodejs 向けかの設定
  • TypeScript のための設定
  • React や Vue を使う時には plugin を追加
{
  "root": true,
  "env": {
    "browser": true,
    "es6": true
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "extends": [
    "next/core-web-vitals",
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking"
  ],
  "plugins": ["@typescript-eslint", "import", "unused-imports"],
}

決まった型がある

  • `recommended` な設定
  • browser 向けか nodejs 向けかの設定
  • TypeScript のための設定
  • React や Vue を使う時には plugin を追加
  • prettier や Tailwind を使う時も plugin を追加
{
  "root": true,
  "env": {
    "browser": true,
    "es6": true
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "extends": [
    "next/core-web-vitals",
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "plugin:tailwindcss/recommended",
    "prettier"
  ],
  "plugins": ["@typescript-eslint", "import", "unused-imports", "tailwindcss"],
}

マメに世話をしないとダメになる

  • `recommended`の中にも不要な項目があったり
{
  "root": true,
  "env": {
    "browser": true,
    "es6": true
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "extends": [
    "next/core-web-vitals",
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "plugin:tailwindcss/recommended",
    "prettier"
  ],
  "plugins": ["@typescript-eslint", "import", "unused-imports", "tailwindcss"],
  "rules": {
    "sort-imports": "off"
  }
}

マメに世話をしないとダメになる

  • `recommended`の中にも不要な項目があったり
  • `recommended`に入ってない有用な項目があったり
{
  "root": true,
  "env": {
    "browser": true,
    "es6": true
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "extends": [
    "next/core-web-vitals",
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "plugin:tailwindcss/recommended",
    "prettier"
  ],
  "plugins": ["@typescript-eslint", "import", "unused-imports", "tailwindcss"],
  "rules": {
    "no-console": "warn",
    "no-var": "error",
    "eqeqeq": "error",
    "prefer-const": "error",
    "sort-imports": "off",
    "no-unused-vars": "warn"
  }
}

マメに世話をしないとダメになる

  • `recommended`の中にも不要な項目があったり
  • `recommended`に入ってない有用な項目があったり
  • 項目によっては微調整が必要だったり
{
  "root": true,
  "env": {
    "browser": true,
    "es6": true
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "extends": [
    "next/core-web-vitals",
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "plugin:tailwindcss/recommended",
    "prettier"
  ],
  "plugins": ["@typescript-eslint", "import", "unused-imports", "tailwindcss"],
  "rules": {
    "no-console": "warn",
    "no-var": "error",
    "eqeqeq": ["error", "always", {"null": "ignore"}],
    "prefer-const": "error",
    "sort-imports": "off",
    "no-unused-vars": "warn",
    "import/order": ["error", {"alphabetize": {"order": "asc", "caseInsensitive": true}}],
    "unused-imports/no-unused-imports": "error"
  }
}

マメに世話をしないとダメになる

  • `recommended`の中にも不要な項目があったり
  • `recommended`に入ってない有用な項目があったり
  • 項目によっては微調整が必要だったり
  • さらに plugin 毎に調整が必要
{
  "root": true,
  "env": {
    "browser": true,
    "es6": true
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "extends": [
    "next/core-web-vitals",
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "plugin:tailwindcss/recommended",
    "prettier"
  ],
  "plugins": ["@typescript-eslint", "import", "unused-imports", "tailwindcss"],
  "rules": {
    "no-console": "warn",
    "no-var": "error",
    "eqeqeq": ["error", "always", {"null": "ignore"}],
    "prefer-const": "error",
    "sort-imports": "off",
    "no-unused-vars": "warn",
    "import/order": ["error", {"alphabetize": {"order": "asc", "caseInsensitive": true}}],
    "unused-imports/no-unused-imports": "error",
    "react/no-array-index-key": "error",
    "react/jsx-no-useless-fragment": "error",
    "react/jsx-pascal-case": "error",
    "@typescript-eslint/consistent-type-exports": "error",
    "@typescript-eslint/consistent-type-imports": "error",
    "@typescript-eslint/no-unnecessary-boolean-literal-compare": "error",
    "@typescript-eslint/no-unnecessary-condition": ["error", {"allowConstantLoopConditions": true}],
    "@typescript-eslint/prefer-for-of": "error",
    "@typescript-eslint/prefer-function-type": "error",
    "@typescript-eslint/prefer-includes": "error",
    "@typescript-eslint/prefer-nullish-coalescing": "error",
    "@typescript-eslint/prefer-optional-chain": "error",
    "@typescript-eslint/prefer-string-starts-ends-with": "error",
    "tailwindcss/classnames-order": "warn",
    "tailwindcss/no-custom-classname": "warn",
    "tailwindcss/no-contradicting-classname": "error"
  }
}

参考資料：設定項目数

name recommended all
eslint 61 263
typescript-eslint 41 120
eslint-plugin-react 24 96
eslint-plugin-react-hooks 2 2
eslint-plugin-react-native 6 7
eslint-pugin-vue 80 170
eslint-plubin-tailwindcss 6 7

近況報告と eslint について

By Hiroki Horiuchi

Made with Slides.com

近況報告と eslint について

  • 178

More from Hiroki Horiuchi