ESLit+Pretier의 Type Script 개발 환경 가져오기

개요

ESLit+Pretier의 Type Script 개발 환경 구축 방법을 가져옵니다.
ESLint에서 정적 검증을 하고 Prettier에서 포맷을 한다.
편집은 VS 코드를 사용합니다.

컨디션

Node.js

npm

Windows 10

VS Code

구축 방법

package.json 만들기

작업 디렉토리로 이동하여 다음 명령을 사용하여 생성package.json합니다.

npm init

Type Script 가져오기 & 실행

1. Type Script 설치

npm install --save typescript

2. TypeScript의 컴파일 설정 파일 tsconfigjson 파일 만들기

npx tsc --init

tsc는 TypeScript의 컴파일러입니다.

3. 집행

TypeScript 파일을 컴파일하여 실행합니다.
작업 디렉터리에 테스트 파일index.ts을 만들고 다음 원본 파일에 기록합니다.

function outputHello(text: string): void {
  console.log(`Hello ${text}!`);
}

const textWorld: string = "World";

outputHello(textWorld);

컴파일을 실행합니다.
생성 여부

npx tsc index.ts

index.js를 확인합니다.
시행 시도

function outputHello(text) {
  console.log("Hello " + text + "!");
}
var textWorld = "World";
outputHello(textWorld);

index.js.
답장

node index.js

Hello World!하면 OK!

ESLight 가져오기 및 실행

1. ESLight 설치

npm install --save-dev eslint

2. npx eslint-init 명령을 사용하여 상호 작용하여 ESLint 구조 만들기

npx eslint --init 명령을 실행하여 ESLight 구성 파일을 만듭니다.
이번에는 다음과 같은 구성으로 작업을 진행한다.

스타일 매뉴얼을 채택하고 싶어서 How would you like to use ESLint?To check syntax, find problems, and enforce code style를 선택했습니다.

What type of modules does your project use? 선택JavaScript modules (import/export) .

Which framework does your project use? 선택None of these.

Does your project use TypeScript? 선택Yes.

Where does your code run? 선택Browser과 Node.

How would you like to define a style for your project? 선택Use a popular style guide.

Which style guide do you want to follow? 선택Standard.

What format do you want your config file to be in? 선택JavaScript.

Would you like to install them now with npm? 선택 Yes, 필요한 모듈을 설치합니다.

.eslintrc.js.

3. 집행

위index.ts의 상태에서 집행npx eslint index.ts.
나는 많은 오류가 나타날 것이라고 생각한다.

Pretier 가져오기 및 실행

1. Pretter 설치

npm install --save-dev prettier eslint-config-prettier

eslint-config-prettier는 ESLin의 코드 형식과 관련된 규칙을 비활성화하고 오류를 감지하는 규칙만 사용하는 플러그인입니다.

2. .eslintrc.js에 Pretter 항목 추가

module.exports = {
  /* 中略 */
  extends: [
    /* 中略 */
    "prettier", // 追加。他の設定の上書きを行うために、必ず最後に配置する。
  ],
};

3. 집행

index.ts에서 문장 끝의 번호를 삭제하는 등 실행npx prettier --write index.ts.
코드가 포맷되다.

VS 코드의 설정

설치 확장

ESLittdbaeumer.vscode-eslint와 Preettieresbenp.prettier-vscode의 확장 기능을 설치합니다.

설정

VScode.vscode/settings.json를 제작하고 작업 공간용 설정 파일을 제작합니다.
파일을 저장할 때 형식을 적용하려면 설정을 추가합니다.

{
  "editor.defaultFormatter": "esbenp.prettier-vscode", // フォーマッターをPrettierにする
  "editor.formatOnSave": true // ファイル保存時にフォーマットを実行
}

파일을 저장할 때 형식이 실행되는지 확인합니다.

참고 문헌

https://qiita.com/notakaos/items/85fd2f5c549f247585b1
https://multimineral-tech.com/entry/2020/04/13/192746
https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/README.md
https://zenn.dev/ryusou/articles/nodejs-prettier-eslint2021
https://qiita.com/y-w/items/dcf5fb4af52e990109eb
https://blog.ojisan.io/prettier-eslint-cli/
https://github.com/prettier/eslint-config-prettier