prettier, eslint, styleLint에 대해
prettier란?
코드 구현과는 관계없는, 일관된 텍스트 작성을 도와주는 도구
혼자 코딩 할 때와 달리, 여러명이 협업하다보면 각자의 코드 스타일이 있다는 것을 체감할 수 있다. 그렇다고 모든 것을 코드 컨벤션으로 정하고, 코드 컨벤션을 확인하며 코드를 작성하기에는 어려움이 있다.
이런 어려움을 극복하기 위해, 코드 포맷팅을 효율적으로 도와주는 툴이 prettier다.
prettier를 사용하면 아래와 같은 규칙들을 저장 시 자동으로 정렬해 줄 수 있다. 물론 코드 포맷팅 규칙은 협업한 팀마다 다를 것이니, 모두 아래와 같은 규칙을 따르지는 않는다.
prettier 사용법
prettier 설치 및 사용
prettier를 설치하고 사용하는 방법은 두 가지가 있다.
VSCode extension 설치
VSCode의 extension을 설치하면 간편하게 Prettier를 적용할 수 있다. 그러나 extension은 자신의 로컬 환경에서만 적용되므로 협업할 때는 추천하지 않는다!!
yarn으로 설치
나는 React를 생성하는 과정에서 Vite를 사용했기 때문에, Vite와 yarn 사용자를 중심으로 서술했다!! Vite 없이 Prettier나 EsLint를 사용한다면 적용되지 않을 수 있다... 🥺
💡 Install Prettier
yarn add -D prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react-hooks💡 .prettierrc 파일 생성하기
touch .prettierrc💡 .prettierrc 파일에 설정 적용
원하는 설정을 prettierrc 파일에 적용한다!
{
"printWidth": 100, // 한 줄에 들어가는 글자 수"tabWidth": 2, // Tab의 길이"singleQuote": true, // 작은 따옴표만 허용"trailingComma": "es5", // 객체 등 마지막에 콤마(,) 찍기"useTabs": false, // 탭을 사용할지 여부"arrowParens": "always", // 화살표 함수에서 단일 파라미터에 괄호를 붙일 것인가 (always/avoid)"bracketSpacing": true, // 중괄호 안에 있는 내용과 중괄호 사이 공백"bracketSameLine": false // 여는 중괄호를 한 줄 다음에 주기
}ESLint란?
ESLint는 코드 퀄리티를 보장하도록 도와주는 도구
ESLint를 사용하면 프로젝트에서 코드를 일관성 있게 작성할 수 있다.
ESLint 사용법
ESLint 설치 및 사용
prettier와 달리 ESLint는 extension과 yarn을 모두 설치해 주어야 한다고 한다! 이유는 ESLint는 프로젝트 코드 단에서 사용하는 것이 아닌, IDEA에 적용해서 사용하여야 하기 때문에 프로젝트 내 개발 환경에서 의존 추가해줘야 한다.
JS는 자유도가 높은 언어이기 때문에 같은 기능을 구현하더라도 다양한 방법이 있다. 예를 들어 일반 함수로 구현하는 사람과, 화살표 함수를 이용하는 사람 등 여러 방식이 존재한다. 물론 많은 사람들이 선호하는 방법이 있지만, 모든 방법이 협업하는 팀원들과 같을 수는 없으므로 컨벤션을 정해 ESLint에 적용해 주면 보다 효율적이고 일관성 있는 코드를 작성할 수 있다.
💡 ESLint extension 설치
위에서 언급한 것처럼, VSCode의 ESLint extension을 설치한다.
💡 터미널에서 yarn을 사용하여 ESLint를 프로젝트에 설치
npm install -D eslint💡 ESLint config 생성 도우미 실행
npx eslint -init나오는 질문(React, Vue / JS, TS 등)을 본인의 상황에 맞춰 선택한다. 몇 가지 답변을 선택하면 필요한 plugin을 설치하고 설정 파일이 생성된다.
💡 .eslintrc.cjs 파일에 설정 적용
module.exports = {
parser: '@typescript-eslint/parser',
parserOptions: {
project: 'tsconfig.json',
tsconfigRootDir: __dirname,
sourceType: 'module',
ecmaFeatures: {
"jsx": true
},
ecmaVersion: 'latest' },
plugins: ['@typescript-eslint/eslint-plugin'],
extends: [
'plugin:@typescript-eslint/recommended',
],
root: true,
env: {
node: true,
jest: true,
},
ignorePatterns: ['.eslintrc.js'],
rules: {
'@typescript-eslint/interface-name-prefix': 'off',
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',
'@typescript-eslint/no-explicit-any': 'off',
},
};본인이 선택한 답변에 따라 다르겠지만, 위와 비슷한 내용의 설정 파일이 생성될 것이다. 커스텀하여 다양한 규칙들을 적용시키고 싶다면 개인적으로 설정해 주어도 된다.
자주 사용되는 몇 개의 옵션에 대해 알아보면,
parser - 코드 파일을 검사할 parser를 설정
parserOptions - parser의 추가 정보를 등록
extends - eslint rule 설정이 되어있는 외부 file extends
rules - 직접 lint rule을 변경하는 부분으로, extends로 자동 설정된 rules를 끄거나 error를 warning으로 변경하는 등 세부 설 변경
