외곈 World 👽🌏

프로젝트 환경설정

🍀 ES Lint / Prettier 설정

1. eslint, prettier 패키지 설치
   • yarn add -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-react eslint-config-react-app
2. Config 설정 분리
   • package.json의 "eslintConfig”부분을 별도의 .eslintrc.json파일로 분리 후 추가 설정 작성
     

     //.eslintrc.json
     
     {
         "extends": [
             "react-app",
             "react-app/jest",
             "plugin:prettier/recommended"
         ],
         "plugins":["prettier"],
         "rules":{
             "prettier/prettier":"error"
         }
     }
     ​

   • .prettierrc 파일 생성
     

     //prettierrc 
     
     {
         "useTabs": false,
         "printWidth": 80,
         "tabWidth": 2,
         "singleQuote": true,
         "trailingComma": "all",
         "endOfLine": "lf",  // 파일의 줄 끝(Line Ending) 형식을 지정
         "semi": false,
         "arrowParens": "always"
         }
     ​

3. setting.json 파일에 아래 코드 추가
   • Ctrl + Shift + P를 눌러 명령 팔레트를 열기 → "Preferences: Open Settings (JSON)"을 입력하고 선택

     // 수정 후 저장할 때 eslint로 autofix 실행
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": "true"
     },
     // 파일의 줄 끝(Line Ending) 형식을 지정. 앞으로 생성되는 파일들은 lf(mac)로 생성됨
     "files.eol":"\\n",
   

   ✅ 파일의 줄 끝 형식 :: mac vs window
   "files.eol": "\n": 파일의 줄 끝을 유닉스/리눅스 스타일인 LF (Line Feed) 형식으로 지정
   "files.eol": "\r\n" : 파일의 줄 끝을 Windows 시스템의 기본 형식인 CRLF 형식으로 지정
   
   
4. vscode에 적용
   

   yarn dlx @yarnpkg/sdks vscode
   

5. prettier에서 세미콜론 제거 설정했기 때문에 package.json에 아래 코드 추가
   

   //package.json
       "lint": "eslint \\"src/**/*/{js,jsx,ts,tsx}\\"",
       "lint:fix": "eslint \\"src/**/*/{js,jsx,ts,tsx}\\""
   
   

   • 적용

   yarn lint:fix
   

6. Craco Alias 설정
   • 설치
     

     yarn add -D @craco/craco craco-alias

   • tsconfig.paths.json 정의
     

     // tsconfig.paths.json
     {
         "compilerOptions":{
             "baseUrl":".",
             "paths":{
                 "@/*": ["src/*"],
                 "@components/*":["src/components/*"]
             }
         }
     }

   • craco.config.js 정의
     

     // craco.config.js
     module.exports = {
       plugins: [
         {
           plugin: CracoAlias,
           options: {
             source: 'tsconfig',
             tsConfigPath: 'tsconfig.paths.json',
           },
         },
       ],
     }

   • Tsconfig에 tsconfig.paths.json extends 시키기
     

     // tsconfig.json
     {
       "extends": "./tsconfig.paths.json",
       "compilerOptions": {
         "target": "es5",
         "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,
         "noEmit": true,
         "jsx": "react-jsx"
       },
       "include": ["src", "tsconfig.paths.json"]
     }
     
     ​

🍀 scss 설정

yarn add classnames sass

• global.scss 생성
• App.module.scss 생성
• src\App.tsx

import classNames from 'classnames/bind'
import styles from './App.module.scss'

const cx = classNames.bind(styles)

//    <div className={cx('container')}> 이런식으로 사용!