typescript-eslint에서 eslint-plugin-react 규칙 적용

이번에는 typescript-eslint에 eslint-plugin-react의 규칙 적용을 시도하고 싶습니다. 대상은 최근 화제가 된 target="_blank" 의 rel="noopener noreferrer" 가 없는 컴퍼넌트의 검출입니다.

그럼 빨리 해 봅시다.

설정

typescript-eslint의 도입 부분은, 여기 를 참조해 주세요.

전제 조건

다음 패키지가 설치됨

eslint

@typescript-eslint/parser

@typescript-eslint/typescript-estree

@typescript-eslint/eslint-plugin

.eslintrc.json (js와 yaml 모두 가능)이 작성되어 eslint를 실행할 수있는 상태입니다.

다음 패키지를 설치합니다.

eslint-plugin-react

그런 다음 plugins 에 react 를, rules 에 react/jsx-no-target-blank 를 추가합니다.

.eslintrc.json

{
  "root": true,
  "plugins": ["@typescript-eslint", "react"], // <- 追加
  "parser": "@typescript-eslint/parser",
  "env": {
    "es6": true,
    "browser": true
  },
  "rules": {
    "no-console": "error",
    "react/jsx-no-target-blank": "error" // <-追加ルール
  },
  "parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  }
}

그런 다음 Lint에 걸리는 구성 요소를 추가합니다.

App.tsx

import * as React from "react";
import "./App.css";

import logo from "./logo.svg";

interface IProp {
  link: string;
}

// 問題のあるコンポーネント
const CorrectLink = (prop: IProp) => (
  <a href={prop.link} target="_blank">
    {prop.link}
  </a>
);
// 問題のないコンポーネント
const UnCorrectLink = (prop: IProp) => (
  <a href={prop.link} target="_blank" rel="noopener noreferrer">
    {prop.link}
  </a>
);

class App extends React.Component {
  public render() {
    return (
      <div className="App">
        <a href="https://www.google.com">Go to google</a>
        <br />
        <CorrectLink link="http://example.com/correct" />
        <br />
        <UnCorrectLink link="http://example.com/uncorrect" />
        <br />
      </div>
    );
  }
}

export default App;

ESLint 실행

준비가 되었으므로 eslint 를 실행합니다.

그러면 다음과 같은 출력 결과를 얻을 수 있습니다.

마지막으로

이번 사내에서도 target="_blank"에 대해 조심하자는 발표가 있었기 때문에 드디어 typescript-eslint도 하려고 노력했습니다. 사용해 보면 eslint-plugin-react 에 정의되고 있는 룰은 사용할 수 있는 것 같기 때문에, 특히 TypeScript용으로 plugin이 바뀌는 것을 기다릴 필요는 없을 것 같습니다. 메인터너 분들에게는 단지 감사 밖에 없습니다.

눈치채면, typescript-eslint 는 1.2.0 이며, 기세를 재확인한 대로입니다. 현시점에서도 어느 정도 필요한 Lint는 되어 있는 인상이므로, 여러분도 점점 사용해 보세요.

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

이번 기사에 대한 지적 등이 있으시면 연락주십시오.