ESLint 및 Prettier를 사용하여 Visual Studio 코드에 TypeScript 설정

그래, 만약 네가 무심결에 이 글을 발견한다면, 아마도 너는 가능한 한 빨리, 간단하게 이 정보를 얻고 싶을 것이다.
나는 가능한 한 간단명료하게 할 것이지만, 우리는 한 걸음 한 걸음 모든 일을 완성할 것이다.
오늘 우리가 할 일을 간단히 소개해 드리겠습니다.

TypeScript 4는 JavaScript의 발전으로 엄격한 유형(그리고 더 많이!)을 가져왔다.JavaScript 언어로 이동합니다.만약 당신이 더 많은 것을 알고 싶다면, 나는 TypeScript를 소개하는 전체 문장을 가지고 있다.

ESLint는 코드 라이브러리의 오류를 검색하고 실행할 때 복구할 수 있는 도구입니다. ("linting"이라고도 부릅니다.)

Prettier는 코드를 포맷하여 더욱 아름답게 보일 수 있는 코드 포맷 프로그램입니다. (그래서 이름을 얻었습니다!)

영상 좋아하세요?

시작하기 전에 다음 단계를 포함하는 비디오를 녹화했습니다.
이 영상은 내 유튜브 채널에서 무료로 볼 수 있는 완전 무료 16부작 시리즈의 일부다.

잠깐만, 왜 이 안내서가 이렇게 길어?!

이 도구들을 신속하게 시작하고 실행할 수 있는 다른 방법도 있다. 예를 들어 실행 npx 명령을 실행하고 모든 도구를 미리 설치할 수 있다.
다음은 내가 생각하기에 네가 아래의 (더 긴) 지침을 따라야 하는 이유이다.

완전히 투명한 설치 내용, 한 걸음 한 걸음 (여분의 라이브러리나 팽창 없음)

만약 이 도구들 중 어느 것이 실패하면

한 걸음 한 걸음 모든 것을 설치하면 특정한 버그를 디버깅하기 쉽다

단일 도구에 대해 더 깊이 있게 이해하면 앞으로 어떤 도구의 행위도 쉽게 확장하거나 변경할 수 있습니다!

그냥 비밀번호?

그럼에도 불구하고, 만약 당신이 신속하게 시작하고 실행하고 싶다면, 나는 이 안내서에 기술된 모든 내용을 포함하는git 환매 프로토콜을 작성했습니다.판매right here.
만약 쓸모가 있다면, 나는 한 스타에게 감사할 것이다!✨
아직도 여기 있어요?그래!계속 공연!

타자 스크립트 설치

첫 번째 단계: 프로젝트의 루트 디렉터리로 사용할 새 폴더를 만듭니다.명령줄에서 다음 명령my-new-project을 입력하여 프로젝트 이름으로 바꿉니다.

mkdir my-new-project

두 번째 단계: 다음에 우리는 실을 사용하여 프로젝트를 설치해야 한다.이를 위해서는 새로 만든 폴더를 입력하고 프로젝트를 초기화해야 합니다.

cd my-new-project
yarn init

이것은 프로젝트에 대한 모든 정보를 입력할 수 있는 일련의 상호작용 절차를 제공할 것이다.
특정 문제가 있으면 모든 문제의 값을 입력하거나 Enter 키를 눌러 각 문제의 기본값(각 문제 뒤에 있는 괄호)을 사용합니다.
유일하게 주의해야 할 것은 입구점 - 입력./build/index.js이 index.js만이 아니라는 것을 확보하는 것이다.나는 본문 뒤에서 원인을 강조할 것이다.

3단계: 네, 이제 프로젝트를 초기화했습니다. TypeScript를 프로젝트에 계속 설치합시다.
같은 명령줄my-new-project 디렉토리로 이동)을 사용하여 다음 명령을 입력합니다.

yarn add typescript --dev

이렇게 하면 TypeScriptdevDependencies가 추가됩니다.dependencies와 devDependencies의 차이에 대한 더 많은 정보는 기사 한 편right here을 보실 수 있습니다.
4단계: 설치 후 TypeScript에서 사용할 프로파일을 직접 만들어야 합니다.
생성하려면 다음 명령을 입력합니다.

touch ./tsconfig.json

5단계: TypeScript 파일을 저장할 폴더를 만들고 index.ts 파일을 만들어 시작합니다.명령줄로 돌아가서 다음을 입력합니다.

mkdir ./src
touch ./src/index.ts

좋습니다. 현재 프로젝트 디렉터리에 src 라는 폴더를 만들고 index.ts 라는 파일을 만들었습니다.
6단계: 이제 VScode를 사용하여 새로 만든 tsconfig.json 파일을 열어야 합니다.
TypeScript 구성은 사용자가 추가하고 확장할 수 있도록 가장 간단한 설정을 사용하여 설정합니다.아래 설정을 복사하고 붙여넣을 수 있습니다. (주석을 삭제할 수 있습니다. 주석은 필요하지 않습니다. 줄마다 기능을 알 수 있도록 하기 위해서입니다.)

{
    "compilerOptions": {
        "rootDir": "./src", // The entry point for all of our TypeScript files (make sure all .ts files are stored in a subdirectory of this!)
        "outDir": "./build", // The directory which we'll be exporting our compiled JavaScript files to
        "lib": ["ESNext", "DOM"], // The libraries we wish to use in TS (ESNext being the latest version of JavaScript, and DOM being JavaScript DOM libraries - like console.log)
        "strict": true // Stipulating we want strict mode on. I personally would recommend this to get the most out of TS - another great article on this here: https://dev.to/briwa/how-strict-is-typescript-s-strict-mode-311a
    }
}

