도구

ESLint

우리는 ESLint를 사용하여 프런트엔드 코드 표준을 encapsulate하고 시행합니다. 우리의 구성은 gitlab-eslint-config 프로젝트에서 찾을 수 있습니다.

Yarn 스크립트

이 섹션에서는 ESLint를 사용하여 파일을 검증하고 자동 수정을 적용할 수 있는 yarn 스크립트를 설명합니다.

ESLint로 모든 스테이징된 파일(git diff 기준)을 확인하려면 다음 스크립트를 실행하세요:

yarn run lint:eslint:staged

찾은 문제 목록이 콘솔에 기록됩니다.

ESLint로 모든 스테이징된 파일(git diff 기준)에 자동 수정을 적용하려면 다음 스크립트를 실행하세요:

yarn run lint:eslint:staged:fix

수동 수정이 필요한 경우, 수정 사항 목록이 콘솔에 전송됩니다.

리포지토리의 특정 파일을 ESLint로 확인하려면 다음 스크립트를 실행하세요($PATH_TO_FILE 대체):

yarn run lint:eslint $PATH_TO_FILE

리포지토리의 모든 파일을 ESLint로 확인하려면 다음 스크립트를 실행하세요:

yarn run lint:eslint:all

찾은 문제 목록이 콘솔에 기록됩니다.

리포지토리의 모든 파일에 자동 ESLint 수정을 적용하려면 다음 스크립트를 실행하세요:

yarn run lint:eslint:all:fix

수동 수정이 필요한 경우, 수정 사항 목록이 콘솔에 전송됩니다.

경고:
전역 규칙 업데이트에만 사용을 제한하세요. 그렇지 않으면 변경 사항이 대규모 병합 요청을 유발할 수 있습니다.

새 파일에서 ESLint 비활성화

새 파일을 만들 때 ESLint를 비활성화하지 마세요. 기존 파일에는 레거시 호환성 문제로 인해 기존 규칙이 비활성화되어 있을 수 있지만, 현재 리팩토링 중입니다.

특정 ESLint 규칙을 비활성화하지 마세요. 기술적 부채를 도입하지 않기 위해 기존 코드 모듈을 호출/인스턴스화하는 경우에만 다음 규칙을 비활성화할 수 있습니다.

이러한 규칙은 한 줄 단위로 비활성화하세요. 이것은 미래의 리팩토링을 더 쉽게 만듭니다. 예를 들어, eslint-disable-next-line 또는 eslint-disable-line을 사용하세요.

단일 위반에 대한 ESLint 비활성화

단일 위반에 대해 규칙을 비활성화해야 하는 경우, 필요한 최소한의 코드 범위에 대해 비활성화하세요:

// 나쁨
/* eslint-disable no-new */

import Foo from 'foo';

new Foo();

// 더 좋음
import Foo from 'foo';

// eslint-disable-next-line no-new
new Foo();

no-undef 규칙 및 전역 변수를 선언하기

no-undef 규칙을 절대 비활성화하지 마세요. 대신 /* global Foo */로 전역 변수를 선언하세요.

여러 전역 변수를 선언할 때는 항상 변수당 하나의 /* global [name] */ 줄을 사용하세요.

// 나쁨
/* globals Flash, Cookies, jQuery */

// 좋음
/* global Flash */
/* global Cookies */
/* global jQuery */

import/no-deprecated를 통한 함수 사용 중단

우리의 @gitlab/eslint-plugin Node 모듈에는 eslint-plugin-import 패키지가 포함되어 있습니다.

우리는 JSDoc 블록과 @deprecated 태그를 사용하여 함수를 사용 중단할 수 있는 import/no-deprecated 규칙을 사용할 수 있습니다:

/**
 * 검색 쿼리를 객체로 변환
 *
 * @param {String} query "document.location.search"에서
 * @param {Object} options
 * @param {Boolean} options.gatherArrays - 배열 값을 배열로 수집
 * @returns {Object}
 *
 * 예: "?one=1&two=2"는 {one: 1, two: 2}로 변환
 * @deprecated `queryToObject`를 대신 사용하세요. 더 자세한 정보는 https://gitlab.com/gitlab-org/gitlab/-/issues/283982를 참조하세요.
 */
export function queryToObject(query, options = {}) {
  ...
}

다음 사항을 강력히 권장합니다:

  • 이 함수를 사용하려는 개발자를 위한 대체 경로를 제공합니다.
  • 마이그레이션 프로세스를 추적하는 이슈 링크를 제공합니다.

참고:
이 함수가 다른 파일로 가져오면 사용이 감지됩니다. 같은 파일 내에서 사용될 때는 감지되지 않습니다.

이 후 $ yarn eslint를 실행하면 사용 중단된 사용 목록을 제공합니다:

