blog 만들기 - husky v7, lint-staged, eslint, prettier

//package.json
{
  "name": "polz-blog",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    ...,
    "lint": "npx eslint \"**/*.{ts,tsx}\"",
    "lint:fix": "eslint --fix \"**/*.{ts,tsx}\"",
    "lint-staged": "lint-staged",
    "prepare": "husky install"
  },
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
    "@typescript-eslint/eslint-plugin": "^5.19.0",
    "@typescript-eslint/parser": "^5.19.0",
    "eslint": "^8.2.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^8.5.0",
    "eslint-import-resolver-typescript": "^2.7.1",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.28.0",
    "eslint-plugin-react-hooks": "^4.3.0",
    "husky": "^7.0.0",
    "lint-staged": "^12.3.7",
    "prettier": "^2.6.2",
  	...
  },
  "lint-staged": {
    "*.{ts,tsx,js,jsx}": [
      "npm run lint:fix"
    ]
  }
}

//.husky/pre-commit
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm run lint-staged

husky init

husky install

//tsconfig.json
{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": false,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"], // 사용할 경로
    },
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

//.eslintrc.js
module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "plugin:react/recommended",
        "airbnb",
        'prettier'
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint",
        "prettier"
    ],
    "rules": {
        /*tsx에서 jsx 문법을 가능하게 해준다*/
        "react/jsx-filename-extension":["warn",{"extensions":[".tsx"]} ],
        /*ts tsx 확장자를 안써도 되게해준다. 해당파일이름의 ts|tsx파일을 찾아 자동 import한다*/
        "import/extensions":[
            "error",
            "ignorePackages",
            {
              "ts":"never",
              "tsx":"never"
            }
        ],
         'prettier/prettier': 'error',
    },
    /*tsconfig 설정을 가져온다*/
    "settings":{
        "import/resolver":{
          "typescript":{}
        }
      }
}