최근 토이 프로젝트 리팩토링을 시작했는데 회사에서 쓰던 개발환경과 달라 불편함을 느꼈다.
그래서 최대한 비슷하고 편한 환경을 셋팅하면서 정리하는 글.
ESLint
ESLint는 Javascript 코드에서 발견된 문제 패턴을 식별하기 위한 정적 코드 분석 도구이다. 코드 퀄리티를 보장해준다. 대부분의 프로그래밍 언어에는 컴파일하는 과정에서 수행되는 Linter가 기본적으로 내장되어 있다. 그러나 역동적이고 느슨한 언어인 JavaScript에는 Linter가 존재하지 않는다. 왜냐하면 JavaScript는 별로의 컴파일 과정이 없고, Node나 Browser에서 바로 실행되기 때문이다.
ESLint Setting
ESLint 설치
$ yarn add -D eslintESLint extension 설치
.eslintrc 파일 생성 - eslint 설정
- parser : 각 코드 파일을 검사할 파서를 설정하는 부분
- extends :eslint rule 설정이 저장되어 있는 외부 file을 extends하는 부분. 해당 플러그인에서 제공하는 rule set이 적용된다. 변경하고 싶은 부분이 있다면 rules쪽에서 커스터마이징 하면 된다.
- rule : 직접 lint rule을 적용하는 부분. extends로 자동으로 설정된 rules 중에 특정 rule을 끄거나, error를 warning으로 나오도록 변경하는 등 설정을 바꿀 수 있다.
아래는 현재 토이프로젝트에서 사용하고 있는 설정이다.
module.exports = {
// parser : 각 코드 파일을 검사할 파서
parser: '@typescript-eslint/parser', // typescript
plugins: ['@typescript-eslint', // typescript
'prettier'],
extends: [ // 해당 플러그인에서 사용하는 rule set이 적용된다.
'airbnb',
'plugin:import/errors',
'plugin:import/warnings',
'plugin:prettier/recommended',
'plugin:@typescript-eslint/recommended',
'prettier',
],
rules: {
'linebreak-style': 0,
'import/prefer-default-export': 0,
'prettier/prettier': 0,
'import/extensions': 0,
'no-use-before-define': 0,
'import/no-unresolved': 0,
'import/no-extraneous-dependencies': 0,
'no-shadow': 0,
'react/prop-types': 0,
'react/react-injsx-scope': 'off',
'react/jsx-filename-extension': [2, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
'prefer-destructuring': ['error', { object: true, array: false }],
'jsx-a11y/no-noninteractive-element-interactions': 0,
'react/jsx-props-no-spreading': 'off',
'react/no-array-index-key': 'off',
'no-underscore-dangle': 'off',
'no-param-reassign': 'off',
'@typescript-eslint/no-empty-function': 'off',
},
};
Prettier
Prettier는 코드를 정렬해 주는 Code Formatter 중 하나이다. 코드 스타일을 깔끔하게 혹은 통일되도록 도와준다. 설정한 ESLint 룰에 따라 Prettier가 자동으로 format(줄 바꿈, 공백, 들여 쓰기 등)을 잡아준다.
Prettier 셋팅
1. VSCode extension 이용하기
2. Prettier 플러그인 직접 설치 후 eslintrc에 셋팅하기
reference
한약은 거들뿐