chore: eslint & typescript 세팅

.eslintrc.js

@@ -1,70 +1,68 @@
 module.exports = {
+  root: true,
   env: {
-    browser: true,
     es6: true,
+    browser: true,
     jest: true,
   },
+  ignorePatterns: [
+    'build/',
+    'node_modules/',
+    '.pnp.cjs',
+    '.pnp.loader.cjs',
+    'public/',
+  ],
   extends: [
-    'plugin:react/recommended',
     'airbnb',
+    'eslint:recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:jsx-a11y/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react/recommended',
+  ],
+  plugins: [
+    // set your plugins
   ],
-  globals: {
-    Atomics: 'readonly',
-    SharedArrayBuffer: 'readonly',
-    context: 'readonly',
-    Feature: 'readonly',
-    Scenario: 'readonly',
-    actor: 'readonly',
-    given: 'readonly',
-  },
   parserOptions: {
     ecmaFeatures: {
       jsx: true,
     },
-    ecmaVersion: 11,
+    ecmaVersion: 12,
     sourceType: 'module',
   },
   overrides: [
     {
+      files: ['*.ts', '*.tsx'],
       extends: [
-        'plugin:cypress/recommended',
+        'airbnb-typescript',
+        'plugin:@typescript-eslint/recommended',
       ],
-      files: [
-        'cypress/**/*.js',
+      plugins: [
+        '@typescript-eslint',
       ],
-      rules: {},
+      rules: {
+        // set your typescript rules
+      },
+      parser: '@typescript-eslint/parser',
+      parserOptions: {
+        project: ['./tsconfig.json'],
+      },
+    },
+    {
+      files: ['src/hooks/**/**/*.test.ts?(x)'],
+      rules: {
+        'react-hooks/rules-of-hooks': 'off',
+      },
+    },
+    {
+      files: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
+      extends: ['plugin:testing-library/react', 'plugin:jest/recommended'],
+      rules: {
+        // set your test eslint rules
+      },
     },
   ],
-  plugins: [
-    'react',
-  ],
-  ignorePatterns: ['build/', 'node_modules/'],
   rules: {
-    indent: ['error', 2],
-    'no-trailing-spaces': 'error',
-    curly: 'error',
-    'brace-style': 'error',
-    'no-multi-spaces': 'error',
-    'space-infix-ops': 'error',
-    'space-unary-ops': 'error',
-    'no-whitespace-before-property': 'error',
-    'func-call-spacing': 'error',
-    'space-before-blocks': 'error',
-    'keyword-spacing': ['error', { before: true, after: true }],
-    'comma-spacing': ['error', { before: false, after: true }],
-    'comma-style': ['error', 'last'],
-    'comma-dangle': ['error', 'always-multiline'],
-    'space-in-parens': ['error', 'never'],
-    'block-spacing': 'error',
-    'array-bracket-spacing': ['error', 'never'],
-    'object-curly-spacing': ['error', 'always'],
-    'key-spacing': ['error', { mode: 'strict' }],
-    'arrow-spacing': ['error', { before: true, after: true }],
-    'jsx-a11y/label-has-associated-control': ['error', { assert: 'either' }],
-    'react/prop-types': 'off',
-    'linebreak-style': 'off',
-    'no-proto': 'off',
-    'no-underscore-dangle': ['error', { allow: ['_id'] }],
-    camelcase: ['error', { allow: ['snapshot_UNSTABLE', 'access_token', 'drop_console'] }],
+    // set your rules
   },
 };

.yarnrc.yml

@@ -2,6 +2,8 @@ compressionLevel: mixed
 
 enableGlobalCache: false
 
+defaultSemverRangePrefix: ""
+
 nodeLinker: node-modules
 
 yarnPath: .yarn/releases/yarn-4.0.2.cjs

package.json

@@ -58,6 +58,8 @@
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.3",
     "@types/jest": "^26.0.20",
+    "@typescript-eslint/eslint-plugin": "5.51.0",
+    "@typescript-eslint/parser": "5.51.0",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.2",
     "clean-webpack-plugin": "^3.0.0",
@@ -67,13 +69,19 @@
     "cypress": "^8.5.0",
     "dotenv": "^8.2.0",
     "dotenv-webpack": "^6.0.0",
-    "eslint": "^7.19.0",
-    "eslint-config-airbnb": "^18.2.1",
+    "eslint": "8.29.0",
+    "eslint-config-airbnb": "19.0.4",
+    "eslint-config-airbnb-typescript": "17.0.0",
+    "eslint-import-resolver-alias": "1.1.2",
+    "eslint-import-resolver-typescript": "3.5.3",
     "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.22.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-jest": "27.2.1",
+    "eslint-plugin-jsx-a11y": "6.7.1",
+    "eslint-plugin-react": "7.32.2",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-testing-library": "5.10.1",
+    "eslint-plugin-unused-imports": "2.0.0",
     "gh-pages": "^3.1.0",
     "given2": "^2.1.7",
     "html-webpack-plugin": "^4.5.1",
@@ -86,6 +94,7 @@
     "start-server-and-test": "^1.14.0",
     "style-loader": "^2.0.0",
     "terser-webpack-plugin": "^4.2.3",
+    "typescript": "4.7.4",
     "url-loader": "^4.1.1",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",

src/App.jsx

@@ -49,7 +49,7 @@ const TodoContentWrapper = styled.div`
   box-shadow: ${({ theme }) => theme.boxShadow};
 `;
 
-const App = () => {
+function App() {
   const user = loadItem('user');
 
   const checkUser = useCheckCallback();
@@ -83,6 +83,6 @@ const App = () => {
       </AppBlock>
     </ThemeProvider>
   );
-};
+}
 
 export default App;

src/App.test.jsx

@@ -247,7 +247,7 @@ describe('App', () => {
         loadItem.mockImplementation(() => user);
       });
 
-      it('It has the user session value, so the Sign out button is visible.', async () => {
+      it('has the user session value, so the Sign out button is visible.', async () => {
         mockGetApi({ data: { user: 'test' } });
         let response;
 

tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "incremental": true,
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "baseUrl": "."
+  },
+  "include": ["src"],
+  "exclude": ["**/*.cy.ts"]
+}