[TypeScript] styled-components 사용 시 Unknown property: 'elevation' ts-styled-plugin(9999) 경고

 

 

Typescript 프로젝트에서 styled-components를 사용하여 elevation 속성을 사용할 때 노란 언더라인으로 아래 경고가 나타나는 것을 확인하였다. 프로젝트를 작동시키는데에는 문제가 없지만 파일명과 코드 상에 노란색으로 표시되는 것이 거슬리므로 제거해보도록 하자.

Unknown property: 'elevation' ts-styled-plugin(9999)

 

1. 라이브러리 설치

npm install -D @styled/typescript-styled-plugin

 

2. tsconfig.json 수정

compilerOptions > plugins 부분에 새로 추가한 라이브러리와 elevation 속성에 대한 내용을 추가해준다.

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "@styled/typescript-styled-plugin",
        "lint": {
          "validProperties": ["elevation"]
        }
      }
    ]
  }
}

 

3. Vscode 재시작

1번과 2번을 해줬음에도 불구하고 노란줄 경고가 남아있다면 Vscode를 재시작 해주자.

노란줄이 깔끔하게 제거된 것을 확인할 수 있다.