코드 포멧터 & 린터

1
# ESLint 패키지 설치
2
$ yarn add eslint --dev
3
# ESLint 초기화
4
$ npx eslint --lint
5
## .eslintrc.json 파일에 원하는 ESLint rules 적용
6

7
# eslint를 어떤식으로 사용할지에 대한 질문
8
How would you like to use ESlint ? => syntax, problems, code style
9
# 자바스크립트 뭐쓰고 있는지 묻는것
10
Waht type of modiles does your project use? => Javascript modules (import/export)
11
# react를 선택
12
Which framework does your project use? => react
13
# 타입스크립트 사용유무
14
Does your project use TypeScript? => Yes
15
# 어디서 실행하는지 확인
16
Where does your code run? => Browser
17
# 인기있는 가이드를 할지, 커스텀을 할 지 선택
18
How would you like to define a style for your project? => Use a popular style guide
19
Which style guide do you want to follow? => standard
20
# 설정파일을 뭘로 만들지 물어보는 질문
21
What format do you want your config file to be in? => Javascript
22
# 어떤 패키지 매니저로 설치할지
23
Which package manager do you want to use? => yarn

1
// 필요없는 규칙은 off해서 끄면 된다.
2
rules: {
3
  'react/react-in-jsx-scope': 'off',
4
  'react/prop-types': 'off'
5
 }

1
# .은 모든 파일을 의미
2
$ npx eslint .
3

4
# . 이 안될 경우에는, ""안의 형태로 끝나는 파일을 모두 검사하는 명령어로 입력
5
npx eslint "**/*.{ts,tsx}"

1
{
2
  "extends": [
3
    "next/core-web-vitals",
4
    "plugin:prettier/recommended", // Next.js에 Prettier 적용
5
    "plugin:storybook/recommended" // Storybook ESLint 규칙 적용
6
  ],
7
  "plugins": ["prettier"],
8
  /**
9
   * @see https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/order.md
10
   */
11
  "rules": {
12
    "prettier/prettier": "error",
13
    "react-hooks/rules-of-hooks": "warn",
14
    "react/display-name": "warn",
15
    // “Import/order “ ESLint Rule 설정
16
    "import/order": [
17
      "error",
18
      {
19
        // Import group 사이에 개행 항상 추가
20
        "newlines-between": "always",
21
        // Import 순서는 알파벳 오름차순으로 정렬
22
        "alphabetize": {
23
          "order": "asc",
24
          "caseInsensitive": true // 대소문자 구분 없이 정렬
25
        }
26
      }
27
    ]
28
  }
29
}

1
# prettier 패키지 설치
2
yarn add --dev --exact prettier
3

4
# 루트 디렉토리에 .prettierrc 파일 생성
5
node --eval "fs.writeFileSync('.prettierrc','{}\n')"
6

7
# 모든 파일에 prettier 적용
8
yarn prettier . —write

1
{
2
	"editor.formatOnSave":ture,
3
	"editor.defultFormatter": "esbenp.prettier-vscode"
4
}

1
$ npm install --save-dev eslint-config-prettier
2
$ yarn add eslint-config-prettier --dev

1
{
2
  "extends": ["plugin:react/recommended", "standard-with-typescript", "prettier"]
3
}

1
# 모든 폴더 prettier 적용
2
$ npx prettier . --write

1
{
2
  "extends": [
3
    "next/core-web-vitals",
4
    "plugin:prettier/recommended", // Next.js에 Prettier 적용
5
    "plugin:storybook/recommended" // Storybook ESLint 규칙 적용
6
  ],
7
  "plugins": ["prettier"],
8
  /**
9
   * @see https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/order.md
10
   */
11
  "rules": {
12
    "prettier/prettier": "error",
13
    "react-hooks/rules-of-hooks": "warn",
14
    "react/display-name": "warn",
15
    // “Import/order “ ESLint Rule 설정
16
    "import/order": [
17
      "error",
18
      {
19
        // Import group 사이에 개행 항상 추가
20
        "newlines-between": "always",
21
        // Import 순서는 알파벳 오름차순으로 정렬
22
        "alphabetize": {
23
          "order": "asc",
24
          "caseInsensitive": true // 대소문자 구분 없이 정렬
25
        }
26
      }
27
    ]
28
  }
29
}

1
{
2
  "extends": ["next/core-web-vitals", "plugin:prettier/recommended", "plugin:storybook/recommended"],
3
  "plugins": ["prettier"],
4

5
  "rules": {
6
    "prettier/prettier": "error",
7
    "react-hooks/rules-of-hooks": "warn",
8
    "react/display-name": "warn",
9
    "import/order": [
10
      "error",
11
      {
12
        "newlines-between": "always",
13
        "alphabetize": {
14
          "order": "asc",
15
          "caseInsensitive": true
16
        }
17
      }
18
    ]
19
  }
20
}

1
{
2
  // 1. 홑따옴표
3
  "singleQuote": true,
4
  // 2. 한 줄 최대 글자수
5
  "printWidth": 80,
6
  // 3. 세미콜론
7
  "semi": false,
8
  // 4. 배열이나 객체, 매개변수가 작성된 경우 마지막 요소 뒤에도 ,기호(쉼표)를 붙여주기
9
  // 기본값 : all
10
  "trailingComma": "all",
11
  // 5. 화살표 함수 매개변수가 하나일 때는 굳이 () 기호를 사용하고 싶지 않다면
12
  "arrowParens": "avoid",
13
  // 6. 탭 문자 대신에 여러 개의 공백 문자를 사용 여부
14
  "useTabs": false,
15
  // 7. 탭 너비
16
  "tabWidth": 2,
17
  // 8. 객체 리터럴 사용시 괄호에 공백 삽입 여부 (default: true)
18
  "bracketSpacing": true,
19
  // 9. JSX의 마지막 `>`를 다음 줄로 내릴지 여부
20
  "jsxBracketSameLine": true,
21
  // 10. vue 파일의 script와 style태그 들여쓰기 여부
22
  "vueIndentScriptAndStyle": false,
23
  // 11. 맨마지막 줄 넣는지 여부
24
  "endOfLine": "auto",
25
  // 12. 이 확장 기능을 비활성화 할 언어 ID 목록
26
  "disableLanguages": ["vue"]
27
}

1
{
2
  "singleQuote": true,
3
  "printWidth": 80,
4
  "semi": false,
5
  "trailingComma": "all",
6
  "arrowParens": "avoid",
7
  "useTabs": false,
8
  "tabWidth": 2,
9
  "bracketSpacing": true,
10
  "jsxBracketSameLine": true,
11
  "vueIndentScriptAndStyle": false,
12
  "endOfLine": "auto"
13
}

1
yarn add -D husky@4
2
yarn add --dev lint-staged

1
{
2
  // ...
3
  "devDependencies": {
4
    // ...
5
  },
6
  "husky": {
7
    "hooks": {
8
      "pre-commit": "lint-staged"
9
    }
10
  },
11
  "lint-staged": {
12
    "**/*.{ts,tsx}": ["npx eslint ."]
13
  }
14
}