[eslint-*] v2

.changeset/cg-eslint-config.md

@@ -0,0 +1,13 @@
+---
+"@naverpay/eslint-config": major
+---
+
+- Support ESLint 9 and Flat Config
+- **Config Changes**:
+  - Renamed `front` to `react`
+  - Removed `typescript/next` config
+  - Added `strict` config that extends `unicorn` and `sonarjs`
+  - Added YAML lint in `node` and `react` configs
+  - Disallowed unused imports in `node` and `react` configs
+  - Enforced consistent usage of type imports in `typescript` and `react` configs
+- <https://github.com/NaverPayDev/code-style/pull/74>

.changeset/cg-eslint-plugin.md

@@ -0,0 +1,6 @@
+---
+"@naverpay/eslint-plugin": major
+---
+
+- Support ESLint 9 and Flat Config
+- <https://github.com/NaverPayDev/code-style/pull/74>

.github/workflows/add-assignee.yml

@@ -1,36 +1,35 @@
 name: 'add assignee to pull request automatically'
 on:
-  pull_request:
-    types: [ opened, ready_for_review, synchronize, reopened ]
-    branches:
-      - '**'
-      - '!main'
+    pull_request:
+        types: [opened, ready_for_review, synchronize, reopened]
+        branches:
+            - '**'
+            - '!main'
 jobs:
-  ADD_ASSIGNEE_TO_PULL_REQUEST:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Add Assignee to pr
-        uses: actions/github-script@v3
-        with:
-          script: |
-                    try {
-                        const result = await github.pulls.get({
-                            owner: context.repo.owner,
-                            repo: context.repo.repo,
-                            pull_number: context.payload.number,
-                        })
+    ADD_ASSIGNEE_TO_PULL_REQUEST:
+        runs-on: ubuntu-latest
+        steps:
+            - name: Add Assignee to pr
+              uses: actions/github-script@v3
+              with:
+                  script: |
+                      try {
+                          const result = await github.pulls.get({
+                              owner: context.repo.owner,
+                              repo: context.repo.repo,
+                              pull_number: context.payload.number,
+                          })
 
-                        console.log(result)
-
-                        if (result.data.assignee === null) {
-                            await github.issues.addAssignees({
-                                owner: context.repo.owner,
-                                repo: context.repo.repo,
-                                issue_number: context.issue.number,
-                                assignees: context.actor,
-                            })
-                        }
-                    } catch (err) {
-                        console.error(`Check Pull Request Error ${err}`)
-                    }
+                          console.log(result)
 
+                          if (result.data.assignee === null) {
+                              await github.issues.addAssignees({
+                                  owner: context.repo.owner,
+                                  repo: context.repo.repo,
+                                  issue_number: context.issue.number,
+                                  assignees: context.actor,
+                              })
+                          }
+                      } catch (err) {
+                          console.error(`Check Pull Request Error ${err}`)
+                      }

.github/workflows/changeset-publish.yml

@@ -1,9 +1,9 @@
 name: changeset-publish
 
 on:
-  push:
-    branches:
-      - main
+    push:
+        branches:
+            - main
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}
 

.github/workflows/changesets-detect-add.yml

@@ -3,7 +3,7 @@ on:
     pull_request:
         branches:
             - '**'
-        types: [opened, reopened, synchronize]
+        types: [opened, reopened, synchronize, labeled, unlabeled]
 
 jobs:
     detect-add:

.gitignore

@@ -1,6 +1,5 @@
 # etc
 .idea
-.vscode
 
 # Dependency directories
 node_modules/

.npmignore

@@ -1,3 +1,2 @@
 .github
-.changeset
-.husky
+.changeset

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+    "recommendations": [
+        "esbenp.prettier-vscode",
+        "dbaeumer.vscode-eslint",
+        "editorconfig.editorconfig",
+        "DavidAnson.vscode-markdownlint"
+    ]
+}

.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": "explicit",
+        "source.fixAll.markdownlint": "explicit"
+    },
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true,
+    "typescript.tsdk": "node_modules/typescript/lib",
+    "typescript.preferences.importModuleSpecifier": "non-relative"
+}

eslint.config.mjs

@@ -0,0 +1,8 @@
+import naverpay from '@naverpay/eslint-config'
+
+export default [
+    {
+        ignores: ['**/dist/**'],
+    },
+    ...naverpay.configs.node,
+]

lefthook.yml

