8. ESLint 설정
ESLint란?
- ECMAScript와 Lint의 합성어로, 코딩 컨벤션과 일치하지 않는 오류, 버그, 스타일을 정적으로 분석하여 디버깅해주는 도구이다. Lint가 궁금해서 검색해보니 보푸라기… 라고 하는데, ‘Linting Tool’으로 쓰이면 위와 같은 의미를 갖는다.
관련 패키지 설치
npm i -D eslint: ESLint 패키지 설치--init명령어를 이어 설치하면 ESLint에서 제공하는 기본 세팅을 CLI를 통해 선택할 수 있다.
(ex. 코딩 스타일 가이드 - Google / Standart / Airbnb, ECMAScript 버전, 프레임워크 및 타입스크립트 사용 여부 등)
npm i -D eslint-plugin-react eslint-plugin-react-hookseslint-plugin-react: React 컴포넌트, JSX, props 등과 관련된 ESLint 규칙 제공 플러그인eslint-plugin-react-hooks: React의 Hooks와 관련된 ESLint 규칙 제공 플러그인
npm i -D eslint-plugin-import eslint-plugin-jsx-a11yeslint-plugin-import: ES6+의 import/export 구문에 관련된 Linting 규칙 제공 플러그인eslint-plugin-jsx-a11y: JSX를 사용하는 프로젝트의 접근성을 보장하는 규칙 제공 플러그인
(*‘a11y’는 accessibility로, a와 y 사이에 11개의 문자가 있다는 뜻)
npm i -D eslint-plugin-prettier eslint-config-prettiereslint-plugin-prettier: Prettier와 ESLint를 통합하는 플러그인 → Prettier의 코드 포매팅 규칙에 어긋났을 시 ESLint의 경고/에러로 표시할 수 있게 됨eslint-config-prettier: Prettier와 충돌할 수 있는 ESLint 규칙들을 비활성화하여 충돌 방지
.eslintrc.js
→ 아래는 23년 말 진행했던 프로젝트를 위해 작성된 버전이다
module.exports = {
// 프로젝트의 루트 설정임을 지정 (= 더 이상 상위 디렉토리의 설정 파일을 참조하지 않음)
root: true,
// 실행 환경 설정
env: {
es6: true,
node: true,
browser: true,
},
// TypeScript 코드 분석을 위한 파서 설정
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: { jsx: true }, // JSX 지원
jsx: true,
useJSXTextNode: true,
},
// 확장할 ESLint 규칙들
extends: [
'eslint:recommended', // ESLint 기본 규칙
'plugin:@typescript-eslint/recommended', // TypeScript 규칙
'eslint-config-prettier', // Prettier와 충돌을 피하기 위한 설정
'plugin:react/recommended', // React 규칙
],
// 사용할 플러그인 목록
plugins: ['@typescript-eslint', 'import', 'prettier', 'react', 'react-hooks'],
// 특정 플러그인 설정 - 리액트 버전을 자동으로 감지해서 그에 맞게 규칙을 적용하도록 설정
settings: { react: { version: 'detect' } },
// 진행할 프로젝트와 팀원들의 선호도에 맞게 정의한 규칙들
rules: {
// Prettier 규칙에 벗어났을 때 에러로 처리하고,
'prettier/prettier': 'error',
// ESLint의 들여쓰기 규칙은 비활성화하여 코드 스타일을 Prettier가 관리하도록 했다
indent: 'off',
'@typescript-eslint/indent': 'off',
semi: 'off',
// 암시적 형변환 금지
'no-implicit-coercion': 'error',
// 불필요한 불리언 타입으로의 형변환 비활성화. 예를들어, 'if (!!value)'와 같은 코드를 만나면
// if문이 자동으로 불리언 평가를 수행하기 때문에 value를 불리언 타입으로 형변환 할 필요가 없기 때문에 경고
'no-extra-boolean-cast': 'off',
// 정의되지 않은 변수 사용 금지 규칙 비활성화
'no-undef': 'off',
// TypeScript의 non-null assertion 연산자('!') 사용 허용
'@typescript-eslint/no-non-null-assertion': 'off',
// TypeScript의 'any' 타입 사용 허용
// -> 타입을 정의하기 어려웠던 3D 그래픽 관련 외부 라이브러리를 사용하느라 허용했다
'@typescript-eslint/no-explicit-any': 'off',
// 타입 추론으로도 충분하다고 생각하여 함수 반환 타입 명시 규칙 비활성화
'@typescript-eslint/explicit-function-return-type': 'off',
// 가장 중요한 함수를 파일 상단에 작성하기 위해 함수나 변수를 정의 전에 사용하는 것을 허용
'@typescript-eslint/no-use-before-define': 'off',
// 빈 인터페이스를 추후 확장하기 위해 허용
'@typescript-eslint/no-empty-interface': 'off',
// TODO, FIXME와 같은 '키워드 주석'에 대한 경고 설정
'no-warning-comments': [
'warn',
{
terms: ['TODO', 'FIXME', 'BUG'],
location: 'anywhere',
},
],
// const 사용 권장
'prefer-const': 'error',
// var 사용 금지
'no-var': 'error',
// if문 중괄호(블록) 필수로 사용
curly: ['error', 'all'],
// 일치 연산자 '==='와 불일치 연산자 '!==' 사용 규칙.
// 단, null과의 비교에서는 undefined도 함께 처리하기 위해 '=='와 '!=' 사용을 허용
eqeqeq: ['error', 'always', { null: 'ignore' }],
// 중복 import 금지
'import/no-duplicates': 'error',
// TypeScript를 사용하고 있으므로 propTypes가 불필요
'react/prop-types': 'off',
9. Prettier 설정
Prettier란?
- 코드 포매터(Code Formatter)로, 동일한 버전과 설정을 가진 Prettier를 협업시 함께 사용하면 코드 스타일을 일치시킬 수 있다.
관련 패키지 설치
npm i -D --save-exact prettier: Prettier 패키지 설치--save-exact명령어를 추가하면 package.json에 패키지가 기록될 때^나~없이 정확한 버전이 기록된다.
(반대로,^나~가 붙으면 해당 버전과 호환되는 최신 버전을 설치할 수 있다는 뜻)
.prettierrc.json
{
"printWidth": 100, // 한 줄의 최대 길이 제한
"singleQuote": true, // 문자열 표기시 작은 따옴표 사용 (기본 설정은 큰따옴표 - "")
"trailingComma": "es5", // 배열이나 객체 리터럴의 마지막에 쉼표 ',' 추가
"tabWidth": 2, // Tab 공백 수 2칸
"arrowParens": "avoid" // 화살표 함수의 매개변수가 1개면 괄호 생략
}
짜잔~ 여기까지 Create React App을 사용하지 않고 리액트와 타입스크립트, 웹팩과 바벨, ESLint와 Prettier 설정까지 마쳤다 !
이제 리액트 쿼리나 리코일, 스타일드 컴포넌트 등등 프로젝트에 사용할 라이브러리를 설치하고, github 또는 gitlab같은 깃 저장소에 올린 후 팀원별, 기능별 브랜치를 나눠 작업하기 시작하면 된다.
당시 팀원들과 개발환경 세팅과 관련 설정만 하는 데에도 하루를 꼬박 보냈는데, 주어진 시간이 넉넉했다면 이틀까지도 걸릴 수 있었을 것 같다. 웹팩과 바벨 설정을 하면서는 컴파일과 빌드에 관해서 알 수 있었고, ESLint와 Prettier 설정은 각자의 코딩 컨벤션 선호도를 알 수 있었다. 특히 여러가지 규칙들 중 옵션 하나 하나씩 고민하는게 더 나은 품질의 코드를 보장하는데에 큰 도움이 되었다고 생각한다 👍
+ 필수는 아니지만, 당시 프로젝트를 진행할 땐 VSCode extension과 settings, node 버전까지도 같이 세팅하고 시작했다.
10. 기타 설정 (optional)
10-1. VSCode Extension
- Auto Import
- ESLint
- Prettier - Code formatter
- Reactjs code snippets
- TODO Highlight
- Typescript Importer
- Typescript React code snippets
- vscode-styled-components
10-2. VSCode Settings
{
// 파일 저장시 ESLint로 코드 자동 교정
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
// 파일 저장시 코드 포매터(Prettier)에 맞춰 형식 교정
"editor.formatOnSave": true,
// VSCode 인터페이스 & 글자 크기 조정
"window.zoomLevel": -1,
// JS, TS에도 Prettier의 코드 포매팅 적용 및 저장시 교정 설정
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
// TypeScript에서 모듈을 불러올 때 상대 경로 대신 절대 경로 사용
"typescript.preferences.importModuleSpecifier": "non-relative",
}
10-3. node.js 버전 통일하기
nvm -v: nvm의 설치 여부 및 버전 확인 (nvm은 Node Version Manager의 약어)nvm install 18.17.1Node.js의 18.17.1 버전 설치nvm use 18.17.1설치된 Node.js의 버전 중 18.17.1 버전을 사용하도록 설정nvm ls설치 버전 리스트 및 사용중인 버전 확인node -vnode 설치 여부 및 사용중인 버전 확인
이전 글 보기
> CRA 없이 React + TypeScript 개발환경 구축하기 (1/3) - React, TypeScript 설정
> CRA 없이 React + TypeScript 개발환경 구축하기 (2/3) - Webpack, Babel 설정
'React' 카테고리의 다른 글
| CRA 없이 React + TypeScript 개발환경 구축하기 (2/3) - Babel, Webpack 설정 (0) | 2024.01.15 |
|---|---|
| CRA 없이 React + TypeScript 개발환경 구축하기 (1/3) (0) | 2023.11.05 |
| React | TIL | 지난 프로젝트의 index.tsx 되짚어보기 (0) | 2023.08.30 |
