ESLint 설정

1. ESLint init (npm init @eslint/config)

• How would you like to use ESLint?
  • To check syntax and find problems
• What type of modules does your project use?
  • JavaScript modules (import/export) (7기 프리코스 미션들의 모듈 시스템은 ESM)
• Which framework does your project use?
  • None of these
• Does your project use TypeScript?
  • No
• Where does your code run?
  • <space>로 Browser를 선택 해제, 다시 <space>로 Node를 선택
• Would you like to install them now?
  • Yes (install peer dependancy)
• Which package manager do you want to use?
  • npm

import globals from "globals";
import pluginJs from "@eslint/js";

export default [
  {languageOptions: { globals: globals.node }},
  pluginJs.configs.recommended,
];

2. .eslint.config.js 파일 기본 설정

• 기본 사용법

export default [
  ...
  {
	  // 적용할 파일 설정
    files: ['src/**/*.js'],
    // 적용할 규칙 설정
     rules: {
      // 들여쓰기 깊이 제한
      'max-depth': ['error', 2],
      // 함수의 매개변수 개수 제한
      'max-params': ['error', 3],
      // 함수의 길이 제한
      'max-lines-per-function': ['error', { max: 15 }],
    },
  },
];

• eslint airbnb 스타일 가이드 적용
  1. 우아한테크코스는 Airbnb 자바스크립트 스타일 가이드를 따른다
  2. npx install-peerdeps --dev eslint-config-airbnb-base
  3. npm i -D @eslint/eslintrc
  4. .eslint.config.js 파일에 적용
• 오류 해결
  1. Unexpected dangling '_' in '__filename'. eslint(no-underscore-dangle)
  2. ‘{패키지 이름}' should be listed in the project's dependencies, not devDependencies. eslint(import/no-extraneous-dependencies)

import { FlatCompat } from '@eslint/eslintrc';
import path from 'path';
import { fileURLToPath } from 'url';

// mimic CommonJS variables -- not needed if using CommonJS
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

export default [

    // flat해서 적용
    ...compat.extends('eslint-config-airbnb-base'),
    
    {
	    files: ['eslint.config.js'],
	    rules: {
	      // eslint.config.js 파일에서만 'no-underscore-dangle' 규칙을 비활성화
	      'no-underscore-dangle': 'off',
	      // package.json 파일이 위치한 프로젝트 루트 디렉토리 경로를 명시
	      'import/no-extraneous-dependencies': ['error', { packageDir: __dirname }],
    },
  },
];

• Test 파일 오류 해결
  1. Unexpected use of file extension "js" for "../src/App.js" eslint(import/extensions)
  2. ‘jest' is not defined. eslint(no-undef)

export default [
	{
		languageOptions: {
			globals: {
				...globals.node,
        // 'jest' is not defined 오류
				...globals.jest,
      },
    },
    rules: {
      // package import를 제외한 모든 import 구문에 대해 확장자를 사용하도록 강제
      'import/extensions': ['error', 'ignorePackages'],
    },
  }
];

• private method & field를 사용하고 싶을 때
  • eslint default parser는 private field를 지원하지 않음
  • ~~npm i -D @babel/eslint-parser~~
  • ~~.eslint.config.js 적용~~

Prettier 설정