ESLint / Prettier / Stylelint 설정

npm 패키지

# 1. prettier eslint-prettier configuration
$ npm install -D prettier eslint-config-prettier eslint-plugin-prettier

# 2. stylelint with scss, prettier 패키지 설치 
$ npm install -D stylelint stylelint-scss stylelint-config-prettier-scss 

# 3. 추가 config 패키지 설치 (recommended rules, smacss property sort order)
$ npm install -D stylelint-config-recommended-scss stylelint-config-property-sort-order-smacss

CRA에는 eslint가 내장되어있기에 eslint는 추가 설치할 필요가 없습니다. 따라서, eslint 추가 설정을 위한 패키지만 설치해주고 package.json의 devDependencies에 아래와 같이 추가가 되어있는지 확인하기

// package.json

"devDependencies": {
  "eslint-config-prettier": "^8.1.0",
  "eslint-plugin-prettier": "^3.4.1",
  "prettier": "^2.7.1",
  "stylelint": "^14.13.0",
  "stylelint-config-prettier-scss": "^0.0.1",
  "stylelint-config-property-sort-order-smacss": "^9.0.0",
  "stylelint-config-recommended-scss": "^7.0.0",
  "stylelint-scss": "^4.3.0",
},

팀 내의 공용 stylelint를 적용하기 위한 패키지들입니다. stylelint는 .css파일만 linting 할 수 있습니다. .scss파일을 linting하기 위해서 stylelint-scss 를 추가하고, prettier와의 충돌을 피하기 위해 stylelint-config-prettier-scss를 추가해주세요.

패키지 설명

• prettier : ESLint 등 코드 포맷터의 설정에 맞게 코드 스타일을 자동으로 맞춰주기 위해서 사용하는 패키지
• eslint-config-prettier : prettier와 출돌하는 eslint규칙을 비활성화하는 패키지
• eslint-plugin-prettier : prettier를 eslint 규칙으로 실행하고 차이점을 eslint에게 전달하는 패키지
• stylelint : stylelint 사용을 위해 설치해야할 기본 패키지
• stylelint-scss : .scss 파일을 linting 하기 위해 설치해야할 패키지
• stylelint-config-prettier-scss : prettier와 충돌되는 stylelint규칙을 비활성화하는 패키지
• stylelint-config-recommended-scss, stylelint-config-standard-scss : stylelint에서 표준으로 제공하는 scss규칙 패키지 둘 중 하나 선택하여 설치 recommended가 느슨한 rule, standard가 엄격한 rule
• stylelint-config-property-sort-order-smacss : 현재 위코드 recommended style property sort order를 지원하는 패키지
  ( style property sort order는 smacss, rational, recess 등이 있습니다. 각 팀의 컨벤션에 맞추어 설정해주세요)

추천 세팅

.vscode/settings.json

프로젝트 최상위에 .vscode 폴더를 생성하여, settings.json 파일을 만들어 아래의 코드를 입력해주세요.

// .vscode/settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "css.validate": false,
  "scss.validate": false,
  "stylelint.validate": ["css", "scss", ".module.scss"],
  "stylelint.enable": true,
  "javascript.format.enable": false,
  "eslint.alwaysShowStatus": true,
  "files.autoSave": "onFocusChange"
}

.eslintrc

// .eslintrc

{
  "extends": ["react-app", "plugin:prettier/recommended"],
  "rules": {
    "no-var": "warn", // var 금지
    "no-multiple-empty-lines": "warn", // 여러 줄 공백 금지
    "no-console": ["warn", { "allow": ["warn", "error"] }], // console.log() 금지
    "eqeqeq": "warn", // 일치 연산자 사용 필수
    "dot-notation": "warn", // 가능하다면 dot notation 사용
    "no-unused-vars": "warn", // 사용하지 않는 변수 금지
    "react/destructuring-assignment": "warn", // state, prop 등에 구조분해 할당 적용
    "react/jsx-pascal-case": "warn", // 컴포넌트 이름은 PascalCase로
    "react/no-direct-mutation-state": "warn", // state 직접 수정 금지
    "react/jsx-no-useless-fragment": "warn", // 불필요한 fragment 금지
    "react/no-unused-state": "warn", // 사용되지 않는 state
    "react/jsx-key": "warn", // 반복문으로 생성하는 요소에 key 강제
    "react/self-closing-comp": "warn", // 셀프 클로징 태그 가능하면 적용
    "react/jsx-curly-brace-presence": "warn" // jsx 내 불필요한 중괄호 금지
  }
}

.prettierrc

// .prettierrc

{
  "tabWidth": 2, 
  "endOfLine": "lf", 
	"arrowParens": "avoid", 
	"singleQuote": true,
}

.stylelintrc.js

// .stylelintrc.js

module.exports = {
  extends: [
    'stylelint-config-recommended-scss', 
    // scss standard rule 적용 (recommended로 설치했다면 recommended로 standard로 설치 했다면 standard로 입력해주세요)
    'stylelint-config-prettier-scss',
     // prettier와 충돌하는 부분을 해결
    'stylelint-config-property-sort-order-smacss', // SMACSS 기반으로 속성 정렬
  ],
  plugins: ['stylelint-scss'], // scss 문법을 위한 플러그인
  ignoreFiles: ['src/styles/reset.scss', 'src/styles/common.scss'], // reset과 common scss는 ignore합니다.
  rules: {
    'at-rule-no-unknown': null, 
    // scss를 사용하기 때문에 css영역에선 null로 처리합니다.
    'selector-class-pattern': '^([a-z][a-z0-9]*)(-[a-z0-9]+)*$', 
    // Team내 컨벤션으로 수정 (현재 kebab-case)
    'keyframes-name-pattern': /^([a-z][a-z0-9]*)(-[a-z0-9]+)*$/, 
    // Team내 컨벤션으로 수정 (현재 kebab-case)
    'max-nesting-depth': 3, // 최대 nesting은 3depth 까지
    'no-descending-specificity': null,
    'string-quotes': 'single', // single quotes
    'scss/at-rule-conditional-no-parentheses': null, 
    // 조건부 @ 규칙(if, elsif, while)(자동 수정 가능)에서 괄호를 허용합니다.
  },
};

자세한 rul들은 stylelint 에서 확인 가능
[참고] https://maximgatilin.github.io/stylelint-config/