[초기세팅]prettier, eslint, styleLint에 대해서

✅ESLint란?

ESLint는 EcmaScript(javascript) 와 Lint를 합친 것으로 여기서 Lint는 에러가 있는 코드에 표시를 달아놓는 것을 의미한다.

즉, 자바스크립트 코드에서 발견될 수 있는 패턴이나 코드 스타일 문제를 식별하기 위해 사용되는 정적 코드 분석 도구이다.

뿐만 아니라 전반적인 코딩스타일까지 지정할 수 있으므로 협업에 유용하다.

✅ESLint 주요 기능

규칙 설정: 특정 코딩 규칙과 스타일 가이드를 설정할 수 있으며, ESLint는 이러한 규칙에 따라 코드를 검사한다.

사용자 정의 가능: 표준 규칙 외에도 개발자는 프로젝트의 특정 요구에 맞게 규칙을 사용자 정의할 수 있다.

자동 수정: 일부 오류는 ESLint에 의해 자동으로 수정될 수 있으며, 이 기능은 코드 리팩토링을 빠르고 효율적으로 만든다.

플러그인 및 확장성: ESLint는 다양한 플러그인을 지원하며, React, Vue.js와 같은 특정 라이브러리나 프레임워크에 특화된 규칙을 추가할 수 있습니다.

통합 도구: 대부분의 개발 환경과 편집기에 통합될 수 있어 개발 과정에서 실시간으로 코드 문제를 식별하고 수정할 수 있습니다.

✅ESLint 사용하기

ESLint는 프로젝트 코드 단에서 사용하는게 아니라, VSCode, WebStorm과 같은 Editor(IDEA)에서 적용해서 사용합니다.

VS Code

아래와 같이 프로젝트 내에서 개발 환경에서 ESLint를 의존 추가합니다.

ESLint 설치(+필요한 경우 패키지 설치)

yarn add -D eslint

3. 이제는 프로젝트 루트 경로의 .eslintrc.js 파일의 설정을 통해서 프로젝트의 규칙을 명시할 수 있다. (.eslintrc.json 파일 생성 (기존에 있는 .eslintrc.cjs 삭제)

예시)

{
// 실행 환경 설정"env": {
  "browser": true,
  "es2021": true,
  "node": true,
  "es6": true
},
"plugins": [
  "react",
  "react-hooks",
  "@typescript-eslint",
  "@typescript-eslint/eslint-plugin",
  "simple-import-sort",
  "jsx-a11y",
  "prettier",
		"import",
],
"extends": [
  "eslint:recommended",
  "plugin:react/recommended",
  "plugin:@typescript-eslint/eslint-recommended",
  "plugin:@typescript-eslint/recommended",
  "plugin:react-hooks/recommended",
  "plugin:prettier/recommended",
  "plugin:import/recommended",
  "plugin:import/typescript",
  "plugin:jsx-a11y/recommended"
],
"rules": {
  "indent": ["error", 2, { "SwitchCase": 1 }], // 들여쓰기 몇 칸? 기본 2칸으로 하되, switch문에서는 1칸으로 지정
  "quotes": ["off", "single"], // 쌍따옴표가 아닌 홑따옴표를 사용
  "semi": ["error", "always"], // semi colon을 강제함
  "no-multiple-empty-lines": ["error", { "max": 1, "maxEOF": 0 }],
  "no-multi-spaces": "error", // 스페이스 여러개 금지
  "comma-dangle": ["error", "always-multiline"], // 두 줄 이상의 경우에는 후행 쉼표를 항상 사용, 한 개 일 때는 사용하지 않음
  "object-curly-spacing": ["error", "always"], // 객체 괄호 앞 뒤 공백 추가
  "space-in-parens": ["error", "never"], // 일반 괄호 앞 뒤 공백 추가
  "computed-property-spacing": ["error", "never"], // 대괄호 앞 뒤 공백 추가하지 않음
  "comma-spacing": ["error", { "before": false, "after": true }], // 반점 앞 뒤 공백: 앞에는 없고, 뒤에는 있게
  "eol-last": ["error", "always"], // line의 가장 마지막 줄에는 개행 넣기
  "no-tabs": ["error", { "allowIndentationTabs": true }], // \t의 사용을 금지하고 tab키의 사용은 허용
  "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
  "react-hooks/exhaustive-deps": "off", // Checks effect dependencies
  "react/react-in-jsx-scope": "off", // import React from "react"가 필수였던 시기에 필요한 규칙이므로 off
  "simple-import-sort/imports": "error", //import 정렬 강제
  "simple-import-sort/exports": "error", //export 정렬 강제
  "no-unused-vars": "warn",
  "no-console": "warn",
  "import/order": [
    "error",
    {
      // 1. node "builtin" modules
      //import fs from 'fs';
      // 2. "external" modules
      //import _ from 'lodash';
      // 3. "internal" modules
      //import foo from 'src/foo';
      "groups": ["builtin", "external", ["parent", "sibling"], "index"], // import 되는 순서 정의
      "pathGroups": [
        {
          "pattern": "react*", // path가 react로 시작하면
          "group": "external", // external 앞에
          "position": "before"
        }
      ],
      "alphabetize": {
        "order": "asc",
        "caseInsensitive": true
      },
      "newlines-between": "always" // group들 사이마다 개행 적용 (group 내부에서 개행 적용 불가)
    }
  ]
},
"parser": "@typescript-eslint/parser",
"parserOptions": {
  "ecmaFeatures": {
    "jsx": true
  },
  "ecmaVersion": "latest",
  "sourceType": "module"
},

