Typescript, ESLint, Prettier로 GatsbyJS 스타터를 설정하는 방법

원본 게시물Here - 이미지 포함 😅

요컨대

Gatsby 기본 스타터를 포크, 복제 및 설치합니다

.

gatsby-plugin-typescript 및 TypeScript 설치

구성 tsconfig.json 및 type-check script

파일을 TypeScript로 변환

설정 ESLint & Prettier

VSC 설정

1. Gatsby 기본 스타터 복제 및 설치

예, Gatsby 기본 스타터를 자신의 Github 계정으로 포크하고 거기에서 로컬 시스템으로 복제하십시오.

https://github.com/gatsbyjs/gatsby-starter-default로 이동

git clone [email protected]:gatsbyjs/gatsby-starter-default.git를 사용하여 저장소를 로컬 시스템에 복제합니다.

cd 폴더

에

실행npm install

실행npm run develop

이제 Gatsby 스타터 설정이 완료되었으며 실행 중입니다http://localhost:8000/. 이제 TypeScript 설정을 시작할 수 있습니다!

2. TypeScript 및 gatsby-plugin-typescript를 설치하고

TypeScript는 devDependencies에 추가할 수 있지만 Gatsby 플러그인은 종속 항목으로 추가해야 합니다.

npm install gatsby-plugin-typescript & npm install typescript --save-dev

And we need to enable the plugin gatsby-plugin-typescript in the gatsby-config.js file in the root of your project.

3. tsconfig.json 추가 및 구성

구성 파일은 다음과 같아야 합니다.

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "esnext",
    "jsx": "preserve",
    "lib": ["dom", "esnext"],
    "strict": true,
    "noEmit": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "noUnusedLocals": false
  },
  "exclude": ["node_modules", "public", ".cache"]
}

4. 파일을 TypeScript로 변환

*.js 파일의 이름을 *.ts 및 *.tsx로 변경합니다(JSX가 포함된 경우).

TypeScript가 우리에게 비명을 지르는 현재 유형 오류를 수정해야 합니다. 후속 블로그 게시물에 대한 이러한 오류의 실제 수정을 남겨두겠습니다. 지금은 린터를 설정하는 동안 저를 참아주세요.

5. ESLint 및 Prettier 설정

TypeScript, Prettier 및 일부 React 모범 사례로 ESLint를 설정하려면 여러 가지를 추가해야 합니다devDependencies.

npm install eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-prettier eslint-plugin-react --save-dev

그리고 모든 패키지가 설치되었으면 프로젝트의 루트에 .eslintrc.js 파일을 추가해 봅시다. ESLint 구성의 예:

module.exports = {
  parser: '@typescript-eslint/parser', // Specifies the ESLint parser
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended'
  ],
  settings: {
    react: {
      version: 'detect'
    }
  },
  env: {
    browser: true,
    node: true,
    es6: true
  },
  plugins: ['@typescript-eslint', 'react'],
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
    sourceType: 'module' // Allows for the use of imports
  },
  rules: {
    'react/prop-types': 'off', // Disable prop-types as we use TypeScript for type checking
    '@typescript-eslint/explicit-function-return-type': 'off'
  },
  overrides: [
    // Override some TypeScript rules just for .js files
    {
      files: ['*.js'],
      rules: {
        '@typescript-eslint/no-var-requires': 'off' //
      }
    }
  ]
};

Lint 스크립트 추가

삶을 더 쉽게 만들기 위해 우리는 두 개의 lint 스크립트를 package.json

"scripts": {
  ...
  "lint": "eslint --ignore-path .gitignore . --ext ts --ext tsx --ext js --ext jsx",
}

일단 호출되면 모든 `.ts,.js,*.tsx 및 *.jsx` 파일에서 실행되고 오류가 표시됩니다.

6. 편집기 설정

이거 추가 해봐

"eslint.validate": [
    {
      "language": "javascript",
      "autoFix": true
    },
    {
      "language": "javascriptreact",
      "autoFix": true
    },
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    }
  ],

장군에게settings.json

We also need to install type definitions for our packages but I will leave that for you, just google it and you will get the general idea.

I hope that this post gave you a basic idea on how to do the initial setup of GatsbyJS + Typescript + ESLint + Prettier