Prettier, ESLint, StyleLint
📍Prettier
🍀 정의
일관적인 코드 스타일을 유지할 수 있게 도와주는 툴이다.
줄바꿈이나 공백, 들여쓰기 같은 스타일을 교정해준다.
🍀 설치 및 설정
Prettier 설치
yarn add -D prettier.prettierrc 설정
{ "printWidth": 100, "tabWidth": 2, "useTabs": false, "semi": true, "singleQuote": true, "quoteProps": "as-needed", "trailingComma": "all", "bracketSpacing": true, "arrowParens": "always", "endOfLine": "auto" }포맷 체크 : prettier 옵션을 지키고 있지 않은 파일 찾기
yarn prettier --check ./src포맷팅 : 정의한 prettier 옵션을 사용해 코드 포맷팅
yarn prettier --write ./src마찬가지로 prettier 확장 프로그램을 설치하여 별도 터미널 실행 없이, 에디터에서 prettier 검사 오류를 확인할 수 있다.
🍀 속성 살펴보기
홑따옴표
prettier 는 기본적을 쌍따옴표를 사용한다.
홑따옴표를 사용하고 싶으면
singleQuote옵션을true로 설정한다.{ "singleQuote": true }
한 줄 최대 글자수
prettier는 기본적으로 한 줄에 최대 80자로 제한을 한다.
이를 늘리고 싶으면,
printWidth옵션을 사용한다!{ "printWidth": 120 }
세미콜론
prettier는 기본적으로 각 문장 뒤에 세미콜론을 자동으로 붙인다.
세미콜론을 생략하고 싶으면
semi옵션을false로 설정한다.{ "semi": false }
후행 쉼표
여러 줄에 걸쳐서 배열이나 객체, 매개변수가 작성된 경우, prettier는 마지막 요소 뒤에도 쉼표 기호를 붙인다.
이 쉼표를 제거하기 위해선, trailingComma 옵션을 none으로 설정한다.
{ "trailingComma": "none" }
화살표 함수 괄호
화살표 함수를 작성하면, prettier는 매개변수가 하나라도 매개변수 부분을 소괄호로 감싼다. 매개변수가 하나일 때, 소괄호로 감싸고 싶지 않으면,
arrowParens옵션을avoid로 준다.{ "arrowParens": "avoid" }
탭 사용
prettier는 들여쓰기를 할 때, 기본적으로 탭 문자 대신 여러 개의 공백문자를 사용한다.
만약 택 문자로 들여쓰기를 하고 싶다면,
useTabs옵션을true로 설정한다.{ "useTabs": true }
탭 너비
prettier는 기본적으로 공백 2칸을 탭 너비로 사용한다.
탭 너비를 조정하고 싶으면, tabWidth 옵션을 바꿔둔다.
{ "tabWidth": 4 }
📍ESLint
🍀 정의
자바스크립트 문법 에러를 표시하거나, 코딩 컨벤션에 위배되는 코드,
성능, 디버깅, 유지보수, 가독성 면에서 비효율적인 안티 패턴을 자동 검출하는 도구
Linting 도구 중 하나인데, ESLint는 다양한 플러그인을 사용할 수 있기 때문에, 많이 사용하는 추세라고 한다.
코딩 스타일을 잡아주기 때문에, 여러 명이 작성하더라도 한 사람이 코딩한 것처럼 통일해준단 장점이 있다.
대부분 프로그래밍 언어엔 Linter가 기본적으로 내장되어 있지만, javaScript엔 Linter가 존재하지 않아, 런타임 환경에서 에러가 발생할 확률이 높다. 그래서 Linting 도구를 사용해 에러를 감지하고 방지하는 것이다.
🍀 설치 및 설정
eslint 설치
yarn add -D eslint.eslintrc 파일 생성
eslint --init
검사 실행
yarn eslint 검사할_파일명.js검사 후 자동 코드 수정
yarn eslint 검사할_파일명.js --fix=> 이렇게 검사할 수도 있지만, 에디터 확장 프로그램을 설치해 터미널 실행 과정을 줄이고 에디터에서 검사를 확인할 수 있다.
🍀 중요한 개념 3가지
plugins
다른 사람이 만든 패키지를 가지고 오는 것을 말한다.
"plugins": [ "@typescript-eslint" ],종류가 다양하고, 여러 플러그인을 가져와 사용하는 경우가 많다.
특히, ESLint 기본 plugin, react/react hooks, typescript를 위한 plugin, 에어비앤비 lint plugin 등을 많이 사용한다!
가져온 plugin을 extends와 rule로 설정해서 사용하는 것이다!
extends
plugin pakage 규칙을 따르고 싶을 때 추가하는 것을 말한다.
"extends": [ "eslint:recommended", "plugin:@typescript-eslint/recommended" ],eslint : recommendedESLint에서 기본적으로 제공하는 rule, 별다른 설치 없이 설정이 가능하다.
recomended / strict / all 의 선택지가 존재하는데, plugin 규칙을 얼마나 따를 것인지를 의미하는 것이다! 보통은 recomended를 사용한다.
rules
plugin 규칙을 커스텀 할 수 있는 곳이다.
"rules": { "@typescript-eslint/strict-boolean-expressions": [ 2, { "allowString" : false, "allowNumber" : false } ] },extends 에서 설정하여, 기본으로 설정된 규칙도 바꾸거나, 없앨 수 있다.
🍀 옵션 더 살펴보기
root 옵션
린트(lint) 대상의 파일이 위치한 폴더 안에 설정 파일이 있는지 우선적으로 확인해보고 없으면 그 상위 폴더를 한 단계 씩 거슬러 올라가면서 설정 파일을 찾는다.
root옵션이true로 설정되어 있는 설정 파일을 만나면 더 이상 상위 폴더로 올라가지 않는다.
프로젝트 별 설정 파일 -> root 옵션 false
코드 저장소 최상위 경로 -> root 옵션 true
=> 코드 저장소의 공통 설정과 프로젝트 별 특화 설정을 분리해서 관리 가능!
env 옵션
ESLint는 기본적으로 미리 선언하지 않고 접근하는 변수에 대해서는 오류를 내기 때문에 이렇게 각 실행 환경(runtime)에서 기본적으로 제공되는 전역 객체에 대해서 설정을 통해 알려줘야 한다.
각 환경마다 전역 변수를 통해 접근이 가능한 고유한 객체(window) 들은 true로 설정해서 사용한다.
{ "env": { "browser": true, "node": true } }parser와 parserOptions 옵션
ESLint는 기본적으로 순수한 자바스크립트 코드만 이해할 수 있기 때문에 자바스크립트의 확장 문법이나 최신 문법으로 작성한 코드를 린트(lint)하기 위해서는 그에 상응하는 파서(parser)를 사용하도록 설정해줘야 한다.
타입스크립트와 JSX를 사용해 작성된 코드를 린트하도록 설정하려면 아래와 같이 해야한다.
{ "parser": "@typescript-eslint/parser", "parserOptions": { "sourceType": "module", "ecmaFeatures": { "jsx": true }, "ecmaVersion": 11, } }
settings 옵션
일부 ESLint 플러그인은 추가적인 설정이 가능한데, 이런 경우는 설정 파일의 settings 옵션을 사용한다.
아래 코드는 react 플러그인이 프로젝트에 설치된 리액트 버전을 자동으로 탐지하도록 설정한 것이다.
{ "settings": { "react": { "version": "detect" } } }
overrides 옵션
프로젝트 내에서 일부 파일에 대해 살짝만 다른 설정을 하기 위해서 사용한다.
프로젝트에 자바스크립트 파일과 타입스크립트 파일이 공존한다면 자바스크립트 파일을 기준으로 기본 설정을 하고, 타입스크립트 파일을 위한 설정은
overrides옵션에 명시할 수 있다!{ "overrides": [ { "files": "**/*.+(ts|tsx)", "parser": "@typescript-eslint/parser", "plugins": ["@typescript-eslint"], "extends": ["plugin:@typescript-eslint/recommended"] } ] }
📍Prettier 와 ESLint 함께 사용하기
ESLint plugin의 rule과 Prettier의 충돌을 방지하기 위해서는!
eslint-plugin-prettier : prettier를 ESLint 플러그인으로 추가하여 prettier에서 인식하는 코드 상의 포맷 오류를 ESLint 오류로 출력해준다.
eslint-config-prettier : ESLint의 formatting 관련 설정 중, prettier와 충돌하는 부분을 비활성화 한다.
🍀 설치 및 적용
설치
yarn add -D eslint-config-prettier eslint-plugin-prettier적용
{ "extends": [ "some-other-config-you-use", "prettier" ] "plugins": ["prettier"], "rules": { "prettier/prettier": "error" } }
📍StyleLint
css, scss, css-in-js와 같은 스타일에 규칙을 정의할 수 있는 lint이다.
스타일 오류를 방지해, 스타일이 적용되지 않는 현상을 줄여주고,
협업 시, 스타일 규정을 정해두기가 좋다!
🍀 설치 및 설정
설치
yarn add -D stylelintstylelint-config-recommended: 오류 방지에 도움이 되는 규칙들stylelint-config-concentric-orer: css 속성 위치 수정설정 : .stylelintrc 파일 생성
{ "extends": ["stylelint-config-recommended", "stylelint-config-concentric-order"] "rules" : { "color-named": "never" // 색상명을 이름으로 사용할 수 없는 규칙 추가 } }eslint와 마찬가지로, extends, rules 등의 속성을 지정해야 한다!
실행
yarn stylelint "**/*.css"마찬가지로 별도의 터미널 실행 없이, 확장 프로그램으로 stylelint 검사 오류를 확인할 수 있다.
📍Prettier 와 stylelint 함께 사용하기
충돌을 방지하기 위해 두 가지 모듈을 이용한다.
stylelint-config-prettier : prttier와 충돌하는 stylelint의 규칙을 비활성화 한다.
stylelint-prettier : prettier의 규칙들을 stylelint의 규칙으로 추가한다. stylelint에서 prettier 규칙까지 같이 사용이 가능하다.
🍀 설치 및 적용
설치
yarn add -D stylelint-prettier stylelint-config-prettier적용 : .stylelintrc 에 추가
{ "extends": [ "stylelint-config-prettier" // 충돌 방지 ] // prettier 규칙 stylelint에 추가 "plugins": ["stylelint-prettier"], "rules": { "prettier/prettier": true ] } }
📍ESLint, Prettier, StyleLint 수정 자동화
VSCode의 setting.json에서 아래 코드를 추가하면, 자동으로 에디터 상에서 검사 및 수정이 가능하다. 파일 저장 시, 자동으로 rule을 format 해주는 설정이기 때문에 매우 편리하다는 점!
"editor.codeActionsOnSave": {
"source.fixAll.eslint" : true, // eslint 자동 수정
"source.fixAll.stylelint": true // stylelint 자동 수정
},
"editor.formatOnSave" : true, // prettier 자동 수정📍참고
https://www.daleseo.com/js-prettier-config/
https://www.daleseo.com/eslint-config/