CRA 안쓰는 리액트 프로젝트 eslint, prettier 설정

설정하기 전 사전 작업

• VSCode 에서 eslint, prettier extension을 설치한다.
• npm i -D prettier
• npm i -D eslint
• npm i -D eslint-config-prettier
• npm i -D eslint-config-airbnb
• npm i -D eslint-plugin-import
• npm i -D eslint-plugin-jsx-a11y
• npm i -D eslint-plugin-react
• npm i -D eslint-plugin-react-hooks

참고로 eslint-config-airbnb, eslint-plugin-import, eslint plugin-jsx-a11y, eslint-plugin-react, eslint-plugin-react-hooks는

npx install-peerdeps --dev eslint-config-airbnb 명령어를 이용하면 한번에 설치 가능하다.

prettier 설정

.prettierrc.json 파일을 생성하고 원하는 설정을 적는다.

{
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "useTabs": false,
  "printWidth": 120
}

eslint와 prettier 연동 설정

.eslintrc.js 파일을 생성하고 다음과 같이 설정한다.

module.exports = {
  extends: ['prettier'],
};

eslint에 airbnb estends 추가

module.exports = {
  extends: ['airbnb', 'prettier'],
};

여기까지 하고나면 jsx 파일의 상태가 다음과 같을 것이다.

설정 커스터마이징

현재 빨간줄이 뜨는 이유는 eslint rule이 너무 엄격하기 때문이다. 따라서 너무 불편하거나 불필요한 코드스타일은 제외시키도록 하겠다.

module.exports = {
  extends: ['airbnb', 'prettier'],
  rules: {
    'react/prefer-stateless-function': 0,
    'react/jsx-filename-extension': 0,
    'react/jsx-one-expression-per-line': 0,
  },
  env: {
    browser: true,
  },
};

App 클래스를 아직 사용하지 않았기 때문에 빨간줄이 그어졌고 그 외에 모든 오류가 사라졌다!

참고한 곳
리액트 프로젝트에 eslint와 prettier 끼얹기