cra typescript 초간단 세팅

CRA(Create React App)에 typescript를 적용하고 eslint와 prettier까지 적용해보는 스크립트 입니다.

 

[blah blah] -> 괄호안의 내용을 blah blah가 의미하는 것으로 변경하면 됩니다.

 

npx create-react-app [projectName] --template typescript // typescript로 cra 수행

yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
yarn add -D eslint-plugin-react
yarn add -D prettier eslint-config-prettier eslint-plugin-prettier
yarn remove prettier/@typescript-eslint

eslint  => eslint 라이브러리

@typescript-eslint/parser => eslint가 typescript를 lint 할수 있도록 허용해주는 라이브러리

@typescript-eslint/eslint-plugin => typescript용 eslint rule들을 포함하고 있는 플러그인  https://www.npmjs.com/package/@typescript-eslint/eslint-plugin   에 가면 추천하는 플러그인들도 볼수 있다

 

eslint-plugin-react => react 규칙들을 포함한 eslint 

prettier => prettier 라이브러리 

eslint-config-prettier => eslint와 prettier가 충돌이 났을때 eslint의 충돌나는 규칙을 off 해준다

eslint-plugin-prettier => prettier를 eslint 플러그인으로 추가해준다. prettier 포맷 오류를 Eslint오류로 출력 가능하게 해줌

 

 

프로젝트 root 위치에 .eslintrc.js와 .prettierc.js 파일을 생성해 줍니다

.eslintrc.js

module.exports = {
  parser: "@typescript-eslint/parser",
  extends: [
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
  ],
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,
    },
  },
  rules: {},
  settings: {
    react: {
      version: "detect",
    },
  },
};

 

.prettierc.js

module.exports = {
  semi: true,
  trailingComma: 'all',
  singleQuote: true,
  printWidth: 240,
  tabWidth: 2
};

 

eslint와 prettier은 자기 입맛에 맞게 변경하시면 됩니다.

 

프로젝트 root에 .vscode 폴더를 생성하고 settings.json 파일을 생성합니다

settings.json

{
  "eslint.autoFixOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    { "language": "typescript", "autoFix": true },
    { "language": "typescriptreact", "autoFix": true }
  ],
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false
  },
  "[javascriptreact]": {
    "editor.formatOnSave": false
  },
  "[typescript]": {
    "editor.formatOnSave": false
  },
  "[typescriptreact]": {
    "editor.formatOnSave": false
  }
}

 

 

 

출처 : https://velog.io/@_jouz_ryul/CRA%EB%A1%9C-typescript-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0

CRA로 typescript 개발환경 설정하기