CRA / Typescript / eslint / prettier 셋팅하기

노성호·2021년 5월 2일
2

react

목록 보기
1/12

cra, typescript, eslint, prettire

CRA: create-react-app
typescript: javascript의 슈퍼셋 언어
eslint: 타입스크립트의 문법 에러를 잡아주는 패키지
prettire: 에디터 코드 스타일 잡아주는 패키지

왜?

까먹을까봐 남겨둔다.
React + Typescript eslint, prettier설정
여기를 많이 참고했다. 감사합니다.

설치

npx create-react-app my-app --template typescript

필요한 플러그인

yarn add -D eslint prettier
yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser
yarn add -D eslint-config-airbnb
yarn add -D eslint-config-prettier eslint-plugin-prettier
yarn add -D eslint-plugin-react eslint-plugin-react-hooks
yarn add -D eslint-plugin-jsx-a11y eslint-plugin-import

.eslintrc.js

/**
module.exports에 빨간줄이 생기는 부분은 env의 es2021: true를 commonjs: true로 바꿔서 해결했다.
자동생성된 eslint의 코드가 module.exports로 생성되어 그런듯 하다. 
*/
module.exports = {
  env: {
    browser: true,
    commonjs: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2018,
    sourceType: 'module',
	},
  plugins: ['react', '@typescript-eslint'],
  rules: {
    /** 함수의 명시적 타입 리턴을 명시적으로 써주지 않아도 되도록 하는 옵션. 이건 off 하는게 맞을까? */
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    'prettier/prettier': 'error',
  },
};

extends의 포맷팅 옵션은 뒤로 갈수록 우선순위가 높아진다. 주의해서 작성해야 한다.
yarn eslint --init 를 이용해 eslintrc를 셋팅 후 필요한 부분을 수정했다. 깜박했는데, yarn eslint --init을 eslintrc 파일을 만들기 전에 해줘야 하는 것 같다. init으로 설정하면 기존의 파일을 덮어쓰기 때문에 기껏 만들어놓은 설정을 다 지워버린다. 일단 init으로 만들고 위 설정으로 적당히 고쳐쓰면 된다. 아직 모든 옵션을 제대로 아는것이 아니라서 일단 위의 설정만 사용하고 있는데, 나중에 eslint 설정을 더 공부해서 내게 맞는 방법을 찾아야겠다.

.prettierrc.js

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

몇 번의 시도끝에 간신히 성공. 잊어버릴까 성의없는 글이지만 남겨둔다.

1개의 댓글

comment-user-thumbnail
2021년 7월 27일

감사합니다 덕분에 잘 되는군요!!!

답글 달기