게시 됨 업데이트 됨typescript2분안에 읽기 (약 226 단어)

tsconfig baseUrl eslint

tsconfig에 baseUrl을 ./src로 설정했다
그런데 eslint가 못 알아먹는다
알아먹도록 해보자

상황

  • 타입스크립트 프로젝트에서 npx eslint --init을 통해 eslint 환경을 구성했다
  • 그런데 tsconfig에 설정한 baseUrl을 eslint가 알아먹지 못했다

eslint-import-resolver-typescript 설치

terminal
1
yarn add -D eslint-import-resolver-typescript

eslintrc 수정

.eslintrc.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  // ...
  "parserOptions": {
    // ...
    "project": "./tsconfig.json"
  },
  // ...
  // https://github.com/import-js/eslint-plugin-import/issues/1485#issuecomment-535351922
  "settings": {
    "import/resolver": {
      "typescript": {}
    }
  }
}
  • parserOptions.project와 settings.import/resolver.typescript에 위 내용처럼 추가한다
  • eslint config를 수정하면 항상 ESLint: Restart ESLint Server 또는 Developer: Reload Window을 꼭 해주자

참고

 게시 됨 업데이트 됨react3분안에 읽기 (약 385 단어)

Cannot use JSX unless the '--jsx' flag is provided.ts(17004)

  • react typescript에서 tsconfig가 계속 자동수정되는 문제 해결하기
오류 메시지 모음
1
2
3
4
5
6
Cannot use JSX unless the '--jsx' flag is provided.ts(17004)

Specify JSX code generation: 'preserve', 'react', 'react-jsx', 'react-jsxdev' or'react-native'. Requires TypeScript version 2.2 or later.

The following changes are being made to your tsconfig.json file:
  - compilerOptions.jsx must be react-jsx (to support the new JSX transform in React 17)

  • .ts, .tsx 확장자의 아무 파일이나 열고,
  • F1 > TypeScript 검색
  • TypeScript: Select TypeScript Version... 선택
  • 주의 : (타입스크립트 관련 파일이여야 위 명령이 검색된다)

  • Use Workspace Version 을 선택해준다.
.vscode/settings.json
1
2
3
4
{
  // (...)
  "typescript.tsdk": "node_modules\\typescript\\lib"
}
  • .vscode/settings.json 가보면 이렇게 업데이트 된것을 확인할 수 있다

TMI

상황

  • react typescript eslint airbnb rule 로 개발하는데
  • yarn start로 시작을 하면 자동으로 tsconfig.json의
  • compilerOptions > jsx 가 자동으로 “react-jsx”로 업데이트 됬다
  • 그런데 나는 “react-jsx”일 때 빨간줄이 마구 그어졌다
  • 그래서 yarn start 이후에 수동으로 “react”로 변경해 주었었다…

해결

  • 워크스페이스의 typescript가 사용되지 않아서 발생한 문제였다
  • compilerOptions > jsx 가 “react-jsx” 여도 빨간줄이 안생긴다!

참고

 게시 됨 업데이트 됨typescript몇 초안에 읽기 (약 63 단어)

typescript json import

tsconfig.json
1
2
3
4
5
6
{
  "compilerOptions": {
    // (...)
    "resolveJsonModule": true
  }
}
  • tsconfig.json 의 compilerOptions 부분에 resolveJsonModule를 추가한다
ex.ts
1
import myJsonData from './myJson.json';
  • 이런식으로 가져다 쓸 수 있다

참고

카테고리

아카이브

광고

×