JS 컨벤션 ESLint Prettier

논의 주제

1. async await vs .then().catch()
좌

2. asyncWrapper vs try catch
우

3. module.exports = {
a: function(){
} vs
function a(){}
module.exports = {a,}

import / export default
export {}

4. function vs arrow function
우

5. error 를 핸들러를 통해 처리 vs error 를 error 미들웨어로 처리
app.js 마지막 라우터에서 처리

6. package.json, package-lock.json 관리
- 한번에 세팅 후 시작

7. 무조건 중괄호로 묶기
if (true) {
    return 0;
}

if (1) return 0;

8. () => ();

() => {
    return 0;
}
일단 자율적으로 하고, 코드리뷰때 리뷰하던지 합시당.
- (x)
export default function App() {

}

- (o)
const App = () => {

}
export default App;
export { a, b, c, ... }

ESlint 설정

{
    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
    'react/jsx-one-expression-per-line': 'off',
    'prettier/prettier': 'error',
    'no-console': 'warn',
    'no-plusplus': ['error', { allowForLoopAfterthoughts: true }],
    'no-unused-expressions': ['warn'],
    'import/extensions': [
      'error',
      'always',
      {
        js: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never',
      },
    ],
    'no-constant-condition': ['error', { checkLoops: false }],
    'no-restricted-globals': 'warn',
    '@typescript-eslint/explicit-module-boundary-types': 'off', // 리액트 컴포넌트 리턴 값 지정안하면 뜸
    'no-use-before-define': ['off'], // import React할 때 에러떠서 off
    '@typescript-eslint/no-use-before-define': ['warn'],
    'import/prefer-default-export': 'off', // 한 개만 export할때는 export default를 쓰도록 하는 옵션
},

Prettier 설정

{
  "printWidth": 100,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "semi": true,
  "useTabs": false,
  "arrowParens": "always", 
  "endOfLine": "auto",
  "parser": "typescript"
}