[TypeScript] eslint prettier

1. prettier 설치

npm

$ npm install --save-dev --save-exact prettier
$ npm install --save-dev eslint-config-prettier
$ npm install --save-dev eslint-plugin-prettier

yarn

$ yarn add --dev --save-exact prettier
$ yarn add --dev eslint-config-prettier
$ yarn add --dev eslint-plugin-prettier

1-1. airbnb lint 사용 시

$ yarn add eslint-config-airbnb

 

2. .prettierrc 생성 ( json, js 어느 것이나 상관 X 내부 작성 폼의 차이)

아래 명령어 입력 or 최상위 디렉토리에 직접 생성

$ echo {}> .prettierrc.json

2-2. .prettierrc

// .prettierrc.js

module.exports = {
  printWidth: 80, // 한 줄 최대 문자 수
  tabWidth: 2, // 들여쓰기 시, 탭 너비
  useTabs: false, // 스페이스 대신 탭 사용
  semi: true, // 문장 끝 세미콜론 사용
  singleQuote: true, // 작은 따옴표 사용
  trailingComma: 'all', // 꼬리 콤마 사용
  bracketSpacing: true, // 중괄호 내에 공백 사용
  arrowParens: 'avoid', // 화살표 함수 단일 인자 시, 괄호 생략
  proseWrap: 'never', // 마크다운 포매팅 제외
  endOfLine: 'auto', // 개행문자 유지 (혼합일 경우, 첫 줄 개행문자로 통일)
};

 

3. eslintrc.json 파일에 해당 코드 추가

{
  "extends": ["airbnb", "plugin:prettier/recommended"],
	"rules": {
    "prettier/prettier": ["error"],
		// suppress errors for missing 'import React' in files
   "react/react-in-jsx-scope": "off",
		// allow jsx syntax in js files (for next.js project)
    // use typescript
   "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
		// allow prop-types
    "react/jsx-props-no-spreading": "off"
  }
}

 

4. .prettierignore 파일 생성 후 추가

# 샘플코드

# dependencies
/node_modules
/.pnp
.pnp.js
.husky
.idea

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*

# local env files
.env*.local

# vercel
.vercel

# typescript
*.tsbuildinfo
next-env.d.ts

prettier 작동 여부 확인

$ prettier --write .

 

5. 저장 시 자동 prettier

vscode - 설정

webstorm - 아래 그림의 on save체크

 

6. commit시 자동 prettier

package.json 파일에 코드 추가 ( yarn 과 npm 중 선택)

#/package.json
"scripts": {
    ...    
		"configure-husky": "yarn husky install && yarn husky add .husky/pre-commit \\"yarn lint-staged\\""
		//"configure-husky": "npx husky install && npx husky add .husky/pre-commit \\"npx lint-staged\\""
  },
"lint-staged": {
    "**/*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write ."
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }

configure command 입력

$ npm run configure-husky
or
$ yarn run configure-husky

commit 하여 작동 확인

$ git add . && git commit -m 'test'

 

7. 오류

Parsing error: Unexpected token 해결법

$ npm install --save-dev @typescript-eslint/parser
or
$ yarn add --dev @typescript-eslint/parser

// Parsing error: Unexpected token
"parser": "@typescript-eslint/parser"