npm의 React(Type Script)에서 ESLit 및 Preettier 가져오기

개요

npm에서 ESLight 및 Preettier를 가져오는 단계를 React(Type Script)에 기록합니다.
ESLight 및 Pretter에 대한 세부 설정이 기재되어 있지 않습니다.

컨디션

Windows 10 Home

Node 16.14.0

npm 8.5.1

npx 8.5.1

React ^17.0.2

다른 패키지의 종속성, ESLight 및 Preettier와 관련된 파일 내용은 별도로 마지막에 기재됩니다.

1단계에서 React 환경 만들기

Type Script를 사용하는 React의 초기 응용 프로그램을 만듭니다.

npx create-react-app . --template typescript

제작 후 src 디렉토리에 있는 파일을 편집하고 다음과 같은 앱을 사용합니다.tsx와 index.tsx 두 개만 가능합니다.
App.tsx

function App() {
  return <p>React App</p>;
}

export default App;

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root'),
);

이렇게 해서 리액트의 사전 준비가 완성되었다.

2단계 ESLight 가져오기

https://eslint.org/
ESLight를 설치합니다.

npm install eslint --save-dev

ESLight 구성 파일의 초기 형태를 만듭니다.이번에는 대화식으로 만들었어요.

npm init @eslint/config

이번 문제에 대한 해답은 다음과 같다.

√ How would you like to use ESLint?
❯ To check syntax, find problems, and enforce code style

√ What type of modules does your project use?
❯ JavaScript modules (import/export)

√ Which framework does your project use?
❯ React

√ Does your project use TypeScript?
Yes

√ Where does your code run?
❯ Browser

√ How would you like to define a style for your project?
❯ Use a popular style guide

√ Which style guide do you want to follow?
❯ Airbnb (https://github.com/airbnb/javascript)

√ What format do you want your config file to be in?
❯ JavaScript

√ Would you like to install them now with npm?
Yes

node_모듈에서 ESLight가 실행되지 않도록 합니다.다음 내용 작성 및 설명

node_modules/

CLI를 통해 src 디렉토리의 모든 파일에 대해 ESLight를 실행합니다.

npx eslint --fix ./src/**

현재 표시된 오류 제거 방법

'React' must be in scope when using JSX https://stackoverflow.com/questions/42640636/react-must-be-in-scope-when-using-jsx-react-react-in-jsx-scope

JSX not allowed in files with extension '.tsx'
상기 사이트는 Stackoverflow에 기재되어 있다

Unable to resolve path to module './App' https://stackoverflow.com/questions/55198502/using-eslint-with-typescript-unable-to-resolve-path-to-module

Missing file extension "tsx"for "./App" https://stackoverflow.com/questions/59265981/typescript-eslint-missing-file-extension-ts-import-extensions

네 번째 오류 제거에 필요한 eslint-config-airbnb-typescript 기록 참조
https://www.npmjs.com/package/eslint-config-airbnb-typescript

3단계 Pretter 가져오기

https://prettier.io/
라이브러리 prettier를 설치합니다.

npm install --save-dev --save-exact prettier

https://github.com/prettier/eslint-config-prettier
eslint-config-prettier를 설치합니다.

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

ESLight 설정 파일에 추가(.eslintrc.js의 예)
.eslintrc

extends: [
  'その他の機能',
  'prettier', // 追記
],

ESLit과 Preettier는 규칙이 충돌하는 경우가 있습니다.
eslint-config-prettier를 응용하여 경쟁 규칙을 무효화하고 조정하는 성질을 extends의 마지막에 추가합니다.
참고로 eslint-config-prettier에는 CLI 도구가 있어 경쟁 규칙이 있는지 확인할 수 있습니다.
CLI에서 eslint-config-prettier를 실행합니다.

npx eslint-config-prettier ./src/**

집행 결과는 다음과 같다.

No rules that are unnecessary or conflict with Prettier were found.

마지막 노드modules 내에서 Pretter가 실행되는 것을 방지하기 위해서prettierignore를 만들고 다음과 같은 내용을 기술합니다.
.prettierignore

node_modules

기타 참고 자료

https://qiita.com/h-yoshikawa44/items/14a114da903fb0eff886

생성된 파일

package.json

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.3",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.4.1",
    "@types/node": "^16.11.26",
    "@types/react": "^17.0.43",
    "@types/react-dom": "^17.0.14",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router": "^6.3.0",
    "react-scripts": "5.0.0",
    "typescript": "^4.6.3",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "eslint": "^8.14.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^17.0.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-react": "^7.29.4",
    "eslint-plugin-react-hooks": "^4.4.0",
    "prettier": "2.6.2"
  }
}

.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:react/recommended',
    'airbnb',
    'airbnb-typescript',
    "prettier",
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: './tsconfig.json',
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: [
    'react',
    '@typescript-eslint',
  ],
  rules: {
    "react/react-in-jsx-scope": "off",
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", '.ts', '.tsx'] }],
  },
  settings: {
    "import/extensions": [".js", ".jsx", ".ts", ".tsx"],
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  },
};

.eslintignore

node_modules/

.prettierrc

{
  "arrowParens": "always",
  "bracketSpacing": true,
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "css",
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "printWidth": 120,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false
}

.prettierignore

node_modules