$ yarn eslint

./app/assets/javascripts/issuable_form.js
   9:10  오류  사용 중단됨: `queryToObject`를 대신 사용하세요. 더 자세한 정보는 https://gitlab.com/gitlab-org/gitlab/-/issues/283982를 참조하세요.  import/no-deprecated
  33:23  오류  사용 중단됨: `queryToObject`를 대신 사용하세요. 더 자세한 정보는 https://gitlab.com/gitlab-org/gitlab/-/issues/283982를 참조하세요.  import/no-deprecated
...

이 규칙이 비활성화된 사례를 grep하여 작업 목록을 생성하여 사용 중단된 사용 제거 작업을 추적할 수 있습니다:

$ grep "eslint-disable.*import/no-deprecated" -r .

./app/assets/javascripts/issuable_form.js:import { queryToObject, objectToQuery } from './lib/utils/url_utility'; // eslint-disable-line import/no-deprecated
./app/assets/javascripts/issuable_form.js:  // eslint-disable-next-line import/no-deprecated

vue/multi-word-component-names가 내 파일에서 비활성화되었습니다

단일 이름 컴포넌트는 Vue 스타일 가이드에서 권장되지 않습니다.

단일 이름 컴포넌트는 다른 HTML 컴포넌트와 혼동될 수 있기 때문에 문제가 발생합니다: 예를 들어, 컴포넌트를 <table>로 명명하면 HTML <table>이 렌더링되지 않게 됩니다.

이를 해결하기 위해서는 .vue 파일과 해당 참조의 이름을 최소한 두 개의 단어로 변경해야 합니다. 예를 들어:

  • user/table.vue는 user/users_table.vue로 변경하고 UsersTable로 불러와 <users-table />와 함께 사용할 수 있습니다.

GraphQL 스키마 및 작업 유효성 검사

우리는 @graphql-eslint/eslint-plugin를 사용하여 GraphQL 스키마와 작업을 린트합니다. 이 플러그인은 제대로 작동하기 위해 전체 스키마가 필요합니다. 따라서 ESLint를 로컬에서 실행할 때 최신 스키마 덤프를 생성하는 것이 좋습니다. 이를 위해 ./scripts/dump_graphql_schema 스크립트를 실행하면 됩니다.

Prettier로 포맷팅

우리의 코드는 스타일 가이드를 따르기 위해 Prettier로 자동으로 포맷팅됩니다. Prettier는 표준 Prettier 규칙에 따라 .js, .vue, .graphql, 및 .scss 파일을 포맷팅합니다. Prettier의 모든 설정은 .prettierrc에서 확인할 수 있습니다.

편집기

Prettier를 워크플로우에 포함하는 권장 방법은 선호하는 편집기를 해당 방식으로 설정하는 것입니다(모든 주요 편집기가 지원됨). 파일이 저장될 때마다 Prettier가 실행되도록 설정하는 것을 권장합니다. 선호하는 편집기에서 Prettier를 사용하는 방법에 대한 지침은 Prettier 문서를 참조하세요.

Prettier가 전역 Yarn 스크립트와 동일한 파일 유형(.js, .vue, .graphql, 및 .scss)만 포맷팅하도록 주의하세요. 예를 들어, Visual Studio Code 설정 파일에서 파일 형식을 제외할 수 있습니다:

  "prettier.disableLanguages": [
      "json",
      "markdown"
  ]

Yarn 스크립트

전역 포맷팅을 수행하기 위해 사용할 수 있는 Yarn 스크립트는 다음과 같습니다:

yarn run lint:prettier:staged:fix

Prettier로 모든 스테이지된 파일을 업데이트하고 필요한 변경 사항을 저장합니다.

yarn run lint:prettier:staged

Prettier로 모든 스테이지된 파일을 검사하고, 수동 업데이트가 필요한 파일을 콘솔에 기록합니다.

yarn run lint:prettier

모든 파일을 Prettier로 검사하고, 수동 업데이트가 필요한 파일을 콘솔에 기록합니다.

yarn run lint:prettier:fix

저장소의 모든 파일을 Prettier로 포맷팅합니다.

VS Code 설정

Prettier를 기본 포맷터로 선택

Prettier를 포맷터로 선택하려면 사용자 또는 작업 공간 설정에 다음 속성을 추가하세요:

{
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[graphql]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

저장 시 포맷

Prettier로 파일을 자동으로 포맷하려면, 사용자 또는 작업공간 설정에 다음 속성을 추가하세요:

{
  "[html]": {
    "editor.formatOnSave": true
  },
  "[javascript]": {
    "editor.formatOnSave": true
  },
  "[vue]": {
    "editor.formatOnSave": true
  },
  "[graphql]": {
    "editor.formatOnSave": true
  },
}