reference

📌ESLint

npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react --D

@typescript-eslint/parser: typescript parser use at eslint

@typescript-eslint/eslint-plugin : typescript rules collection

eslint-plugin-react : eslint rule-set about react

✅ if you want use prettier

npm install prettier eslint-config-prettier eslint-plugin-prettier -D

.eslintrc.js

module.exports =  {
  parser:  '@typescript-eslint/parser',  
  extends:  [
    'plugin:react/recommended', // 리액트 추천 룰셋
    'plugin:@typescript-eslint/recommended', // 타입스크립트 추천 룰셋
     // eslint의 typescript 포매팅 기능을 제거(eslint-config-prettier)
    'prettier/@typescript-eslint',  
    // eslint의 포매팅 기능을 prettier로 사용함. 항상 마지막에 세팅 되어야 함.            
    'plugin:prettier/recommended',  (eslint-plugin-prettier)
  ],
  root : true , 
  env : {
    node : true,
    jest : true,
  },
  parserOptions:  {
    ecmaVersion:  2018,  // 최신 문법 지원
    sourceType:  'module',  // 모듈 시스템 사용시
    ecmaFeatures:  {
        jsx:  true,  // 리액트의 JSX 파싱을 위해서
    },
  },
  rules:  {
    // extends에서 적용한 룰셋을 덮어씌울 수 있습니다.
    // "@typescript-eslint/explicit-function-return-type": "off",
    '@typescript-eslint/interface-name-prefix': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
  },
  settings:  {
    react:  {
      version:  'detect',  // eslint-plugin-react가 자동 리액트버전탐지
    },
  }
};

.prettierrc

{
  "printWidth": 100,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true, // [1,2] -> [ 1, 2 ]
  "semi": true,
  "useTabs": true,
  "arrowParens": "avoid", // (x) => x를 x => x로 변환
  "endOfLine": "lf"
}

vscode setting.json

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},
"eslint.validate":  [
  "javascript",
  "javascriptreact",
  "typescript",
  "typescriptreact"
],

적용이 되지 않을땐 ,

https://khalilstemmler.com/blogs/tooling/prettier/
을 적용하면 된다.

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

eslint test

https://eslint.org/demo