도구

ESLint

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

Yarn Script

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

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

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

매뉴얼 변경이 필요한 경우, 변경 디렉터리이 콘솔로 전송됩니다.

caution
전역 규칙 업데이트에만 사용을 제한하십시오. 그렇지 않으면 변경 내용이 거대한 MR(Merge Request)로 이어질 수 있습니다.

새 파일에서 ESLint 비활성화

새 파일을 만들 때 ESLint를 비활성화하지 마십시오. 기존 파일은 레거시 호환성 이유로 이미 비활성화되어 있을 수 있지만, 리팩토링 과정에 있습니다.

특정 ESLint 규칙을 비활성화하지 마십시오. 기존 코드 모듈을 호출하거나 인스턴스화하는 경우에만 다음 규칙만 비활성화하세요.

이러한 규칙을 줄 단위로 비활성화하세요. 이렇게 하면 나중에 리팩토링하기 쉬워집니다. 예를 들어 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 [이름] */ 라인을 변수당 사용하세요. 

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

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

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

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

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

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

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

  • 이 함수를 사용하려는 개발자들에 대한 대안 경로를 제공하세요.
  • 마이그레이션 프로세스를 추적하는 이슈로의 링크를 제공하세요.
note
폐기된 함수를 다른 파일에 가져오면 사용 사례가 감지됩니다. 함수가 같은 파일에서 사용될 때는 감지되지 않습니다.

이후 $ yarn eslint을 실행하면 폐기된 사용 디렉터리을 얻을 수 있습니다: 

$ yarn eslint

./app/assets/javascripts/issuable_form.js
   9:10  error  폐기됨: 대신 `queryToObject`을 사용하세요. 자세한 정보는 https://gitlab.com/gitlab-org/gitlab/-/issues/283982 참조  import/no-deprecated
  33:23  error  폐기됨: 대신 `queryToObject`을 사용하세요. 자세한 정보는 https://gitlab.com/gitlab-org/gitlab/-/issues/283982 참조  import/no-deprecated
...

이 규칙에 대한 비활성화된 사례를 찾아 이 문제에서 추적할 수 있는 작동 디렉터리을 생성하기 위해 grep "eslint-disable.*import/no-deprecated" -r .를 실행하세요: 

$ 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로 포맷팅하기

  • GitLab 13.2에서 .graphql을 지원하게 되었습니다.(소개됨)

저희 코드는 Prettier를 사용하여 자동으로 형식을 지켜줍니다. Prettier는 기본 prettier 규칙에 따라 .js, .vue, .graphql, 및 .scss 파일의 형식을 맞추는 데 도움을 줍니다. .prettierrc에서 Prettier의 모든 설정을 찾을 수 있습니다.

편집기

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를 사용하여 스테이징된 파일(기준은 git diff)을 업데이트하고 필요한 변경 사항을 저장합니다. 

yarn run lint:prettier:staged

Prettier를 사용하여 스테이징된 파일(기준은 git diff)을 확인하고 매뉴얼으로 업데이트해야 하는 파일을 콘솔에 기록합니다. 

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
  },
}