ESLint&Prettier

1. ESLint

• [FE]

//.eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  parser: '@typescript-eslint/parser',
  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
    'plugin:prettier/recommended',
  ],
  parserOptions: {
    ecmaVersion: 'latest', // Allows for the parsing of modern ECMAScript features
    sourceType: 'module', // Allows for the use of imports
    ecmaFeatures: {
      jsx: true, // Allows for the parsing of JSX
    },
  },
  plugins: ['react', 'react-hooks'],
  rules: {
    'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
    'react-hooks/exhaustive-deps': 'warn', // Checks effect dependencies
  },
  settings: {
    react: {
      version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
    },
  },
};

• [BE]

//.eslintrc.js
module.exports = {
  env: {
    node: true,
    es2021: true,
  },
  extends: ['eslint:recommended', 'plugin:prettier/recommended'],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'script',
  },
  plugins: [],
  rules: {},
};

2. Prettier

// .prettierrc.js
module.exports = {
    singleQuote: true,    // 문자열은 홑따옴표로 formatting
    semi: true,           // 코드 마지막에 세미콜른이 있게 formatting
    useTabs: false,       // 탭의 사용을 금하고 스페이스바 사용으로 대체하게 formatting
    tabWidth: 2,          // 들여쓰기 너비는 2칸
    trailingComma: 'all', // 객체나 배열 키:값 뒤에 항상 콤마를 붙힘
    printWidth: 80,      // 코드 한줄이 maximum 80칸
    arrowParens: 'always',// 화살표 함수가 하나의 매개변수를 받을 때 괄호를 생략하게 formatting
    endOfLine: 'auto',    // windows에 뜨는 'Delete cr' 에러 해결
  };