버전
Expo : 52.0.42
ESLint : 9.23.0
expo docs
https://docs.expo.dev/guides/using-eslint/
typescript-eslint docs
https://typescript-eslint.io/getting-started/

ESLint & Prettier 설치

ESLint & Prettier 설치

npx expo install eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks typescript-eslint @eslint/js -- --save-dev

eslint.config.js

ESLint 9.x 버전 이상에서는 eslintrc.js을 eslint.config.js로 변경해야 합니다.

eslint.config.js에 eslint 설정 값을 추가합니다.

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';
import react from 'eslint-plugin-react';
import prettier from 'eslint-plugin-prettier';

export default tseslint.config({
  files: ['**/*.ts', '**/*.tsx'], // TypeScript 및 JSX 파일에 적용
  extends: [
    eslint.configs.recommended, // JavaScript 기본 권장 규칙
    tseslint.configs.recommended, // TypeScript 권장 규칙
  ],
  plugins: {
    '@typescript-eslint': tseslint.plugin,
    react,
    prettier,
  },
  rules: {
    'prettier/prettier': 'error', // Prettier 규칙 적용
    'react/react-in-jsx-scope': 'off', // React 17+에서는 JSX 사용 시 React 불필요
    '@typescript-eslint/no-explicit-any': 'warn', // any 타입 사용 시 경고
    '@typescript-eslint/explicit-module-boundary-types': 'off', // 함수 반환 타입 명시 비활성화
    '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }], // 사용하지 않는 변수 경고 (예외: _로 시작하는 변수)
    '@typescript-eslint/consistent-type-imports': 'warn', // `import type {}` 사용 권장
  },
});

.prettierrc.js 설정

.prettierrc.js에 설정 값을 추가합니다.

export default {
  semi: true, // 문장 끝에 세미콜론(;)을 추가
  singleQuote: true, // 문자열을 작은따옴표(')로 변환
  trailingComma: 'all', // 여러 줄일 때 마지막 요소에도 쉼표 추가 (가독성 향상)
  printWidth: 80, // 한 줄 최대 80자로 제한 (자동 줄바꿈 적용)
  tabWidth: 2, // 들여쓰기 시 공백 2칸 사용
  useTabs: false, // 들여쓰기에 공백(Space) 사용 (true로 설정하면 탭 사용)
  arrowParens: 'always', // 화살표 함수에서 매개변수가 1개여도 괄호 추가
  endOfLine: 'lf', // 줄바꿈 형식을 LF(Line Feed)로 설정 (Windows CRLF 방지)
};

ESLint & Prettier 적용

npx eslint --fix . // 코드 수정 및 ESLint 규칙 적용
npx prettier --write . // 코스 스타일 정리

ESLint & prettier 오류 발생 시

(node:21731) [MODULE_TYPELESS_PACKAGE_JSON] Warning: Module type of file:///Users/apple/vscodeProjects/OrderLine/eslint.config.js?mtime=1743687674364 is not specified and it doesn't parse as CommonJS.
Reparsing as ES module because module syntax was detected. This incurs a performance overhead.
To eliminate this warning, add "type": "module" to /Users/apple/vscodeProjects/OrderLine/package.json.
(Use `node --trace-warnings ...` to show where the warning was created)
(node:21731) [MODULE_TYPELESS_PACKAGE_JSON] Warning: Module type of file:///Users/apple/vscodeProjects/OrderLine/.prettierrc.js is not specified and it doesn't parse as CommonJS.
Reparsing as ES module because module syntax was detected. This incurs a performance overhead.
To eliminate this warning, add "type": "module" to /Users/apple/vscodeProjects/OrderLine/package.json.
(Use `node --trace-warnings ...` to show where the warning was created)

eslint.config.js 또는 .prettierrc.js 설정 파일이 ES Module로 해석되지만 package.json에 "type": "module"이 없어서 발생하는 오류입니다.

해결 방법 : package.json에 "type": "module"을 추가해 줍니다.

package.json의 script 부분엔 실행 명령어 추가

"scripts": {
  ...
  "lint": "eslint . --fix",
  "format": "prettier --write .",
  "lint:fix": "npm run lint && npm run format"
},