typescript-eslint의 version1.x 시스템이 출시되었으므로 사용해보십시오.

typescript-eslint의 Version 1.X 계열이 출시되었으므로 샘플 앱을 사용해보십시오.

typescript-eslint 정보

typescript-eslint 는 @mysticatea 의 기사 이었던 것처럼 ESLint 팀이 TypeScript에서 지원하는 선언을 가지고 있으며 1월 20일에 Version 1.0.0이 출시되었습니다. 추가 3일 후에는 Version1.1.0이 출시됩니다.

현재, TypeScript가 이용되고 있는 프로젝트는, TypeScript의 보급에 의해 많아져 온 적도 있어, 나중에 TSLint로부터 ESLint에의 이행이 필수가 될까 생각합니다(잠시는 괜찮다고 생각합니다만...) .

그래서 이번에는 TypeScript + React 샘플 앱에서 typescript-eslint를 사용해보고 싶습니다. 또한 기존 tslint.json을 이용한 샘플도 시도해보고 싶습니다.

ESLint 도입

create-react-app 를 사용하여 모든 샘플을 만듭니다.

typescript-eslint $ create-react-app typescript-eslint-react-sample --scripts-version=react-scripts-ts

샘플 앱으로 이동하여 다음 패키지를 설치합니다.

eslint

@typescript-eslint/parser

@typescript-eslint/typescript-estree

@typescript-eslint/eslint-plugin

패키지 설치

typescript-eslint $ yarn add eslint @typescript-eslint/parser @typescript-eslint/typescript-estree @typescript-eslint/eslint-plugin -D

ESLint 설정

eslint의 필요 최소한의 설정을 해 갑니다.

.eslintrc.json

{
  "root": true,
  "plugins": ["@typescript-eslint"],
  "parser": "@typescript-eslint/parser",
  "env": {
    "es6": true,
    "browser": true
  },
  "rules": {
    "no-console": "error" // console.logなどのコンソール出力に対してエラーを出す設定
  },
  "parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  }
}

package.json

{
  // ...
  "scripts": {
    "eslint": "eslint -c ./.eslintrc.json 'src/**/*.{ts,tsx}'"
  },
  // ...
}

위의 설정이 완료되면 콘솔에 오류가 발생하는지 확인합니다.



servicework용 ts가 걸려 있는 것을 확인할 수 있었으므로, 최소한의 설정에 문제가 없는 것을 확인할 수 있었습니다.

tslint 설정 사용

기존 프로젝트에서 TSLint를 사용하는 경우 그 설정을 그대로 사용하고 싶어지는 경우가 있습니다. 이번에는 tslint.json이 있다고 가정하고 시도하고 싶습니다.

먼저 다음 패키지를 추가합니다.

@typescript-eslint/eslint-plugin-tslint

그런 다음 .eslintrc.json 의 설정을 변경합니다.

.eslintrc.json

{
  "root": true,
  "plugins": ["@typescript-eslint", "@typescript-eslint/tslint"], // <- 追加
  // ..
  "rules": { // <- 追加(先ほどのconsoleのルールは削除して、このルールだけにします)
    "@typescript-eslint/tslint/config": [
      "warn",
      {
        "lintFile": "./tslint.json"
      }
    ]
  },
  "parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    },
    "project": "./tsconfig.json"// <- 追加
  }
}

그런 다음 tslint.json 를 변경합니다. 이번에는 var 키워드 사용에 대한 검사를 추가합니다.

tslint.json

{
  "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
  "linterOptions": {
    "exclude": [
      "config/**/*.js",
      "node_modules/**/*.ts",
      "coverage/lcov-report/*.js"
    ]
  },
  "rules": { // <-追加
    "no-var-keyword": true
  }
}

그런 다음 적절한 파일을 수정합니다. 이번에는 적절한 함수를 추가하고 그 중에서 var를 선언합니다.

App.tsx

// ..
class App extends React.Component {
  public fn = () => { // <- 追加
    var arg = "aaa";
    return arg.toUpperCase();
  };
  public render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.tsx</code> and save to reload.
        </p>
        {this.fn()} // <- 追加
      </div>
    );
  }
}
// ..

마지막으로 yarn eslint 에서 추가한 규칙이 작동하는지 확인합니다.



위는 ESLint의 실행 결과이고 아래는 TSLint의 실행 결과입니다.
같은 오류가 발생했음을 확인할 수 있었으므로 tslint.json이 정상적으로 작동하고 있음을 확인할 수있었습니다.

마지막으로

이번에는 필요한 최소한의 설정만으로 실천했지만 규칙을 정비하거나 원래의 규칙을 추가해야 합니다. 하지만 도입 자체의 장애물은 그리 높지 않다고 느꼈습니다.

이번에 작성한 리포지토리는 여기 입니다.

ESLint, TSLint에 대한 지적 등이 있으시면 연락주십시오.