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
/**
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 설정을 더 공부해서 내게 맞는 방법을 찾아야겠다.
{
"singleQuote": true,
"semi": true,
"useTabs": true,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 120,
"arrowParens": "always"
}
몇 번의 시도끝에 간신히 성공. 잊어버릴까 성의없는 글이지만 남겨둔다.
감사합니다 덕분에 잘 되는군요!!!