[초기세팅] prettier, eslint, styleLint에 대해
협업하다 보면 서로의 코드를 봐야 하는데,
코드 스타일이 다르면 보기가 너무 힘들다.
그렇다고 하나하나 개발자가 컨벤션을 의식하면서 개발하는 것은 솔직히 거의 불가능에 가깝다고 생각한다.
따라서 협업할 때 초기 세팅은 매우 중요하다!
또한, eslint를 사용하면 오류를 보다 쉽게 찾아낼 수 있어 불필요한 시간을 줄일 수 있다.
개발 과정에서 코드의 품질과 일관성을 유지하는 데 도움이 되는
prettier, eslint, stylelint에 대해 알아보자~
Prettier
Prettier는 코드 포맷터로 코드를 일관된 스타일로 자동 정렬해 주며, 개발자가 직접 스타일을 관리할 필요를 줄여준다.
코드의 가독성을 높이고, 프로젝트 전체에서 일관된 코드 스타일을 유지하기 위해 주로 사용한다.
아래 명령어를 입력하여 설치하고 설정 파일을 작성하여 적용한다.
yarn add -D prettier이번 과제를 하기 위해 아래와 같이 .Prettierc 를 작성해주었다.
{
"semi": true, // ; 붙이기
"tabWidth": 4, // tab 들여쓰기
"printWidth": 120, // 한 최대 길이
"trailingComma": "all", // , 붙이기
"bracketSameLine": true, // '>', '}'를 이전 줄의 끝에 두기
"singleQuote": true, // 문자열 '로 감싸기
"endOfLine": "auto" // 파일 끝에 개행문자
}
vscode 확장팩을 사용하면 yarn prettier --check ./src를 실행할 필요없이 에디터에서 오류를 확인할 수 있다.
ESLint
ESLint는 JavaScript 코드에서 발견될 수 있는 문제점을 알려주는 도구이다.
코드의 문법적 오류 뿐만 아니라, 특정 코드 스타일이나 패턴을 강제할 수도 있다.
다양한 플러그인을 사용할 수 있기 때문에 새로운 규칙을 추가할 수 있고,
손쉽게 다른 회사나 사람의 설정을 도입할 수 있다는 장점이 있다고 한다.
아래 명령어를 입력하여 설치하고 설정 파일을 작성하여 적용한다.
yarn add -D eslintyarn create vite 로 프로젝트를 생성하면 .eslintrc.cjs가 자동으로 생기는데
여기에 자신이 넣고 싶은 설정들을 추가하면 된다.
아래는 이번 과제에서 적용한 eslint 이다.
module.exports = {
plugins: [
'react', // React 규칙
'prettier', // 코드 스타일 충돌 방지
'@typescript-eslint', // TypeScript 코드 규칙
'react-refresh', // 변경 코드 자동 반영
],
extends: [
'eslint:recommended', // ESLint에서 권장하는 JavaScript 규칙
'plugin:@typescript-eslint/recommended', // TypeScript 코드 권장 규칙
'plugin:react-hooks/recommended', // React Hooks 권장 규칙
'plugin:prettier/recommended', // Prettier가 관리하는 코드 스타일 규칙을 ESLint에서 무시하도록 설정
'airbnb', // Airbnb JavaScript 스타일 가이드
'plugin:import/errors', // 잘못된 import/export 구문 검출
'plugin:import/warnings', // import/export 관련 경고
'plugin:import/typescript', // TypeScript import/export
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
rules: {
'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
'linebreak-style': 0, // 개행 스타일(CRLF vs LF) 검사 비활성화
'prettier/prettier': 0, // Prettier 충돌 규칙 비활성화
'import/extensions': 0, // 파일 확장자 import 규칙 비활성화
'import/no-unresolved': 0, // import 경로 무시
'import/no-extraneous-dependencies': 0, // 테스트 또는 개발환경을 구성하는 파일에서는 devDependency 사용을 허용
'import/prefer-default-export': 0, // default export 권장 비활성화
'react/prop-types': 0, // React의 PropTypes 검사 비활성화
'react/jsx-filename-extension': [2, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }], // 파일 확장자 지정
'simple-import-sort/imports': 'error', // import 정렬
'no-multi-spaces': 'error', // 공백 중복 금지
'eol-last': ['error', 'always'], // line의 가장 마지막 줄에는 개행 넣기
'@typescript-eslint/no-unused-vars': ['error'], // 사용하지 않는 변수가 있을 경우 오류
},
parserOptions: {
parser: '@typescript-eslint/parser',
},
};
다음은 yarn eslint 파일 을 하지 않아도 자동으로 에디터에서 오류를 찾게 해주는 vscode 확장팩이다.
StyleLint
StyleLint는 CSS, SCSS 및 기타 스타일 시트 언어에 특화된 도구이다.
코드의 일관성을 유지하고, 실수를 줄이는 데 도움을 준다.
아래 명령어로 설치할 수 있다.
yarn add -D stylelint
stylelint-config-recommended // 오류 방지에 도움이 되는 규칙들
stylelint-config-concentric-order // CSS 속성 위치 수정아래는 이번 과제에서 사용한 .stylelintrc 이다.
{
"extends": ["stylelint-config-standard", "stylelint-config-styled-components"],
"plugins": ["stylelint-order"], // CSS 속성의 순서를 정의할 수 있게 하는 플러그인
"customSyntax": "postcss-styled-syntax", // styled-components와 같은 CSS-in-JS 라이브러리를 위한 구문 분석기
"overrides": [
{
"files": ["**/*.ts"],
"customSyntax": "@stylelint/postcss-css-in-js" // CSS-in-JS 스타일 구문 분석을 위한 구문 분석기
}
],
"rules": {
"declaration-empty-line-before": [
"always", // 선언 전에 항상 빈 줄
{
"ignore": ["first-nested", "after-comment", "after-declaration", "inside-single-line-block"]
}
],
"order/order": ["custom-properties", "declarations"], // 사용자 정의 속성 -> 일반 선언
"order/properties-order": [
{
"groupName": "Layout",
"emptyLineBefore": "always", // 앞에 빈 줄 추가
"noEmptyLineBetween": true, // 그룹 내 속성끼리는 빈 줄을 넣지 않음
"properties": [
"display",
"justify-content",
"align-items",
"flex-direction",
"flex-wrap",
"flex-flow",
"position",
"top",
"right",
"bottom",
"left",
"float",
"clear",
"visibility",
"overflow",
"z-index"
]
},
{
"groupName": "Box",
"emptyLineBefore": "always",
"noEmptyLineBetween": true,
"properties": [
"width",
"height",
"margin",
"padding",
"padding-top",
"padding-right",
"padding-bottom",
"padding-left",
"margin-top",
"margin-right",
"margin-bottom",
"margin-left"
]
},
{
"groupName": "Background",
"emptyLineBefore": "always",
"noEmptyLineBetween": true,
"properties": [
"border",
"background",
"background-color",
"color",
"font-style",
"font-weight",
"font-size",
"line-height",
"letter-spacing",
"text-align",
"text-indent",
"vertical-align"
]
},
{
"groupName": "Text",
"emptyLineBefore": "always",
"noEmptyLineBetween": true,
"properties": ["text-decoration", "text-align", "vertical-align"]
},
{
"groupName": "ETC",
"emptyLineBefore": "always",
"noEmptyLineBetween": true,
"properties": ["white-space"]
}
]
}
}
/* Layout 그룹: 빈 줄 후 시작 */
display: flex;
flex-direction: column;
align-items: center;
/* Box 그룹: 빈 줄 후 시작 */
width: 10rem;
height: 10rem;
margin: 1rem;
/* Background 그룹: 빈 줄 후 시작 */
color: #000000;위처럼 자동으로 정렬을 할 수 있게 된다.
그런데 yarn stylelint을 실행하면 바로 적용이 될줄 알았는데 꽤 오래 걸렸다.
resolve를 할 수 없다고 오류가 계속 떠서 오류가 나는 것들을 하나하나 설치해줬는데,
이미 설치를 한 것까지도 resolve가 되지 않았다.
알고보니 바탕화면에서 프로젝트를 생성해서 OneDrive 경로 때문에 발생한 오류였다....
위치를 바꿔주니 이 오류는 바로 해결이 되었다.
그렇다고 바로 적용이 되지는 않았고, package.json에 stylelint 구문을 작성해주니
src 아래 css, tsx 파일에 stylelint가 적용이 될 수 있었다.
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview",
"stylelint": "stylelint './src/**/*.{css,tsx}' --fix"
},
앞과 마찬가지로 위 확장팩을 사용하면 된다.
솔직히 처음 세팅하느라 쓸데없는 오류들도 많이 나와서 거의 배보다 배꼽이 더 크긴 했는데,
그래도 세팅하고 나니까 확실히 개발이 더 편해진 것 같다.
다른 더 좋은 옵션들이 있는지 더 찾아봐야 할 것 같다
