Tooling

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
전역 규칙 업데이트에만 사용을 제한하십시오. 그렇지 않으면 변경 사항이 거대한 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 [name] */ 줄을 변수당 사용하세요. 

// 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  Deprecated: Please use `queryToObject` instead. See https://gitlab.com/gitlab-org/gitlab/-/issues/283982 for more information  import/no-deprecated
  33:23  error  Deprecated: Please use `queryToObject` instead. See https://gitlab.com/gitlab-org/gitlab/-/issues/283982 for more information  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가 형식을 지정하도록 하십시오(.js, .vue, .graphql, .scss). 예를 들어, Visual Studio Code 설정 파일에서 파일 형식을 제외할 수 있습니다: 

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

Yarn Script

다음 Yarn 스크립트로 전역 형식화를 수행할 수 있습니다: 

yarn run lint:prettier:staged:fix

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

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