近況報告
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 の設定をいじっていてふと「設定いじり、盆栽と同じようなものなのかもなぁ」と思うなど
— Shinya Kato (@0x19f) 2021年4月24日
盆栽はやったことないけどね
環境構築と盆栽って似てるよね
盆栽と何が同じ?
- 流行り廃りがある
- 決まった型がある
- マメに世話をしないとダメになる
流行り廃りがある
- 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
近況報告と eslint について
- 179