주의: 이 프로젝트를 나중에 React로 설정할 계획이라면, React의 특정한 기본 프레임워크 tsconfig.json here 를 참고하십시오.tsconfig.json 및 설치 시 사용할 수 있는 모든 매개변수에 대한 자세한 내용은 official TypeScript handbook. 를 참조하십시오.
7단계: 마지막으로 루트 폴더를 엽니다(파일뿐만 아니라!) -VScode에서
이제 index.ts 파일에서 타자 스크립트를 작성할 수 있을 거예요!컴파일러가 모든 내용을 포착할 수 있도록 .ts 폴더 (또는 src 의 하위 디렉터리) 에 모든 src 파일을 만들어야 합니다.
TypeScript를 JavaScript 파일로 구성하려면 루트에서 다음 명령을 실행하십시오.

yarn tsc -p ./tsconfig.json

에스린트

알겠습니다. ESLint로 코드 라이브러리를 표시합시다.
첫 번째 단계: 먼저 VScode에 대한 ESLint 플러그인을 설치합니다.화면 왼쪽의 확장 표시줄에서 ESLint를 검색한 다음 Install을 클릭하여 설치하기만 하면 됩니다.

2단계: 명령줄을 다시 열고 항목의 루트 디렉터리로 이동합니다.여기서부터 ESLint를 시작하고 실행하기 위해 필요한 모든 라이브러리를 설치하고자 합니다.
이렇게 하려면 다음 명령을 입력합니다.

yarn add eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser --dev

다음과 같이 설치됩니다.

eslint-eslint 핵심 패키지

@ typescript eslint/eslint 플러그인 - typescript를 전문적으로 지원하는 eslint 플러그인

@ typescript eslint/parser - eslint에서 lint까지의 typescript 원본 파일을 더 지원합니다

3단계: 이제 명령줄에 있을 때 ESLint에 대한 구성 파일을 설정해야 합니다.
이렇게 하려면 다음 명령을 입력합니다.

touch .eslintrc

(주의.로 시작하는 eslintrc.이것은 정말 중요하다. 놓치지 않도록 해라.
4단계: 설치를 완료하기 위해 새로 만든 .eslintrc 파일을 변경해야 합니다.VScode를 열었다면 프로젝트 트리에서 .eslintrc를 탐색할 수 있습니다.
다음은 Visual Studio 코드의 내용입니다.

이제 .eslintrc가 열렸습니다. 다음과 같이 업데이트하십시오.

{
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 2021
    },
    "extends": [
        "plugin:@typescript-eslint/recommended",
    ]
}

이 설정은 우리가 방금 설치한 모든 라이브러리에 적용됩니다.
5단계: VScode 재부팅!
6단계: 현재 상태막대 (화면 오른쪽 아래) 의 ESLint 표시를 관찰할 수 있을 것입니다.

얘가 위에 그림처럼 보이면 - 대박!준비 다 됐어!
그러나 만약 그것이 이렇게 보인다면

...이 버튼을 클릭한 다음 작업공간에 ESLint를 사용하는 데 필요한 권한을 부여해야 합니다.그 후에 IDE의 마지막 리셋은 당신을 시작하고 실행하게 할 것입니다!

더욱 아름답다

거의 다 왔어!환경을 더 예쁜 것으로 배치합시다...
1단계: 명령줄을 다시 열고 항목의 루트 디렉터리로 이동합니다.우리는 더 예쁜 것을 늘리기 위해 새로운 소프트웨어 패키지를 설치할 것이다.

yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev

여기에서 프로필을 만듭니다.편집할 필요가 없습니다. 존재하기만 하면 됩니다.

touch .prettierrc

2단계: 이제 .eslintrc 파일을 열고 구성의 extends 어레이에 새 라이브러리를 추가합니다..

{
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 2021
    },
    "extends": [
        "plugin:@typescript-eslint/recommended",
        "prettier/@typescript-eslint",
        "plugin:prettier/recommended"
    ]
}

(주의:extends수조 내용의 순서는 앞으로 아무런 문제가 발생하지 않도록 하는 것이 매우 중요하다!)
3단계: 마지막으로 VScode를 다시 시작합니다.
이렇게 마음껏 한숨 돌리자.해냈어!너는 이미 TypeScript, ESLint, Prettier로 프로젝트를 만들었어!

요약

단지 당신의 환경을 준비하기 위해서 많은 일을 해야 하지만, 이 과정을 한 번 완성하고 모든 독립된 구성 요소가 어떻게 조합되는지 알게 되면, 이 도구 중 하나가 실패하면, 이것은 정말 일을 더욱 간단하게 할 것이라고 나는 진심으로 믿는다.기왕 네가 이 폭풍을 용감하게 맞췄으니, 너도 마음대로 ESLint를 만들어서 더욱 아름답게 만들어야 한다.

마지막 한 가지...

저는 자바스크립트 개발자를 위한 16부분의 TypeScript 과정을 밟았고 완전히 무료입니다.관심 있으시면 제website right here에서 보실 수 있습니다.너도 이곳에서 나를 위해 더 많은 내용을 구독할 수 있다.
읽어주셔서 감사합니다!