[초기세팅] eslint, prettier, stylelint?

이번 주 아티클은 prettier, eslint, styleLint에 대해서 알아보는 시간을 가지자!

이는 보통, 초기세팅에 사용되는데! 그럼 왜 사용해야할까?

우리가 사용해야하는 이유!

우리는 프로젝트에서 보통 많은 사람들과 협업을 하면서 진행을 한다.

여기서, 각자의 코드 스타일이 모두 다를텐데,

이런 경우 다른 사람들의 코드를 볼 때,

이해하기 힘든 부분들이 생기기 마련이고, 유지보수의 면에서 어려움을 겪게 된다.

그래서 우리는 프로젝트에서 일관성 있는 코드를 유지하기 위해서

ESLint, Prettier, StyleLint를 사용하게 된다.

조금 더 각각의 라이브러리들이 어떤 역할을 주로 하는지 살펴볼까?

prettier

가장 먼저 prettier는 우리가 깔끔한 코드와 협업을 위한 일관성 있는 코드 스타일을 유지하는데 도움을 준다.

즉, Prettier는 일관적인 코드 스타일을 유지할 수 있게 도와주는 역할이다.

그럼 일관적인 코드 스타일의 대표적인 몇 가지를 알아보면,

• 줄바꿈

• 공백

• 들여쓰기

등 많은 코드 스타일들을 유지할 수 있게 도와준다.

ESLint

ESLint는 ES + Lint의 합성어이다.

ES는 Ecma Script, Lint는 에러가 있는 코드에 표시를 달아놓는 것을 의미한다.

즉, 우리가 사용하는 javascript, typescript 문법에서 에러를 표시해주는 도구이다.

코드를 작성하면서 문법상의 오류가 생기는 것을 방지하고, 일관된 코드 스타일로 코드가 작성될 수 있도록 도와주는 역할을 한다.

사용법

나는 이번 합동세미나에서 협업을 진행해야하기 때문에 4주차 과제에서도 미리 도입해서 사용해봤다!

간단하게 사용방법과 적용법 그리고 여러가지 유용한 옵션들에 대해서 살펴보자.

prettier

설치

yarn add -D prettier
// 다른 패키지 매니저를 사용한다면 다르게 그 패키지 매니저에 맞게 사용하면 됩니다!

여기서 -D 라는 옵션도 간단하게 알아보자면,

-D 옵션으로 설치하는 이유: package.json에 개발 시에만 사용하는 개발 의존성(devDependencies)으로 기록되게 된다. 개발 의존성으로 설치된 패키지는 --production 옵션을 통해 운영 버전에서는 설치되지 않게 할 수 있다.

이렇게 개발 시에만 사용하는 의존성으로 등록할 수 있기 때문이다!

vscode extension 설치

요렇게 생긴 놈들을 다운받으면 된다 ㅎㅎ

이후 prettier의 규칙들은 나는 .prettierrc 파일에 작성했다!

{
  "printWidth": 120, // 한 라인 최대 길이
  "tabWidth": 2, // 탭 길이
  "semi": true, // 세미콜론 사용 여부
  "singleQuote": true, // single 쿼테이션 사용 여부
  "trailingComma": "all", // 여러 줄을 사용할 때, 후행 콤마 사용 방식
  "requirePragma": false, // 파일 상단에 미리 정의된 주석을 작성하고 Pragma로 포맷팅 사용 여부 지정
  "arrowParens": "always", // 화살표 함수 괄호 사용 방식
  "bracketSameLine": true, // 객체 리터럴에서 괄호에 공백 삽입 여부 
  "endOfLine": "auto" // EoF 방식, OS별로 처리 방식이 다름 
}

이렇게 작성해줬다.

더 자세한 옵션들은 공식문서에서 확인할 수 있다.

공식문서: https://prettier.io/docs/en/options

Eslint

설치

yarn add -D eslint

vscode extension 설치

이렇게 생긴 놈을 다운받자!

