1. 설치

npm i -D typescript prettier eslint
npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-config-standard-with-typescript eslint-plugin-prettier ts-loader

• @typescript-eslint/eslint-plugin: TypeScript관련 linting 규칙을 처리하는 플러그인
• @typescript-eslint/parser: 타입스크립트용 Eslint 파서
• eslint-config-prettier: eslint에서 prettier와 충돌할 수 있는 rule을 끔
• eslint-plugin-prettier: Prettier를 ESLint 플러그인으로 추가
• ts-loader: .ts, tsx 파일을 변환할 로더
• standard 규칙 (standard-with-typescript) 사용

2. 설정

// .eslintrc.js
module.exports = {
    env: {
        browser: true,
        node: true
    },
    parser: '@typescript-eslint/parser',
    plugins: ['@typescript-eslint', 'prettier'],
    extends: ['standard-with-typescript', 'prettier', 'plugin:prettier/recommended'],
    parserOptions: {
        project: './tsconfig.json',
        sourceType: "module",
        tsconfigRootDir: __dirname,
    },
    ignorePatterns: ['.eslintrc.js', 'webpack.config.js'],
    rules: {
        "@typescript-eslint/strict-boolean-expressions": 0
    },
};

// .prettierrc
{
  "singleQuote": true,
  "parser": "typescript",
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 120,
  "arrowParens": "always"
}

// tsconfig.json
{
    "compilerOptions": {
        "target": "ES6",
        "moduleResolution": "node"
    },
    "include": ["src/**/*.ts"],
    "exclude": [
        "node_modules"
    ]
}

// webpack.config.js
module.exports = {
  //...
  modules: {
    rules: [
      // 이 부분 추가
      {
        test: /\.ts?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      ...
    ]
  }
  
  //...
}

• 파일을 열었는데 이런 에러가 뜬다면 .eslintrc.js 의 ignorePattern에 해당 파일 추가
  • Parsing error: ESLint was configured to run on <tsconfigRootDir>/babel.config.js using parserOptions.project ...