"settings": {
  "import/resolver": {
    "node": {
      "moduleDirectory": ["node_modules", "src/"],
      "extensions": [".js", ".jsx", ".ts", ".tsx", ".d.ts"]
    }
  },
  "react": {
    "version": "detect"
  },
  "import/parsers": {
    "@typescript-eslint/parser": [".ts", ".tsx", ".js"]
  }
}
}

옵션(option)들을 살펴보자.

• env: 코드가 실행될 환경을 지정합니다. 각 환경은 특정 글로벌 변수를 예상합니다 (예: browser, node, es6, jquery 등).

• extends: 다른 설정 파일이나 공유 설정을 확장할 수 있습니다. 이를 통해 일반적인 규칙 세트를 쉽게 적용할 수 있습니다. 예를 들어, eslint:recommended 또는 airbnb-base를 포함할 수 있습니다.

• globals: 전역 변수를 명시적으로 선언하여, ESLint가 이를 미리 정의된 변수로 인식하게 합니다. 변수 뒤에 false를 설정하면, 변수가 쓰기 금지(read-only)임을 의미합니다.

• parser: ESLint가 코드를 분석할 때 사용할 구문 분석기를 지정합니다.

• parserOptions: 구문 분석기에 전달할 옵션을 설정합니다. 예를 들어, ecmaVersion으로 ECMAScript 버전을 지정하거나, sourceType을 module로 설정하여 ES 모듈 구문을 사용할 수 있습니다.

• plugins: 추가 ESLint 플러그인을 포함합니다. 플러그인은 추가적인 규칙이나 기능을 제공할 수 있습니다.

• rules: 프로젝트에 적용할 규칙을 설정합니다. 각 규칙에 대해 off(0), warn(1), error(2)의 세 가지 수준을 지정할 수 있습니다.

• settings: ESLint에 프로젝트에 대한 정보를 제공하거나 규칙을 미세 조정할 때 사용합니다.

✅Prettier란?

소스 코드를 자동으로 포맷팅해주는 도구이다.

프로그래밍 언어에서 일관된 코드 스타일을 유지하도록 돕는 역할을 한다.

특히 여러 사람이 함께 작업하는 프로젝트에서 유용하다.

✅Prettier 주요 기능

일관된 스타일 유지: Prettier는 코드 전체에서 일관된 포맷을 적용하여, 프로젝트의 가독성과 유지 보수성을 향상시킨다.

언어 다양성 지원: JavaScript, JSX, Angular, Vue, Flow, TypeScript, CSS, Less, SCSS, HTML, JSON, GraphQL 등 다양한 언어와 기술을 지원한다.

통합 개발 환경(IDE) 플러그인: Visual Studio Code, Atom, WebStorm 등 대부분의 주요 코드 에디터와 IDE에 플러그인 형태로 통합되어 사용이 가능하다.

커스텀 설정: 줄 너비, 탭의 크기, 세미콜론 사용, 인용부호의 종류 등 여러 스타일 옵션을 사용자가 직접 설정할 수 있다.

커맨드 라인 인터페이스(CLI): Prettier는 커맨드 라인 도구로도 사용할 수 있어, 개발자는 터미널을 통해 직접 코드를 포맷팅할 수 있다.

자동 포맷팅: 코드를 저장할 때 자동으로 포맷팅되도록 설정할 수 있어, 개발 과정에서 코드 스타일을 신경 쓸 필요가 없다.

프리커밋 훅: Git 프리커밋 훅과 연동하여, 커밋되기 전에 자동으로 코드를 검사하고 포맷팅할 수 있다. 이를 통해 코드 저장소에 일관된 스타일의 코드만이 유지된다.

✅Prettier 사용하기

1.설치

prettier설치

yarn add -D prettier

Prittier VS Code extension 설치

