react project 초기설정하기

CRA로 프로젝트 환경을 구축하고 eslint 와 prettier ts 를 곁들일때 설정법을 기록했다.

설치 리스트

• npx create-react-app ./ --template typescript

• npm i react-router-dom

SASS/Styled-components

• npm i sass --save
• npm i styled-components

Prettier

• npm i prettier -D

ESLINT eslint는 CRA 에 내장되어있기에 prettier 플러그인만 설치

• npm i eslint-config-prettier eslint-plugin-prettier
• npm i -D eslint-plugin-react eslint-plugin-react-hooks
• 초기설정을 진행 해준다.
• npx eslint --init

.eslintrc

최상단에 .eslintrc를 만들고 작성한다

{
    "extends": ["react-app", "plugin:prettier/recommended"],
    "rules": {
        "no-var": "warn", // var 금지
        "no-multiple-empty-lines": "warn", // 여러 줄 공백 금지
        "no-nested-ternary": "warn", // 중첩 삼항 연산자 금지
        "no-console": "warn", // console.log() 금지
        "eqeqeq": "warn", // 일치 연산자 사용 필수
        "dot-notation": "warn", // 가능하다면 dot notation 사용
        "no-unused-vars": "warn", // 사용하지 않는 변수 금지
        "react/destructuring-assignment": "warn", // state, prop 등에 구조분해 할당 적용
        "react/jsx-pascal-case": "warn", // 컴포넌트 이름은 PascalCase로
        "react/no-direct-mutation-state": "warn", // state 직접 수정 금지
        "react/jsx-no-useless-fragment": "warn", // 
        "react/no-unused-state": "warn", // 
        "react/jsx-key": "warn", // 반복문으로 생성하는 요소에 key 강제
        "react/self-closing-comp": "warn", // 셀프 클로징 태그 가능하면 적용
        "react/jsx-curly-brace-presence": "warn", // jsx 내 불필요한 중괄호 금지
        "prettier/prettier": [
            "error",
            {
                "endOfLine": "auto"
            }
        ] // cr 에러 맥북과 병행하니 설정해둔다.
    }
}

.prettierrc

역시 최상단에 생성, 작성

{
  "printWidth": 80,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "semi": true,
  "useTabs": true,
  "arrowParens": "avoid",
  "endOfLine": "lf"
}

윈도우 VSCode settings.json

vscode 사용시 필요한 settings.json 을 추가해준다.

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "javascript.format.enable": false,
  "eslint.alwaysShowStatus": true,
  "files.autoSave": "onFocusChange"
}

.gitignore 파일 설정

기본적으로 웹스톰과 병행 사용하니,

/node_moudles
/.vscode
/.idea
.eslintcache

작성한다

typescript 관련 설정

• 이미 진행된 작업에서 타입스크립트를 추가시 라이브러리를 설치해준다

// npm i @types/react @types/react-dom @types/node --save-dev //

*tsconfig.json 설정도 해준다

{
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "baseUrl": "./src",
    "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"
  ],
}
  // src 절대경로  설정 

ts 를 gh pages 에 업로드하기

npm i gh-pages --save

npm i @type/react --save

html parsed error

• html 에서 parsing error expression expected html 뜰경우,

//eslint.rc
{
    "plugins": [
        "html"
    ]
}

추가한다