[React] stylelint, prettier, eslint 적용하기 (작성 중)

 

 

 

 

 

 

◽ 스타일린트(Stylelint)란?

CSS, SCSS, CSS-in-JS의 코드 스타일을 검사한다.

// .stylelintrc.json
{
  "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
  "overrides": [
    {
      "files": ["**/*.tsx"],
      "customSyntax": "@stylelint/postcss-css-in-js"
    }
  ],
  "rules": {
    "function-no-unknown": [true, { "ignoreFunctions": ["/\\${/"] }]
  }
}

 

 

◽ eslint란?

코드의 퀄리티를 높여주고 코드 퀄리티를 유지해주는 도구이다. 대부분의 프로그래밍 언어에는 컴파일하는 과정에서 수행되는 Linter가 기본적으로 내장되어있지만, 인터프리터 언어인 자바스크립트는 Linter가 내장되어 있지 않아 런타임 환경에서 에러가 발생할 확률이 높다.

// .eslintrc.js
module.exports = {
  // parser: 구문 분석을 위해 사용한다. 기본적으로 babel-eslint가 있다.
  parser: '@typescript-eslint/parser',
  plugins: [
    'react', // eslint-plugin-react
    '@typescript-eslint', // @typescript-eslint/eslint-plugin
  ],
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  rules: {
    'prefer-const': ['error', { destructuring: 'all' }],
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    'react/prop-types': 'off',
  },
}

 

 

◽ 프리티어(prettier)란?

줄바꿈, 공백, 들여쓰기 등과 같은 스타일을 교정해준다.

module.exports = {
  singleQuote: true,
  semi: false,
  useTabs: false,
  tabWidth: 2,
  trailingComma: 'all',
  printWidth: 80,
  arrowParens: 'always',
}

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.