본문 바로가기

WebStorm에서 TypeScript 설정 및 개발 환경 구축 가이드

((!#) 2024. 7. 24.

webstorm typescript 설정
webstorm typescript 설정

WebStorm에서 TypeScript 설정 및 개발 환경 구축 가이드

WebStorm TypeScript 설정은 TypeScript 개발을 보다 효율적으로 할 수 있도록 도와줍니다. 이 글에서는 typescript 개발 환경 구축, intellij typescript 설정, webstorm tsconfig json 설정법, webstorm prettier 설정, typescript 환경 변수 설정, webstorm typescript debug, 그리고 typescript types 폴더에 대해 자세히 알아보겠습니다.

https://youtu.be/0f6UMaxLGvU?si=ebVJBOxGwTxrnxCP

1. WebStorm에서 TypeScript 설정하기

WebStorm에서 TypeScript를 설정하는 방법을 단계별로 알아보겠습니다.

1.1 TypeScript 설치 및 설정

먼저, TypeScript를 설치합니다. 프로젝트 디렉토리에서 다음 명령어를 실행하여 TypeScript를 설치합니다:

npm install --save-dev typescript

그런 다음, WebStorm에서 TypeScript를 설정합니다:

  1. **Preferences**로 이동합니다 (Mac: `Cmd + ,`, Windows/Linux: `Ctrl + Alt + S`).
  2. **Languages & Frameworks** > **TypeScript**를 선택합니다.
  3. **TypeScript** 패키지 경로를 설정합니다 (프로젝트 디렉토리의 node_modules 경로).

2. tsconfig.json 설정

반응형

webstorm tsconfig json 파일은 TypeScript 컴파일러 옵션을 설정하는 데 사용됩니다. tsconfig.json 파일을 생성하고 다음과 같이 설정할 수 있습니다:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

위의 설정은 TypeScript 프로젝트의 기본적인 컴파일러 옵션을 설정한 예시입니다.

3. Prettier와 ESLint 설정

WebStorm에서 Prettier와 ESLint를 설정하여 코드 스타일을 유지하고 린팅을 적용할 수 있습니다. 이 부분은 이 링크에서 자세히 설명하고 있습니다.

3.1 Prettier 설정

Prettier를 설치하고 설정하려면 다음 단계를 따릅니다:

npm install --save-dev prettier
  1. **Preferences**로 이동합니다.
  2. **Languages & Frameworks** > **JavaScript** > **Prettier**를 선택합니다.
  3. **Prettier Package** 경로를 설정합니다.
  4. **On save** 옵션을 활성화하여 저장 시 자동으로 Prettier가 적용되도록 설정합니다.

3.2 ESLint 설정

ESLint를 설치하고 설정하려면 다음 단계를 따릅니다:

npm install --save-dev eslint

그런 다음, ESLint 초기화를 위해 다음 명령어를 실행합니다:

npx eslint --init
  1. **Preferences**로 이동합니다.
  2. **Languages & Frameworks** > **JavaScript** > **Code Quality Tools** > **ESLint**를 선택합니다.
  3. **Automatic ESLint configuration**을 선택하거나, **Configuration File** 경로를 설정합니다.

4. TypeScript 환경 변수 설정

typescript 환경 변수는 TypeScript 프로젝트의 환경을 설정하는 데 사용됩니다. 환경 변수는 `.env` 파일을 사용하여 설정할 수 있습니다.

TS_NODE_PROJECT=tsconfig.json
NODE_ENV=development

위의 예시는 TypeScript 프로젝트의 환경 변수를 설정한 예시입니다.

5. WebStorm에서 TypeScript 디버깅

WebStorm에서 TypeScript를 디버깅하려면 다음 단계를 따릅니다:

  1. **Run/Debug Configuration**을 설정합니다.
  2. **Node.js** 설정을 선택하고, **JavaScript file**에 진입점을 설정합니다.
  3. **Run** 버튼을 클릭하여 디버깅을 시작합니다.

WebStorm의 디버깅 도구를 사용하면 TypeScript 코드를 효율적으로 디버깅할 수 있습니다.

6. TypeScript Types 폴더

typescript types 폴더는 프로젝트에서 사용하는 타입 정의 파일을 저장하는 폴더입니다. 타입 정의 파일은 `.d.ts` 확장자를 가지며, 프로젝트의 타입 안전성을 높이는 데 사용됩니다.

6.1 Types 폴더 설정

Types 폴더를 설정하려면, `tsconfig.json` 파일에 다음과 같이 추가합니다:

{
  "compilerOptions": {
    "typeRoots": ["./node_modules/@types", "./types"]
  }
}

위의 설정은 프로젝트의 타입 정의 파일을 `types` 폴더에 저장하도록 설정한 예시입니다.

FAQ

Q1: WebStorm에서 TypeScript 설정을 어떻게 하나요?

A1: WebStorm 설정에서 **Languages & Frameworks** > **TypeScript**를 선택하고, TypeScript 패키지 경로를 설정하면 됩니다.

Q2: tsconfig.json 파일은 어떻게 설정하나요?

A2: tsconfig.json 파일을 생성하고, TypeScript 컴파일러 옵션을 설정하면 됩니다. 예시는 본문에 나와 있습니다.

Q3: WebStorm에서 Prettier와 ESLint를 어떻게 설정하나요?

A3: Prettier와 ESLint를 설치한 후, WebStorm 설정에서 각각의 패키지 경로를 설정하고, On save 옵션을 활성화하면 됩니다.

Q4: TypeScript 환경 변수를 어떻게 설정하나요?

A4: .env 파일을 생성하고, 환경 변수를 설정하면 됩니다. 예시는 본문에 나와 있습니다.

Q5: WebStorm에서 TypeScript 디버깅을 어떻게 하나요?

A5: Run/Debug Configuration을 설정하고, Node.js 설정에서 진입점을 설정한 후, Run 버튼을 클릭하여 디버깅을 시작하면 됩니다.

입력한 본문 내용을 사용해서 SEO에 최적화된 새로운 블로그 게시물 작성을 완료하였습니다.

댓글