darait

{ "editor.codeActionsOnSave": { "source.fixAll.eslint": true // 저장했을 때, prettire 에 맞게 고쳐주는 설정. }, "eslint.alwaysShowStatus": true, // eslint 상태를 보여주는 상태 "eslint.workingDirectories": [ {"mode": "auto"} ], // eslint code 있는 dir 을 쫒아서 validation 해주는 설정 "eslint.validation": [ "javascript", "typescript" ] }

eslint 설정파일을 생성할때 여러가지 확장자로 만들어도 상관없지만 난 개인적으로 js 확장자로 만드는 것이 편한것 같다. 기본적으로 주석도 달수 있고 다른 파일을 병합할 수 있기 때문이다.

{ "arrowParens": "avoid", // 화살표 함수 괄호 사용 방식 "bracketSpacing": false, // 객체 리터럴에서 괄호에 공백 삽입 여부 "endOfLine": "auto", // EoF 방식, OS별로 처리 방식이 다름 "htmlWhitespaceSensitivity": "css", // HTML 공백 감도 설정 "jsxBracketSameLine": false, // JSX의 마지막 `>`를 다음 줄로 내릴지 여부 "jsxSingleQuote": false, // JSX에 singe 쿼테이션 사용 여부 "printWidth": 80, // 줄 바꿈 할 폭 길이 "proseWrap": "preserve", // markdown 텍스트의 줄바꿈 방식 (v1.8.2) "qu..

npx install-peerdeps --dev eslint-config-airbnb 해당 명령어는 eslint 관련 설치해야하는 리스트를 down 해주는 명령어

VSCode 기본설정(settings.json)에서 자동저장 기능을 비활성화 하고 저장시 수행동작 기능을 활성화 한다 . { ... "editor.codeActionsOnSave": { "source.fixAll.eslint": true, }, "editor.formatOnSave": false, } formatOnSave 사용 여부는 선택사항이다. eslint와 prettier 옵션이 모두 설정되어 통합되어 있다고 가정하면, eslint가 동작할 때 .prettierrc 파일의 옵션을 읽고 린팅합니다. 따라서 파일 저장시 codeActionsOnSave에 의해 자동으로 fix된다.

기본적으로 아래와 같이 실행 됩니다 . 코드입력 => prettier => eslint => 코드수정순으로 실행합니다. package.json 파일에 script 를 설정 해서 실행 시킬 수 있다. 간편하게 lint prettier 추가 설치 하기 npm i -D eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier .eslintrc 파일 생성 "e..

package.json { //... "scripts": { "lint": "eslint './src/**/*.{ts,tsx,js,jsx}'", "lint:fix": "eslint --fix './src/**/*.{ts,tsx,js,jsx}'" } //... } 패키지 파일에 스크립트를 추가합니다. src 파일 내부의 ts,tsx,js,jsx 파일을 linting 할 수 있다. lint:fix에서 eslint --fix를 하면 자동으로 lint에 맞게 한다.