VSCode로 create-react-app으로 생성된 React의 ESLint(자동 성형 포함)

개요

VScode로 create-react-app을 만드는 데 사용되는 ESLint입니다.

전제 지식

ESLint 자체는create-react-app을 통해 자동으로 설치됩니다.
그렇다면 관건은create-react-app때package.json↓이다.
※ react-app 규칙 정의가 존재하고 계승됨

{
  //...略...
  "eslintConfig": {
    "extends": "react-app"
  },
  //...略...
}

npm run start, 서버가 시작되고 그 메시지에서 자동으로 lint를 보내고 경고를 보내지만 이것은 react-app를 사용하는 규칙입니다.

프로비저닝

VScode에서 같은 방식으로 사용하기 위한 lint

1. VScode 확장에 ESLint 추가

이렇게아래쪽 화살표.

2. ESLint 파일 생성

react-app 에서 ctrl + shift + P 를 선택합니다.
ESLint 설정 파일에서 생성된 명령행을 시작하려면 ↓ 을 참조하여 설정하십시오.

작업공간의 루트 디렉토리에 ESLint: create ESLint congiguration 파일을 생성합니다.

3. eslintrc.js의 기본 규칙을react-app으로 변경

eslintrc.js의 eslintrc.js

'extends': 'eslint:recommended',

↓로 변경합니다.

'extends': 'react-app',

4. 파일을 저장할 때 자동으로 lint 규칙을 사용하여 성형

extends 에서 ctrl + shift + P 를 선택합니다.ユーザー設定を開く을(를) ユーザ로 변경합니다.
ワークスペース에 設定の検索를 입력합니다.
선택ESLint.
↓ 각종 포함된 설정 예.

{
  "files.eol": "\n",
  "editor.formatOnSave": true,
  "eslint.autoFixOnSave": true,
  "editor.codeActionsOnSave": {
    "source.organizeImports": true // importの自動編成
  }
}

경품

분호 수여

4개의 들여쓰기 공간

따옴표

마지막 공백 삭제

여러 공행 금지

샘플 Files: Auto Fix On Save

module.exports = {
    'env': {
        'browser': true,
        'es6': true
    },
    'extends': 'react-app',
    'globals': {
        'Atomics': 'readonly',
        'SharedArrayBuffer': 'readonly'
    },
    'parserOptions': {
        'ecmaFeatures': {
            'jsx': true
        },
        'ecmaVersion': 2018,
        'sourceType': 'module'
    },
    'plugins': [
        'react'
    ],
    'rules': {
        'linebreak-style': ['error', 'unix'],
        'indent': [
            'error',
            4,
            { "SwitchCase": 1 }
        ],
        'quotes': [
            'error',
            'single'
        ],
        'semi': [
            'error',
            'always'
        ],
        "no-extra-semi": "error",
        'no-trailing-spaces': [
            "error",
            { "skipBlankLines": false }
        ],
        'no-multiple-empty-lines': [
            'error'
        ],
        "no-unexpected-multiline": "error",
    }
};