@@ -0,0 +1,23 @@
+# Configure lefthook
+# @see https://github.com/evilmartians/lefthook/blob/master/docs/configuration.md
+
+# Note: commit-msg hook takes a single parameter,
+#       the name of the file that holds the proposed commit log message.
+# @see https://github.com/evilmartians/lefthook/blob/master/docs/configuration.md#git-arguments
+commit-msg:
+    commands:
+        commit-helper:
+            run: 'npx --yes @naverpay/commit-helper {1}'
+
+pre-commit:
+    parallel: true
+    commands:
+        lint:
+            glob: '*.{js,cjs,mjs,jsx,ts,cts,mts,tsx,yaml,yml}'
+            run: pnpm eslint {staged_files}
+        prettier:
+            glob: '*.{js,cjs,mjs,jsx,ts,cts,mts,tsx,json,yaml,yml}'
+            run: pnpm prettier --check {staged_files}
+        markdownlit:
+            glob: '*.md'
+            run: pnpm markdownlint {staged_files}

package.json

@@ -8,35 +8,29 @@
     },
     "description": "code-style for naverpay",
     "scripts": {
-        "prepare": "husky install",
-        "lint": "eslint '**/*.{js,jsx,ts,tsx}'",
-        "lint:fix": "pnpm run lint --fix",
-        "prettier": "prettier --check '**/*.{json,yaml,md,ts,tsx,js,jsx}'",
-        "prettier:fix": "prettier --write '**/*.{json,yaml,md,ts,tsx,js,jsx}'",
+        "postinstall": "lefthook install",
+        "build": "turbo build",
+        "prelint": "pnpm run build",
+        "lint": "eslint",
+        "lint:fix": "eslint --fix",
+        "prettier": "prettier --check '**/*.{json,yaml,yml,md,ts,tsx,js,jsx}'",
+        "prettier:fix": "prettier --write '**/*.{json,yaml,yml,md,ts,tsx,js,jsx}'",
         "markdownlint": "markdownlint '**/*.md' '#.changeset' '#**/CHANGELOG.md'",
         "markdownlint:fix": "markdownlint --fix '**/*.md' '#.changeset' '#**/CHANGELOG.md'",
-        "test": "turbo run test",
-        "release": "changeset publish"
-    },
-    "lint-staged": {
-        "**/*.{json,yaml,md,ts,tsx,js,jsx}": "prettier --check",
-        "**/*.{ts,tsx,js,jsx}": "eslint",
-        "**/*.{css,scss}": "stylelint"
+        "test": "turbo test",
+        "test:watch": "turbo test:watch",
+        "release": "pnpm build && changeset publish",
+        "release:canary": "pnpm build && changeset publish --tag canary"
     },
     "devDependencies": {
-        "@babel/preset-react": "^7.24.7",
         "@changesets/cli": "^2.26.2",
         "@naverpay/eslint-config": "workspace:*",
-        "@naverpay/eslint-plugin": "workspace:*",
         "@naverpay/markdown-lint": "workspace:*",
         "@naverpay/prettier-config": "workspace:*",
         "@naverpay/stylelint-config": "workspace:*",
-        "glob": "^9.3.4",
-        "husky": "^8.0.3",
-        "jest": "^29.5.0",
-        "lint-staged": "^15.0.1",
+        "lefthook": "^1.9.3",
         "prettier": "^3.2.5",
-        "turbo": "^1.10.16",
+        "turbo": "^2.3.3",
         "typescript": "^5.2.2"
     },
     "packageManager": "pnpm@9.1.3",

packages/editorconfig/package.json

@@ -3,8 +3,6 @@
     "version": "0.0.4",
     "description": "editorconfig for naverpay",
     "scripts": {
-        "version": "pnpm version",
-        "deploy": "pnpm publish",
         "postinstall": "node index.js"
     },
     "author": "@NaverPayDev/frontend",

packages/eslint-config/README.md

@@ -2,30 +2,33 @@
 
 네이버페이 스타일 가이드에 맞게 lint rule을 커스텀하여 제공합니다.
 
-## 설치 방법
+## 사용 방법
 
 ```bash
 npm install @naverpay/eslint-config -D
 ```
 
-## 사용 방법
+프로젝트 환경에 알맞는 config를 import해 사용합니다.
 
