도구

ESLint

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

Yarn 스크립트

이 섹션에서는 ESLint를 사용하여 파일을 유효성 검사하고 자동 수정을 적용하는 사용 가능한 yarn 스크립트를 설명합니다.

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

yarn run lint:eslint:staged

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

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

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 규칙을 비활성화하지 마십시오. 기술적 부채를 도입하지 않으려면 다음 규칙만 비활성화하세요. - no-new - class-method-use-this

이러한 규칙을 행 단위로 비활성화하십시오. 이렇게 하면 나중에 리팩토링하기가 더 쉬워집니다. 예를 들어, eslint-disable-next-line 또는 eslint-disable-line을 사용하세요.

단일 위반을 위한 ESLint 비활성화

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

// bad
/* eslint-disable no-new */

import Foo from 'foo';

new Foo();

// better
import Foo from 'foo';

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

no-undef 규칙 및 글로벌 변수 선언

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

여러 개의 글로벌을 선언할 때 항상 각 변수당 하나의 /* global [name] */ 줄을 사용하세요. 

// bad
/* globals Flash, Cookies, jQuery */

// good
/* global Flash */
/* global Cookies */
/* global jQuery */

import/no-deprecated를 사용하여 함수 폐기

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

JSDoc 블록을 사용하여 @deprecated 태그와 함께 함수를 폐기하는 import/no-deprecated 규칙을 사용할 수 있습니다: 

/**
 * 검색 쿼리를 개체로 변환
 *
 * @param {String} query from "document.location.search"
 * @param {Object} options
 * @param {Boolean} options.gatherArrays - 배열 값을 배열로 수집
 * @returns {Object}
 *
 * ex: "?one=1&two=2" into {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  error  Deprecated: 대신에 `queryToObject`를 사용하세요. 자세한 내용은 https://gitlab.com/gitlab-org/gitlab/-/issues/283982을 참조하세요  import/no-deprecated
  33:23  error  Deprecated: 대신에 `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-deprecate
./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 스키마 및 작업을 유효성 검사하기 위해 @graphql-eslint/eslint-plugin를 사용합니다. 이 플러그인은 올바르게 작동하려면 전체 스키마가 필요합니다. 따라서 ESLint를 로컬로 실행할 때 스키마의 최신 덤프를 생성하는 것이 좋습니다. 이 작업은 ./scripts/dump_graphql_schema 스크립트를 실행하여 수행할 수 있습니다.

Prettier로 형식 지정

우리의 코드는 Prettier를 사용하여 자동으로 서식이 지정되어야 합니다. Prettier는 표준 prettier 규칙에 따라 .js, .vue, .graphql, .scss 파일의 서식을 지정합니다. 모든 Prettier 설정은 .prettierrc 파일에서 찾을 수 있습니다.

편집기

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

전역 Yarn 스크립트와 동일한 파일 유형에만 Prettier를 형식 지정하도록하고 파일 형식을 제외할 수 있습니다. 예를 들어, Visual Studio Code 설정 파일에서 파일 형식을 제외할 수 있습니다. 

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

Yarn 스크립트

다음 yarn 스크립트를 이용하여 전역 형식 지정을 수행할 수 있습니다: 

yarn run lint:prettier:staged:fix

git diff를 기반으로 모든 스테이징 파일에 대한 Prettier로 업데이트하고 필요한 변경 사항을 저장합니다. 

yarn run lint:prettier:staged

git diff를 기반으로 모든 스테이징 파일을 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
  },
}