[JS]ESLint&Prettier
1.ESList
- Javascript의 스타일 가이드를 따르지 않거나 문제가 있는 부분을 찾아주고 일관된 코드를 작성할 수 있도록 도와줌
- node.js환경에서 사용가능
[ESList 설치]
- npm 또는 yarn을 이용하여 설치
(npm install eslint --save-dev) or (yarn add eslint --dev)
- 구성 파일 설정
npx eslint --init
eslint초기화 실행 시 옵션 설정 가능
? How would you like to use ESLint? · problems
? Which framework does your project use? · react
? Does your project use TypeScript? · No / Yes
? Where does your code run? · browser, node
? What format do you want your config file to be in? · JavaScript
? Would you like to install them now with npm? · No / Yes
=> 설정이 모두 끝나면 .eslintrc.js
파일 생성
상황에 따라 옵션 추가 가능[ESLint사이트 참조]
[VScode와 함께 이용하기]
확장 프로그램 ESLint를 설치하면 바로 사용 가능
=> 설정 내용대로 자동으로 수정하기위해서는 VScode에 가서 옵션 추가 필요
// settings.json
"editor.codeActionsOnSave": { // 저장 버튼 누르면 자동으로 eslint의 규칙되로 변경
"source.fixAll.eslint": true
},
"eslint.validate": ["javascript", "html"],
"eslint.alwaysShowStatus": true
2. Prettier
-사용자의 옵션에 따라 코드 스타일을 맞춰줄 수 있음
[Prettier 설치]
1) VScode 확장 프로그램을 이용해 설치2) npm으로 설치(npm install --save-dev --save-exact prettier
)
-.prettierrc
파일 생성 => 기본적인 옵션포함
{
"singleQuote": "true",
"semi": "true",
"useTabs": "false",
"tabWidth": 2,
"trailingComma": 'all',
"printWidth": 80,
"arrowParens": 'avoid',
"endOfLine": "auto",
}
- VScode 전역에서 사용하기 위해서는
Setting.json
에서 아래 항목 추가 필요
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
공부하며 작성하고 있는 블로그입니다.
잘못된 내용이 있을 수 있으며 혹시 있다면 댓글 달아주시면 감사하겠습니다 😊
Author And Source
이 문제에 관하여([JS]ESLint&Prettier), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@yjin/JSESLintPrettier저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)