ESLint

📌 확장: ESLint

ESLint 구성

시작하려면 다음 명령을 사용해야 합니다.

yarn add eslint -D

그리고 다음과 같이 이미 초기화했습니다.

npx eslint --init

이제 ESLint 설정을 시작했으므로 첫 번째 질문은 시스템에서 ESLint를 사용하는 방법에 관한 것입니다.

  To check syntax only
  To check syntax and find problems
▸ To check syntax, find problems, and enforce code style

그런 다음 프로젝트에서 사용하는 모듈의 종류를 선택합니다. 예제에서는 첫 번째 옵션인 React를 선택합니다.

? What type of modules does your project use? ...
▸ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

다음 단계에서는 사용 중인 프레임워크를 선택합니다. 예제에서는 이전 단계인 React를 따릅니다.

? Which framework does your project use? ...
▸ React
  Vue.js
  None of these

다음 질문은 TypeScript에 관한 것입니다. 예제에서는 사용하지 않을 것이므로 ** No **를 선택했습니다.

? Does your project use TypeScript? » No / Yes

다음 단계에서는 코드가 실행될 위치를 선택해야 합니다.

? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
  Node

이제 프로젝트에 사용할 스타일을 선택하라는 메시지가 표시됩니다. 기존 스타일 중에서 선택해야 하고, 스타일을 생성하거나 직접 사용해야 합니다. 저는 항상 기존 스타일을 사용하고 AirBNB를 사용하도록 선택합니다.

? How would you like to define a style for your project? ...
▸ Use a popular style guide
  Answer questions about your style
  Inspect your JavaScript file(s)

그리고 마지막으로, 우리는 다시 개인적인 선택인 구성 파일의 형식을 선택했습니다.

? What format do you want your config file to be in? ...
▸ JavaScript
  YAML
  JSON

설정이 완료되면 ESLint는 ** npm *을 사용하여 종속성을 설치할 것인지 묻습니다. 우리 프로젝트는 * yarn **을 사용하기 때문에 여기에 두 가지 옵션이 있습니다.

** 예 **를 선택하고 설치 후 생성된 package.lock.json 파일을 삭제하고 yarn를 실행하여 yarn.lock 파일

에 종속성을 설치합니다.

** 아니요 **를 선택하고 설명된 종속성 목록을 복사하고 yarn add ...를 사용하여 설치합니다(이 옵션을 선택하는 경우 -D를 추가하는 것을 잊지 마십시오)

.

이제 .eslintrc 파일이 있으므로 위에서 만든 구성에 대해 다음 설정을 가정합니다.

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ['airbnb', 'plugin:react/recommended'],
  parser: 'babel-eslint',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['react'],
  rules: {
    'react/jsx-filename-extension': ['warn', { extensions: ['.js', '.jsx'] }],
    'import/prefer-default-export': 'off',
    'jsx-quotes': ['error', 'prefer-single'],
  },
};

Install ESLint 확장.