1. ESLint
코드의 오류나 버그, 스타일 점검
설치 후 명령어 입력
npm install -g -d eslint
eslint --init
아래와 같이 설정
- To check syntax and find problems, and enforce code style
- JavaScript modules (import/export)
- React
- TypeScript : Yes
- Node
- Use a popular style guide
- Airbnb
- JavaScript
- Yes
2. Prettier
설치 후 명령어 입력
npm install --save-dev --save-exact prettier
ESLint는 문법검사, Prettier는 코드 포맷을 맡게한다.
npm install eslint-plugin-prettier@latest --save-dev -g
npm install --save-dev eslint-config-prettier # prettier와 겹치는 eslint 룰 삭제
npm install --save-dev eslint-plugin-prettier # eslint 기본 포맷 대신 프리티어 룰과 동일한 포매팅을 이용함
.eslintrc.js 파일 수정
뒤에 오는 설정이 앞을 덮어쓰기 때문에 prettier가 뒤로 가야한다.
extends: [
"plugin:react/recommended",
"airbnb",
"plugin:prettier/recommended",
],
.prettierrc.js 세팅
.prettierrc.js 파일을 만들고 아래 붙여넣기
// .prettierrc.js
module.exports = {
singleQuote: true,
// 문자열은 홑따옴표로 formatting
semi: true,
//코드 마지막에 세미콜른이 있게 formatting
useTabs: false,
//탭의 사용을 금하고 스페이스바 사용으로 대체하게 formatting
tabWidth: 2,
// 들여쓰기 너비는 2칸
trailingComma: 'all',
// 자세한 설명은 구글링이 짱이긴하나 객체나 배열 키:값 뒤에 항상 콤마를 붙히도록 //formatting
printWidth: 80,
// 코드 한줄이 maximum 80칸
arrowParens: 'avoid',
// 화살표 함수가 하나의 매개변수를 받을 때 괄호를 생략하게 formatting
endOfLine: "auto",
// windows에 뜨는 'Delete cr' 에러 해결
};
VSCode 확장프로그램 설정
Command + , 로 설정을 열고 검색창에 스샷처럼 적는다.
Editor: Format On Save <<< Check On
Eslint code action on save <<< all
Eslint Enable <<< check on
경고 수준 바꾸기
경고수준을 바꿔서 알아보기 편하게 만듬.
.eslintrc.js에 아래와 같이 추가
rules: {
"react/jsx-filename-extension": [1, { allow: "as-needed" }],
"no-unused-vars": "warn",
},
이제 Ctrl+S으로 자동적용이 된다.
파일참고
.eslintrc.js
module.exports = {
env: {
browser: true,
node: true,
es2021: true,
},
extends: [
"plugin:react/recommended",
"airbnb",
"plugin:prettier/recommended",
],
parser: "@typescript-eslint/parser",
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: "latest",
sourceType: "module",
},
plugins: ["react", "@typescript-eslint"],
rules: {
"react/jsx-filename-extension": [1, { allow: "as-needed" }],
"no-unused-vars": "warn",
},
};
.prettierrc.js
// .prettierrc.js
module.exports = {
singleQuote: true,
// 문자열은 홑따옴표로 formatting
semi: true,
//코드 마지막에 세미콜른이 있게 formatting
useTabs: false,
//탭의 사용을 금하고 스페이스바 사용으로 대체하게 formatting
tabWidth: 2,
// 들여쓰기 너비는 2칸
trailingComma: 'all',
// 자세한 설명은 구글링이 짱이긴하나 객체나 배열 키:값 뒤에 항상 콤마를 붙히도록 //formatting
printWidth: 80,
// 코드 한줄이 maximum 80칸
arrowParens: 'avoid',
// 화살표 함수가 하나의 매개변수를 받을 때 괄호를 생략하게 formatting
endOfLine: "auto",
// windows에 뜨는 'Delete cr' 에러 해결
};
'React Native : RN > Setting & Bug' 카테고리의 다른 글
React Native. iOS 시뮬 빌드 에러 : arm64 관련 (0) | 2022.04.05 |
---|---|
Rn. gitignore setting (0) | 2022.03.18 |
VSCode. 확장기능 사용 (0) | 2022.03.16 |
자주 쓰이는 npm 명렁어 (0) | 2022.03.15 |
nodebrew로 node 버전설치 (0) | 2022.03.10 |