ESLint, Prettier, Stylelint
ESLint
자바스크립트 코드에서 발견되는 패턴을 식별하고 보고하는 도구이다. 코드의 오류를 찾아내고, 일관된 코딩 스타일을 유지하는 데 도움을 준다. 사용자가 정의한 규칙에 따라 코드 문제를 자동으로 수정할 수도 있다.
.eslintrc.cjs
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended',
'plugin:prettier/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 11,
sourceType: 'module',
},
plugins: ['react', 'react-hooks', '@typescript-eslint', 'prettier', 'react-refresh'],
rules: {
'prettier/prettier': 'error',
'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
},
settings: {
react: {
version: 'detect', // React 버전 자동 감지
},
},
};
필요한 패키지
yarn add --dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-prettier eslint-config-prettier prettier
eslint: ESLint 코어 라이브러리.@typescript-eslint/parser: TypeScript 코드를 분석하기 위한 파서.@typescript-eslint/eslint-plugin: TypeScript와 관련된 ESLint 규칙을 제공eslint-plugin-react: React 특화된 ESLint 규칙을 제공.eslint-plugin-react-hooks: React Hooks 규칙을 위한 ESLint 플러그인.eslint-plugin-prettier: Prettier 규칙을 ESLint 규칙으로 실행할 수 있게 해준다.eslint-config-prettier: Prettier와 충돌할 수 있는 ESLint 규칙을 끈다.prettier: 코드 포맷팅 도구
Prettier
Prettier는 코드 포맷터로, 코드의 스타일을 일관되게 만들어주는 도구이다. 사용자가 정의한 스타일 가이드에 따라 자동으로 코드의 형식을 정리하고, 읽기 쉽고 일관된 코드 스타일을 유지할 수 있도록 도와준다.
.prettierrc
{
"parser": "typescript",
"semi": true,
"useTabs": false,
"tabWidth": 2,
"printWidth": 120,
"arrowParens": "always"
}
"parser": "typescript": TypeScript 코드를 파싱하기 위한 파서를 지정한다. 이는 TypeScript 프로젝트에 Prettier를 사용할 때 필요."semi": true: 명령문 끝에 세미콜론(;)을 사용하도록 설정."useTabs": false: 들여쓰기에 탭 대신 공백을 사용하도록 설정."tabWidth": 2: 들여쓰기 크기를 2개의 공백으로 설정."printWidth": 120: 한 줄의 최대 길이를 120자로 설정. 이를 넘는 경우, Prettier가 자동으로 줄바꿈을 한다."arrowParens": "always": 화살표 함수의 매개변수를 항상 괄호로 감싸도록 설정. 예를 들어,x => x대신(x) => x로 표현된다.
Stylelint
Stylelint는 CSS, SCSS, Less 등의 스타일 시트 코드를 분석하고, 문제를 식별하며, 일관된 코딩 스타일을 유지하는 도구이다. 사용자 정의 규칙에 따라 코드 스타일 문제를 자동으로 수정할 수도 있다.
.stylelintrc
{
"extends": ["stylelint-config-standard", "stylelint-config-prettier"],
"plugins": ["stylelint-order", "stylelint-prettier"],
"overrides": [
{
"customSyntax": "@stylelint/postcss-css-in-js",
"files": ["**/*.{ts,tsx,css}"]
}
],
"rules": {
"prettier/prettier": true,
"declaration-property-unit-allowed-list": {
"/^border/": ["px"],
"font-size": ["rem", "%"]
},
"unit-allowed-list": ["%", "deg", "px", "rem", "ms", "vw", "s", "dvh", "turn"],
"declaration-empty-line-before": [
"always",
{
"ignore": ["after-comment", "after-declaration", "first-nested", "inside-single-line-block"]
}
],
"order/properties-order": [
{
"groupName": "Layout",
"emptyLineBefore": "always",
"noEmptyLineBetween": true,
"properties": [
"display",
"flex-direction",
"flex-wrap",
"flex-flow",
"gap",
"flex",
"justify-content",
"align-items",
"align-content",
"flex-basis",
"flex-grow",
"flex-shrink",
"align-self",
"visibility",
"overflow",
"overflow-x",
"overflow-y",
"float",
"clear",
"position",
"top",
"right",
"bottom",
"left",
"z-index"
]
},
{
"groupName": "Box",
"emptyLineBefore": "always",
"noEmptyLineBetween": true,
"properties": [
"width",
"min-width",
"max-width",
"height",
"min-height",
"max-height",
"margin",
"margin-top",
"margin-right",
"margin-bottom",
"margin-left",
"padding",
"padding-top",
"padding-right",
"padding-bottom",
"padding-left",
"border",
"border-top",
"border-right",
"border-bottom",
"border-left",
"border-color",
"border-radius"
]
},
{
"groupName": "Background",
"emptyLineBefore": "always",
"noEmptyLineBetween": true,
"properties": [
"background",
"background-color",
"background-image",
"background-position",
"background-repeat",
"box-shadow"
]
},
{
"groupName": "Font",
"emptyLineBefore": "always",
"noEmptyLineBetween": true,
"properties": [
"font",
"font-family",
"color",
"font-style",
"font-size",
"font-weight",
"text-align",
"vertical-align",
"line-height",
"text-transform",
"text-decoration",
"letter-spacing",
"text-indent",
"white-space"
]
},
{
"groupName": "Etc",
"emptyLineBefore": "always",
"noEmptyLineBetween": true,
"properties": ["cursor", "opacity", "animation", "transition"]
}
]
}
}필요한 패키지
yarn add --dev stylelint stylelint-config-standard stylelint-config-prettier stylelint-order stylelint-prettier @stylelint/postcss-css-in-js
stylelint: Stylelint core 패키지. CSS, SCSS, Less 등의 코드 분석 및 스타일 가이드 적용을 담당stylelint-config-standard: Stylelint의 표준 설정을 제공하는 패키지로, 일반적인 CSS 스타일 가이드를 제공stylelint-config-prettier: Prettier와 충돌할 수 있는 Stylelint 규칙을 비활성화하는 패키지. 이를 통해 Stylelint와 Prettier를 함께 사용할 때 충돌을 방지할 수 있다.stylelint-order: CSS 속성의 순서를 지정하는 Stylelint 플러그인. 이 설정에서는 특정 그룹 별로 속성의 순서를 정의하고 있다.stylelint-prettier: Prettier를 Stylelint 규칙으로 실행할 수 있게 해주는 플러그인.@stylelint/postcss-css-in-js: CSS-in-JS 문법을 위한 Stylelint 구문 분석기. 이는 JavaScript 파일 내에서 CSS를 분석할 때 필요.
모든 초기세팅 파일을 작성하고 나면
꼭 해야할 일이 있다.
setting.json에서 다음과 같은 코드를 넣어줘야 한다.
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit",
"source.fixAll.stylelint": "explicit"
},