react와 next.js(SSR FrameWork)의 조합이 현재 기업협업 중인 기업에서 요구하는 환경이었다.
기존에 팀 프로젝트 하듯이 esLint와 prettier를 설정하니 적용이 안된다.
미래의 나에게 도움이 될 수 있고, 또 다른 누군가에게 도움이 될 수 있겠다 싶어 글로 작성하려 한다.
VSCode Extensions에서 설치해야 하는데 VSCode에서 왼쪽에 보면 Bug같이 생긴 아이콘 밑에 4개의 정사각형으로
보이는 아이콘이 있다.
바로 이 아이콘이 Extensions이다.
그럼 Extensions에서 esLint와 prettier를 검색해서 설치하자.
esLint의 규칙 중 가장 많이 쓰이는 airbnb를 적용하자.
yarn add -D eslint-config-airbnb
하지만 위의 방법은 CRA(create-react-app)로 프로젝트를 만들었을 때 사용 가능하고 next.JS로 프로젝트를 만든 지금은 몇가지 패키지들을 직접 설치해야 한다.
npx install-peerdeps —dev eslint-config-airbnb 명령어로 설치하면 된다.
package.josn 파일을 보면 eslint와 관련된 부분을 확인할 수 있는데 root 경로에 eslintrc.js 파일을 만들어 eslintrc.js로 빼줬다.
“extends”: [‘react-app’]이 기본으로 되어있고, 여기서 “airbnb”를 추가해준다. “extends”: [‘react-app’, ‘airbnb’]
airbnb 규칙을 꽤 까다롭기 때문에 코딩을 하다보면 빨간 줄이 많이 생길텐데 필요없는 규칙이라고 생각 할 경우에는 eslintrc.js 파일에서 rules에 규칙을 넣고 값을 0으로 해주면 된다. (값이 1이면 ON, 0이면 OFF)
prettierrc.js 파일도 root 경로에 만들어서
module.exports = {
singleQuote: true,
semi: true,
useTabs: false,
tabWidth: 2,
trailingComma: "all",
printWidth: 80
};이렇게 설정 해주자.
prettier는 Extensions에서 설치할 수 도 있고(위에서 한 방법), npm을 통해서 설치 할 수도 있다.
VSCode Settings에서 format javascript를 체크 해제하고 Format On Save에서 체크를 활성화 해준다.
Extensions에서 설치하면 npm으로 따로 설치할 필요는 없다는데..
CRA에서는 잘 적용됬는데 next.js에서는 적용이 안되서 npm으로도 설치를 했다.
eslint는 적용됬는데 prettier가 안먹히는것 같다.
구글링해서 새로운 방법으로 적용해봤다.
먼저 yarn으로 eslint-config-prettier, eslint-plugin-prettier를 설치한다.
eslintrc.js 파일에서 extends를 [“eslint:recommended”, “plugin:react/recommended”, “plugin:prettier/recommended”]로 바꾸니 적용이 된다.
요약해보자면
CRA로 프로젝트를 만들었을 때 하던 방법으로 next.js 프로젝트에서 그대로 사용하니 eslint는 적용되지만 prettier는 적용이 안된다.
그래서 next.js에서 prettier를 적용할 다른 방법을 구글 검색으로 통해 알아냈다.
새로운 방법을 적용하니 된다.
먼저 VSCode Extensions에서 ESLint와 Prettier를 다 설치한다.
npx install-peerdeps —dev eslint-config-airbnb 명령어로 eslint의 규칙 중 airbnb를 적용할 패키지 등을 설치한다.
eslintrc.js 파일을 root 경로에 생성한다.
module.exports = {
extends: ["airbnb"],
env: {
browser: true
},
parser: "babel-eslint",
rules: {
indent: 0,
"no-tabs": 0,
"eol-last": ["error", "always"],
"no-underscore-dangle": 0,
"react/jsx-indent": 0,
"react/jsx-indent-props": 0,
"react/jsx-filename-extension": 0,
"react/forbid-prop-types": 0,
"react/require-default-props": 0
}
};위 설정 코드를 eslintrc.js에 작성한다.
extends에는 react-app, react 등 다른 것들도 사용할 수 있다.
prettierrc.js 파일을 root 경로에 생성한다.
module.exports = {
singleQuote: true,
semi: true,
useTabs: false,
tabWidth: 2,
trailingComma: "all",
printWidth: 80
};위 설정 코드를 prettierrc.js에 작성한다.
yarn으로 eslint-config-prettier, eslint-plugin-prettier를 설치한다.
eslintrc.js 파일에서 extends를 [“airbnb”, “eslint:recommended”, “plugin:react/recommended”, “plugin:prettier/recommended”]로 변경한다.
VSCode Settings에서 format javascript를 체크 해제하고 Format On Save에서 체크를 활성화 해준다.
추가 글
yarn add eslint-config-prettier eslint-plugin-prettier
yarn add babel-eslint
yarn add prettier
yarn add eslint-plugin-babel
위 4가지 설치하기