이후, 나는 eslint.json 파일에 작성했다!

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "plugins": ["@typescript-eslint", "react", "react-hooks", "import", "jsx-a11y"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:import/recommended",
    "plugin:jsx-a11y/recommended", // jsx 접근성 규칙에 대한 검사기
    "plugin:prettier/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest", // 사용할 ECMAScript 버전을 설정
    "ecmaFeatures": {
      // ECMAScript의 언어 확장 기능을 설정
      "jsx": true // ECMScript 규격의 JSX 사용 여부
    },
    "sourceType": "module"
  },
  "ignorePatterns": ["build", "dist", "public"], // lint 무시 파일 정하기

  "rules": {
    "react/jsx-filename-extension": ["warn", { "extensions": [".tsx"] }], // "warn": 규칙을 경고로 사용
    "react/react-in-jsx-scope": "off", // react 17부턴 import react가 필요없는데 off해두지 않으면 에러뜸
    "react/jsx-uses-react": "off",

    "no-duplicate-imports": "error", // 중복 Import 금지
    "no-console": ["warn", { "allow": ["warn", "error", "info"] }], // 콘솔은 확인 뒤 지우기
    "no-unused-vars": "error", // 사용하지 않는 변수 error처리
    "no-multiple-empty-lines": "error", //공백 금지
    "no-undef": "error", // 정의 안 한 변수 사용 x
    "indent": "off", // 프리티어 충돌로 인한 OFF
    "no-trailing-spaces": "error", // 쓸데없는 공백 없애기
    "import/newline-after-import": ["error", { "count": 1 }], // import 구문들 뒤에 한 칸 띄우고 코드 작성
    "react-hooks/rules-of-hooks": "error", // 리액트 훅의 순서를 지키게끔 한다. (React는 Hook이 호출되는 순서에 의존하기 때문에)
    "arrow-parens": ["error", "always"], // arrow-function 인자가 2개 이상이면 괄호 필수
    "no-multi-spaces": "error", // 스페이스 여러개 금지
    "import/no-unresolved": "off", // 타입스크립트에서 경로를 제대로 잡지 못할 때 사용 or  eslint-import-resolver-typescript 설치

    "import/order": [
      "error",
      {
        "groups": [["builtin", "external"], "internal", ["parent", "sibling"], "index"], //import 순서를 고정. builtin- 외부- 내부
        "pathGroups": [
          // react 컴포넌트가 builtin 뒤에 (external import 앞에 나오도록 설정)
          // { "pattern": "react", "group": "builtin", "position": "after" },
          // { "pattern": "react-dom", "group": "builtin", "position": "after" },
          { "pattern": "./**", "group": "internal" }, // './'로 시작하는 상대 경로 파일은 internal 그룹에 속하도록 설정
          { "pattern": "../**", "group": "parent", "position": "before" } // '../'로 시작하는 상위 경로 파일은 parent 그룹에 속하도록 설정
        ],
        "pathGroupsExcludedImportTypes": ["react", "react-dom"], // pathGroups가 올바르게 적용하기 위해.. (확실치 않음)
        "alphabetize": {
          "order": "asc", // 알파벳 순서 정렬 방식
          "caseInsensitive": true // 알파벳 대소문자 구분
        },
        "newlines-between": "always" // group들 사이마다 개행 적용 (group 내부에서 개행 적용 불가)
      }
    ]
  }
}

주석을 한 것 처럼 다양한 rules들을 적용할 수 있다!

그리고 나는 여러 플러그인들을 사용했다.

eslint-config-airbnb-base: 에어비엔비 린트 플러그인
eslint-config-next: Next.js 전용 린트 플러그인
eslint-plugin-react: 리액트 전용 플러그인
eslint-plugin-react-hooks: React Hooks의 규칙을 강제해주는 플러그인
eslint-plugin-import: ES2015+의 import/export 구문을 지원
eslint-plugin-jsx-a11y: JSX 내의 접근성 문제에 대해 즉각적인 AST린팅 피드백을 제공
eslint-plugin-prettier: 린트 위에 사용할 프리티어 플러그인
eslint-config-prettier: 요건 린트 설정과 중복되는 부분이 있으면 프리티어 룰에서 제외하는 플러그인
@typescript-eslint/eslint-plugin: : 타입스크립트 전용 린트

위와 같은 것도 yarn add 로 추가해서 eslint 파일에 작성하면 사용 가능하니

프로젝트에 필요로 한 각 플러그인은 npm이나 yarn을 통해서 설치하면 된다.

prettier와 eslint

yarn add -D eslint-plugin-prettier eslint-config-prettier 

Prettier와 ESLint를 같이 사용하려면 위 명령어를 사용해야 한다.

ESLint 적용이 안된다면 ?

참고: https://tesseractjh.tistory.com/306

단축키로 설정파일을 연다!

• window 단축키: ctrl + shift + p

• mac: ⌘ + ⇧ + p

• User Settings 파일은 vscode에 로그인한 사용자에 대해 나타난다. 그래서 사용자에게 세팅값이 동기화된다고 한다. 다른 기기의 vscode에서 동일한 계정으로 로그인하면 설정 파일도 그대로 적용된다!

• Workspace Settings 파일은 현재 작업공간에만 적용된다.

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": "always",
    "source.fixAll.stylelint": "explicit"
  },
  "stylelint.enable": true,
  "stylelint.validate": ["css", "less", "postcss", "typescript", "typescriptreact"],
  "typescript.updateImportsOnFileMove.enabled": "always",
  "files.autoSaveDelay": 600,
  "files.autoSave": "afterDelay",
  "editor.formatOnSave": true

StyleLint

Stylelint란 CSS Lint 툴 중 하나이다.

위에서 Lint가 코드의 에러를 잡아주는 것이라고 말했는데,

간단히 CSS의 오류를 잡아주는 것이라고 생각하면 된다.

사용법

설치

yarn add -D stylelint stylelint-config-standard stylelint-config-styled-components postcss postcss-syntax @stylelint/postcss-css-in-js stylelint-config-clean-order

vscode extension 설치

요렇게 생긴 놈들을 다운받으면 된다 ㅎㅎ

이후 StyleLint의 규칙들은 나는 .stylelintrc 파일에 작성했다!

{
  "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", // @규칙(예: @media, @import, @keyframes 등) 앞에 항상 빈 줄
    "property-no-vendor-prefix": null // CSS 속성 앞에 접두사를 붙이지 말라는 규칙
  }
}

rules에 여러 지켜야할 여러 규칙들을 적용해줄 수 있다.

마찬가지로 공식문서에서 여러 규칙들을 확인할 수 있으니 참고하면 좋겠다!

공식문서: https://stylelint.io/user-guide/rules