[React] Ts+eslint+prettier 기초셋팅설정

https://velog.io/@qhgus/React-ESLint-Prettier-Typescript-%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0

React + ESLint + Prettier + Typescript 세팅하기

 

이거 블로그 보고 일단 

ts+eslint+prettier설정했다

---

1. 일단 확장프로그램 설치

2.

npm install eslint prettier --save-dev

3.

 npm install @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev

이거 했는데 에러가 났다. 버전 문제인것 같았다.

 

4. 그래서 이걸로 다시 설치했다.

npm install eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks --save-dev

5. 파일만들어서 셋팅

// .eslintrc.json

{
    "parser": "@typescript-eslint/parser",
    "extends": ["plugin:@typescript-eslint/recommended", "plugin:prettier/recommended"],
    "plugins": ["@typescript-eslint", "prettier"],
    "ignorePatterns": ["node_modules/"],
    "env": {
        "browser": true,
        "node": true
    },
    "rules": { "@typescript-eslint/explicit-module-boundary-types": "off" }
}

 

// .prettierrc.json

{
	"singleQuote": true,
	"semi": true,
	"useTabs": false,
	"tabWidth": 4,
	"trailingComma": "all",
	"printWidth": 200,
	"endOfLine": "auto",
	"arrowParens": "avoid"
}

6.

설정 들어가서 

Format On Save 

파일 저장시 서식을 지정합니다 부분 동의하기.

---

그리고 router 설치하고 

 

styled component설치는 

npm install --save styled-components

npm install @types/styled-components

이걸 하고서 globalstyled할거여서 

 

https://velog.io/@xmun74/Next.js-TS%EC%97%90%EC%84%9C-ESLint-Prettier-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0

Next.js + TS에서 ESLint, Prettier 설정하기 (+ styled-components, airbnb, husky, lint-staged)

여기 블로그에 나와있는대로 

 

npm i styled-reset

이것도 했다.

 

---

여기까지 일단 이상무 !!!