-프로젝트 환경에 알맞는 config를 extend 합니다.
+- `node` - JS로 작성된 node 환경에서 사용
+- `typescript` - TS로 작성된 환경에서 사용  
+    [Note: `@typescript-eslint` 룰 중 일부는 `yaml`룰과 충돌할 수 있으니 유의하시기 바랍니다.](https://github.com/NaverPayDev/code-style/commit/948890376bb250d975e50d5f82e418a3eb50bb7c#diff-d6e0200228324b775c1bd5390161c9d64f8a4581b542d5e93463abe457cd73caR6-R15)
+- `react` - TS로 작성된 react17+ 환경에서 사용
+- `strict` - 보다 엄격한 룰을 원하는 환경에서 위 config와 함께 사용
 
-- **@naverpay/eslint-config/front**
-  - JS로 작성된 react17+ 환경에서 사용합니다.
-- **@naverpay/eslint-config/node**
-  - JS로 작성된 node 환경에서 사용합니다.
-- **@naverpay/eslint-config/typescript**
-  - TS로 작성된 react17+ 환경에서 사용합니다.
-- **@naverpay/eslint-config/typescript/next**
-  - TS로 작성된 Next12+ 환경에서 사용합니다.
+예시 `eslint.config.js`
 
-```jsonc
-// .eslintrc
-{
-    "extends": ["@naverpay/eslint-config/typescript"]
-}
+```js
+import naverpay from '@naverpay/eslint-config'
+
+export default [
+    {
+        ignores: ['**/dist/**'],
+    },
+    ...naverpay.configs.node,
+    ...naverpay.configs.typescript,
+    ...naverpay.configs.strict,
+]
 ```
 
 ## CLI
@@ -36,13 +39,13 @@ package.json에 스크립트를 추가하여 lint 검사를 할 수 있습니다
 // package.json
 {
     "scripts": {
-        "lint": "eslint '**/*.{js,jsx,ts,tsx}'",
-        "lint:fix": "eslint '**/*.{js,jsx,ts,tsx}' --fix",
+        "lint": "eslint '**/*.{js,jsx,ts,tsx,yaml,yml}'",
+        "lint:fix": "eslint '**/*.{js,jsx,ts,tsx,yaml,yml}' --fix",
     }
 }
 ```
 
-> [husky](https://github.com/typicode/husky) & [lint-staged](https://github.com/lint-staged/lint-staged)를 사용해서 commit 또는 push 전에 스타일 확인을 자동화할 것을 권장합니다.
+> [lefthook](https://github.com/evilmartians/lefthook)을 사용해서 commit 또는 push 전에 스타일 확인을 자동화할 것을 권장합니다.
 
 ## Integrating with IDE
 
@@ -64,6 +67,16 @@ package.json에 스크립트를 추가하여 lint 검사를 할 수 있습니다
 }
 ```
 
+#### Typescript
+
+만약 typescript 를 사용 중이라면 아래의 설정을 활성화해주세요.
+
+```json
+{
+    "typescript.preferences.preferTypeOnlyAutoImports": true
+}
+```
+
 ### WebStorm
 
 Settings > Language > JavaScript > Code Quality > ESLint > Automatic ESLint configuration 을 설정합니다.

packages/eslint-config/custom/index.js

@@ -1,4 +1,6 @@
-const importOrder = ({ruleSeverities = 'error', pathGroups = []} = {}) => [
+import {commonBaseRules, commonExcludes} from './typescript/naming-convention.js'
+
+export const importOrder = ({ruleSeverities = 'error', pathGroups = []} = {}) => [
     ruleSeverities,
     {
         groups: ['builtin', 'external', 'internal', ['parent', 'sibling'], 'index', 'type'], //  그룹간 require/import 순서
@@ -24,8 +26,7 @@ const importOrder = ({ruleSeverities = 'error', pathGroups = []} = {}) => [
     },
 ]
 
-const {commonBaseRules, commonExcludes} = require('./typescript/naming-convention')
-const typescriptNamingConvention = ({
+export const typescriptNamingConvention = ({
     ruleSeverities = 'warn',
     customRules = [],
     baseRules = commonBaseRules,
@@ -52,8 +53,3 @@ const typescriptNamingConvention = ({
 
     return [ruleSeverities, ...rules]
 }
-
-module.exports = {
-    importOrder,
-    typescriptNamingConvention,
-}

packages/eslint-config/custom/typescript/naming-convention.js

@@ -1,5 +1,6 @@
-const commonExcludes = ['_*', '__html', 'Component']
-const commonBaseRules = [
+export const commonExcludes = ['_*', '__html', 'Component']
+
+export const commonBaseRules = [
     {
         selector: 'default',
         format: ['camelCase'],
@@ -66,8 +67,3 @@ const commonBaseRules = [
         modifiers: ['requiresQuotes'],
     },
 ]
-
-module.exports = {
-    commonExcludes,
-    commonBaseRules,
-}