esLint란?

ESLint는 코드 퀄리티를 보장하도록 도와주는 도구입니다.

ESLint를 사용하면 자동으로 에러를 띄워주기도 하고, 프로젝트에서 코드를 작성하는 방식에 대한 일관성을 지켜주도록 도와줍니다.

예를 들어, 함수를 정의할 때, function으로 선언하는 방식과, 화살표 함수로 선언하는 방식 중 하나로 통일시키는 규칙, 타입을 무조건 지정해줘야하는지에 대한 규칙, 코드의 탭, 한줄 당 최대 길이를 한정하는 등 일관성이 있는 코드를 작성하도록 도와줍니다.

esLint 사용법

우선 vscode extension 에서 eslint를 설치해줍니다.

이후 의존성 추가를 위해 적용하고자 하는 프로젝트의 터미널에서 eslint를 설치해줍니다.

npm install -D eslint 
yarn add -D eslint 

esLint 적용법

vite를 사용하여 프로젝트를 생성하면 기본으로 .eslintrc.cjs 파일이 생성되고 기본 세팅이 되어있습니다.

하지만 이를 커스텀하여 다양한 규칙들을 적용시키고 싶다면 개인적으로 설정해주면 됩니다.

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: 'tsconfig.json',
    tsconfigRootDir: __dirname,
    sourceType: 'module',
    ecmaFeatures: {
      "jsx": true
    },
    ecmaVersion: 'latest'   },
  plugins: ['@typescript-eslint/eslint-plugin'],
  extends: [
    'plugin:@typescript-eslint/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',
  },
};

각 옵션들에 대해 자세히 알아보면

• parser - 코드 파일을 검사할 parser를 설정합니다. 위 코드에서는 typescript-eslint/parser를 사용하겠다고 명시하고 있습니다.

• parserOptions - parser의 추가 정보를 등록합니다. (ex. 어떤 ecma version으로 parsing 할 것인지)

• extends - eslint rule 설정이 되어있는 외부 file을 extends 하는 부분입니다.

  • 'plugin:@typescript-eslint/recommended': typescript에서 제공하는 기본적인 eslint 설정을 불러옵니다.

• rules - 직접 lint rule을 적용하는 부분으로, 강제하고싶은 활성화 규칙. 오류 수준 설정할 수 있습니다.

Prettier란?

코드 구현과는 상관없이 일관성 있는 텍스트 작성을 도와주는 도구입니다.

코드의 가독성을 높이기 위해 탭, 스페이스바, 엔터 등에 대한 텍스트 작성의 일관성을 지켜줍니다.

즉, 코드를 규칙대로 정렬해주는 역할을 합니다.

Prettier 사용법

우선 vscode extension 에서 prettier를 설치해줍니다.

이후 의존성 추가를 위해 적용하고자 하는 프로젝트의 터미널에서 eslint를 설치해줍니다.

npm install -D prettier 
yarn add -D prettier 

Prettier 적용법

.prettierrc 파일을 생성하여 eslint와 마찬가지로 본인이 원하는 룰을 적용시킬 수 있습니다.

{ 
    "printWidth": 120, 
    "tabWidth": 2, 
    "semi": true, 
    "singleQuote": true, 
    "trailingComma": "es5", 
    "requirePragma": false, 
    "arrowParens": "always", 
    "bracketSameLine": true, 
    "endOfLine": "auto" 
}

esLint, Prettier 동시에 사용하기

ESLint에도 prettier의 기능과 마찬가지로 일관된 텍스트 작성을 도와주는 기능을 가지고 있습니다. 따라서 Prettier와 ESLint를 같이 사용하게 되면 두 설정이 중복되어 충돌이 발생합니다.

이 문제를 해결하기 위해서 plugin 두가지를 설치해야 합니다.

• eslint-config-prettier - elint와 중복되는 규칙을, prettier 와 충돌하는 부분을 비활성화 시켜 줍니다. - 공식 홈페이지

  yarn add -D eslint-config-prettier

  extends: [
      'plugin:@typescript-eslint/recommended',
       ...,
      'prettier' //마지막에 이 문구 추가해야합니다.
  ],

• eslint-plugin-prettier - prettier가 인식하는 오류들을 eslint error로 출력하도록 하는 역할을 합니다. - 공식 홈페이지

  yarn add -D eslint-plugin-prettier

  plugins: ['prettier'],
      'rules': {
        'prettier/prettier': 'error' 
      } 
  //eslintrc.cjs 파일에 추가해줍니다.

StyleLint란?

css, scss, css-in-js 와 같은 스타일에 규칙을 정의할 수 있는 lint입니다.

• 스타일 에러를 방지하여, 스타일이 적용되지 않을 확률을 줄여줍니다.

• 스타일 규칙을 적용하여 협업시에 스타일을 규정하도록 도와줍니다.

• 스타일 작성 순서를 정해줍니다.

StyleLint 사용법

yarn add -D

stylelint-config-styled-components

• stylelint에서 styled-components와 겹치거나 충돌하는 규칙을 삭제합니다.

stylelint-config-recommended

• 추천되는 stylelint 규칙을 적용합니다.

postcss postcss-syntax @stylelint/postcss-css-in-js

• css-in-js를 위한 스타일 변환 도구입니다.

styleint-config-clean-order

• 규칙에 따라 css를 정렬합니다.

StyleLint 적용법

.stylelintrc.json 파일을 생성하여 적용시켜줍니다. (.cjs 파일로 만들어도 상관없음)

//.stylelintrc.json
{
  "processors": ["stylelint-processor-styled-components"],
  "extends": [
    "stylelint-config-recommended",
    "stylelint-config-styled-components",
    "stylelint-config-concentric-order",
    "stylelint-config-standard"
  ],
  "overrides": [
    {
      "files": ["**/*.{ts,tsx}"],
      "customSyntax": "@stylelint/postcss-css-in-js"
    }
  ],
  "rules": {
    "color-named": "never",
    "at-rule-empty-line-before": "always",
    "property-no-vendor-prefix": null
  }
}

Prettier와 StyleLint 함께 사용하기

충돌을 방지하기 위해 두가지 모듈을 설치해줘야 합니다.

1. stylelint-config-prettier - Prettier와 충돌하는 StyleLint의 규칙들을 비활성화합니다.

2. stylelint-prettier - Prettier의 규칙들을 StyleLint의 규칙으로 추가합니다.

이후 .stylelintrc.json 파일에 추가해줍니다.

{
  "extends": [
    "stylelint-config-prettier" // 충돌 방지
  ]
  
  // prettier 규칙 stylelint에 추가
  "plugins": ["stylelint-prettier"],  
  "rules": {
    "prettier/prettier": true ]
  }
}

결론

프로젝트 초기 세팅이 참 어렵고 충돌이 많이 납니다. yarn을 2버전 이상으로 실수로 업데이트를 했더니 자동으로 yarn berry 로 설정이 되어 vite + typescript로 프로젝트를 생성했을 때 오류가 발생했는데 여기다 eslint, prettier, stylelint 까지 적용시키니 도저히 어디서 나는 오류인지를 몰라 한참 고생했네요..

다음 기회에 좀 더 일찍 초기세팅을 마치고 각 기능들을 직접 몸소 체험해보고 싶습니다.

감사합니다.