LEVELUP 10. Eslint & Prettier

어니언·2023년 3월 8일
0
post-thumbnail

eslint란 lint란 에러가 있는 코드에 표시를 하는 것을 말하낟. 에러와 코딩 스타일을 잡아주기 떄문에 여러 명이 협업을 하며 코드를 작성하더라도 한사람이 코딩한 것 처럼 깔끔하게 정리할 수 있다.

Eslint는 ecma script와 lint를 합친 말로 자바스크립트 코드의 에러를 표시한다.

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: 'tsconfig.json',
    tsconfigRootDir : __dirname, 
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint/eslint-plugin'],
  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  root: true,
  env: {
    node: true,
    jest: true,
  },
  ignorePatterns: ['.eslintrc.js'],
  rules: {
    '@typescript-eslint/interface-name-prefix': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
  },
};

이런 구조로 작성이되며 코드를 작성하다가, eslint에서 정해놓은 규정에 맞지않으면 빨간줄이 생길 수 있다.

prettier는 파일을 저장할 때마다, 코드를 사용자가 원하는 형식으로 모양을 예쁘게 만들어주는 node.js패키지이다. 파일을 저장할 때마다 일관성있도록 코드를 짤 수 있게 도와준다.

prettier 기본구조

{
  "singleQuote": true,
  "trailingComma": "all",
  "tabWidth": 2
}

singleQuote : 문자열 입력시 "을 쓸지 ' 를 사용할지 설정할 수 있게 한다.

tabWidth : 들여쓰기의 크기를 정한다.

trailingComma : 객체 또는 배열이 여러줄로 구성되어 있어 다음과 같이 맨 마지막 줄에 쉼표를 붙여줄지 설정하느 기능이다.

profile
안녕하세요.

0개의 댓글