Linter&Prettier

세팅 방법

공통

• ESLint 검사 무시하고 싶은 경우
  • /* eslint-disable*/

VSCode

1. ESLint & Prettier 익스텐션 설치
2. eslint-config-airbnb 설치전 사전에 설치해야 하는 패키지 목록 확인(react app에서!)

$ npm info "eslint-config-airbnb@latest" peerDependencies
{ eslint: '^4.19.1 || ^5.3.0',
  'eslint-plugin-import': '^2.14.0',
  'eslint-plugin-jsx-a11y': '^6.1.1',
  'eslint-plugin-react': '^7.11.0' }

CRA v2 기준 이미 설치되어 있음

• yarn add -D eslint-config-airbnb
• server에서 사용한다면 루트디렉토리에 yarn add -D eslint 추가

3. ESLint의 세부 설정
   • package.json의 eslintConfig 혹은 .eslintrc를 조작하여 설정 가능.

• for api(Server)

"eslintConfig": {
		"extends":"airbnb",
},

for react app

  "eslintConfig": {
		"extends": [
			"react-app",
			"airbnb"
		],
		"rules": {
			"react/prefer-stateless-function": 0,
			"react/jsx-filename-extension": 0,
			"react/jsx-one-expression-per-line": 0
		},
		"env": {
			"browser": true
		}
	},

React app의 경우 ["react-app", "airbnb"]

4. Prettier 익스텐션 사용을 위해 VSCode 내장 자바스크립트 포맷팅 기능을 비활성화

   • 설정 -'Format Javascript'검색-첫번째 항복 체크 해제('Javascript > Format:Enable')
   • prettier 설치
     • yarn add -D prettier

5. Prettier 커스터마이징

   • 루트 디렉토리에 .prettierrc.js 파일 생성

   // prettier 은 기본적으로 .editorconfig 파일을 고려합니다. 
   //.prettierrc.js 에서 editorconfig : true로 제어가능
   module.exports = {
   	tabWidth: 4,
   	useTabs: true,
   	semi: true,
   	singleQuote: true,
   	jsxSingleQuote: true, // JSX에서 singleQuote or doubleQuote
   	endOfLine: 'lf',
   	trailingComma: 'all', // comma 항상 붙이기
   	bracketSpacing: false, // 객체리터럴에서 { } 사이에 공백을 넣을 것인지
   	jsxBracketSameLine: false, // 여러줄의 JSX 요소가 있을때, > 를 마지막 줄의 끝부분에서 닫을 것인지
   	arrowParens: 'always', // (x) => x : always | x => x : avoid
   };
   

6. eslint-config-prettier 적용

   • prettier에서 관리하는 코드스타일의 ESLint 규칙 비활성화
   • 루트디렉토리에서 $ yarn add -D eslint-config-prettier
   • 루트 디렉토리의 package.json에

   "eslintConfig": {
   	"extends": "prettier",
   }
   

7. 자동으로 코드에 적용하기

   • Code-기본설정-설정
   • Format on Save 검색 후 체크 활성화
   • ESLint 검색해서 Auto Fix On Save 체크 활성화

WebStorm

• 기본적으로 설정은 동일
• 자동 적용은 ctrl+shift+A-Reformat with Prettier 검색 후 ctrl+s로 단축키 변경