2. .prettierrc 설정

예시)

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

+prettier 옵션 종류

{
"arrowParens": "avoid", // 화살표 함수 괄호 사용 방식"bracketSpacing": false, // 객체 리터럴에서 괄호에 공백 삽입 여부 "endOfLine": "auto", // EoF 방식, OS별로 처리 방식이 다름 "htmlWhitespaceSensitivity": "css", // HTML 공백 감도 설정"jsxBracketSameLine": false, // JSX의 마지막 `>`를 다음 줄로 내릴지 여부 "jsxSingleQuote": false, // JSX에 singe 쿼테이션 사용 여부"printWidth": 80, //  줄 바꿈 할 폭 길이"proseWrap": "preserve", // markdown 텍스트의 줄바꿈 방식 (v1.8.2)"quoteProps": "as-needed" // 객체 속성에 쿼테이션 적용 방식"semi": true, // 세미콜론 사용 여부"singleQuote": true, // single 쿼테이션 사용 여부"tabWidth": 2, // 탭 너비 "trailingComma": "all", // 여러 줄을 사용할 때, 후행 콤마 사용 방식"useTabs": false, // 탭 사용 여부"vueIndentScriptAndStyle": true, // Vue 파일의 script와 style 태그의 들여쓰기 여부 (v1.19.0)"parser": '', // 사용할 parser를 지정, 자동으로 지정됨"filepath": '', // parser를 유추할 수 있는 파일을 지정"rangeStart": 0, // 포맷팅을 부분 적용할 파일의 시작 라인 지정"rangeEnd": Infinity, // 포맷팅 부분 적용할 파일의 끝 라인 지정,"requirePragma": false, // 파일 상단에 미리 정의된 주석을 작성하고 Pragma로 포맷팅 사용 여부 지정 (v1.8.0)"insertPragma": false, // 미리 정의된 @format marker의 사용 여부 (v1.8.0)"overrides": [ 
  {
    "files": "*.json",
    "options": {
      "printWidth": 200
    }
  }
], // 특정 파일별로 옵션을 다르게 지정함, ESLint 방식 사용
}

✅stylint란?

stylelint 는 CSS 코드의 정적 분석 도구로서, 스타일 시트의 코드 품질을 향상시키고 일관성을 유지하는 데 도움을 주는 라이브러리 입니다.

✅stylint 주요 기능

스타일 규칙 검사: 코드가 일련의 규칙 또는 스타일 가이드를 따르는지 확인한다. 이 규칙은 사용자가 직접 정의하거나 여러 플러그인과 확장을 통해 추가할 수 있다.

자동 수정: 일부 스타일 위반은 stylelint에 의해 자동으로 수정될 수 있으며, 이는 개발 과정을 보다 효율적으로 만든다.

확장 가능성: 여러 플러그인을 통해 기능을 확장할 수 있으며, 커뮤니티에서 제공하는 많은 규칙과 함께 사용자 지정 규칙을 만들 수도 있다.

✅stylint 사용하기

1. 설치

yarn add stylelint --dev

2. .css-in-js를 위해 postcss 설치

emotion.js를 추가적으로 사용하고 있기 때문에 추가적인 세팅이 필요하다.emotion.js와 같은 css-in-js를 사용하기 위해서는 postcss postcss-syntax를 설치한다.

yarn add postcss postcss-syntax @stylelint/postcss-css-in-js --dev

3..stylelintrc.json 작성하기

stylelint를 편리하게 사용하기 위해 몇가지 확장을 설치

• stylelint-config-standard : stylelint standard 규칙 적용

• stylelint-config-prettier : prettier과 충돌하는 규칙들 제거

• stylelint-config-clean-order : 규칙에 따라 css 정렬

yarn add stylelint-config-standard stylelint-config-prettier stylelint-config-clean-order --dev

.stylelintrc.json

{
"extends": [
  "stylelint-config-standard",
  "stylelint-config-prettier",
  "stylelint-config-clean-order"
],
"overrides": [
  {
    "files": [
      "**/*.tsx"
    ],
    "customSyntax": "@stylelint/postcss-css-in-js"
  }
]
}

4.vscode 자동 수정 기능 활성화하기

vscode에서 stylelint를 간편하게 사용하기 위해서 setting 파일을 작성

.vscode/settings.json

"stylelint.validate": ["css", "scss", "typescriptreact"],
"stylelint.configFile": ".stylelintrc.json",
"stylelint.packageManager": "yarn"

결론

사용법을 익혀서 일관성을 유지하고, 에러를 미리 발견하여 개발자가 보다 깨끗하고 효율적인 코드를 작성할 수 있도록 도와주는 도구들을 적극 활용하자!