Portfolio

/.vsCode/settings.json

기본 환경 설정을 먼저 팀원들과 통일화하는 것이 공통의 코드를 작성하기 용이하므로 핵심 설정들을 공유하였습니다.


{
  "eslint.format.enable": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true,
  },
  "stylelint.enable": true,
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
  },
}

ESLint

먼저 저희는 다음 패키지를 설치하였습니다.


eslint
eslint-config-prettier

이유는 다음과 같습니다.

eslint

ESLint의 핵심 패키지입니다. 해당 패키지는 CLI를 제공하기 때문에 세부적인 패키지들은 따로 설치하지 않고 init 명령어를 통해 간단히 세팅 가능했습니다.

eslint-config-prettier

prettier과 충돌하는, 필요하지 않은 모든 규칙들을 끌 수 있습니다.

이후, 세팅은 다음과 같이 하였습니다.


yarn eslint --init

ERROR!

ESLint의 버전이 현재 Airbnb rule과 충돌하여, 에러가 발생했습니다. 이를 다음 이슈 해결 방법처럼 해결하였습니다.

📃

ESLint Issue

Prettier

ESLint의 린터 역할과 별도로, 포맷팅에 대한 컨벤션을 설정해주기 위해 포맷터로써 Prettier을 사용했습니다.


yarn add -D prettier

세부 설정

저희 팀이 가장 중요하게 생각했던 것은 의미 없는 컨벤션은 지정하지 말자는 것이었습니다.

따라서 가장 좋은 컨벤션은 먼저, 공식문서에서 추천하는 컨벤션이라는 것에 동의하였습니다.

때문에 해당 포맷팅 기준에 대해서 협의하여, 다음 4가지를 설정했습니다.


{
    "trailingComma": "es5",
    "tabWidth": 2,
    "semi": true,
    "singleQuote": true
}

StyleLint

이후 저희는 css에도 컨벤션을 적용하기 위해 stylelint를 설정하였고, 다음을 설치하였습니다.


stylelint
stylelint-config-concentric-order
stylelint-config-prettier
stylelint-config-sass-guidelines
stylelint-prettier

설치한 이유는, 다음 패키지의 특징을 서술함으로써 알 수 있습니다.

stylelint

스타일린트를 쓰기 위한 핵심 패키지입니다.

stylelint-config-sass-guidelines

이 패키지가 있어야, scss구문을 파싱할 수 있습니다.

stylelint-config-prettier

이후 Prettier와 사용할 때, prettier와 충돌할 수 있는 여지가 발생합니다.

이때 stylelint-config-prettier은 충돌할 수 있는 규칙들을 모두 끌 수 있습니다.

stylelint-prettier

Prettier의 규칙들을 StyleLint의 규칙으로 인식 가능하게 해주는 패키지입니다.

stylelint-config-concentric-order

많은 규칙들이 있겠지만, 저희의 style 작성 순서는 Concentric CSS를 기반으로 작성하기로 하였습니다. 따라서 이에 관한 세부적인 order convention을 쉽게 사용하기 위해 해당 패키지를 채택했습니다.

.stylelintrc.js


module.exports = {
  extends: [
    'stylelint-config-sass-guidelines',
    'stylelint-config-concentric-order',
    'stylelint-prettier/recommended',
  ],
  plugins: ['stylelint-scss', 'stylelint-order'],
  rules: {
    'order/properties-alphabetical-order': null,
    'prettier/prettier': true,
  },
};

현재 보면 2가지 rule을 별도로 추가하였습니다.