Prettier + ESLint + Airbnb Style을 package.json 변경없이 셋팅하는 방법

설치

 

1. eslint, prettier 패키지 설치

npm install -D eslint prettier

 

2. airbnb eslint 설정 패키지 설치

npx install-peerdeps --dev eslint-config-airbnb

3. prettier eslint 플러그인 및 설정 패키지 설치

npm install -D eslint-config-prettier eslint-plugin-prettier

• eslint-plugin-prettier: prettier 규칙을 생성하는 eslint 플러그인
• eslint-config-prettier: eslint와 prettier간 충돌나는 규칙을 비활성화해주는 eslint 설정

 

4. package.json 을 git discard 해주기

모두 설치된 이미지

 

discard : 되돌리기 , 소스 코드에서 변경 되기 전의 코드는 남기고 변경된 부분만 되돌리기

 

vscode 왼쪽 탭 소스제어에서 : 되돌리기 버튼

되돌린 후 이미지

package.json과 lock.json 모두 되돌렸지만 eslint가 작동하는 것을 볼 수 있다.

설정 파일 작성

 

.eslintrc

{
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "parserOptions": {
    "ecmaVersion": "latest"
  },
  "extends": ["airbnb", "plugin:prettier/recommended"],
  "rules": {
    "prettier/prettier": ["error", { "singleQuote": true }],
    "indent": ["error", 2],
    "quotes": ["error", "single"],
    "max-lines-per-function": ["error", 10], // 한 함수의 메서드 라인을 10줄로 제한함.
    "max-depth": ["error", 2], // 들여쓰기(indent)를 2개로 제한함.
    "no-else-return": ["error", { "allowElseIf": false }], // else , if else return 을 제한함.
    "max-params": ["error", 3], // 함수의 매개변수 개수를 3개로 제한함.
    "no-confusing-arrow": [
      // 화살표 함수(=>)는 일부 비교 연산자(>, <=, >=)와 구문이 유사합니다.
      //이 규칙은 비교 연산자와 혼동될 수 있는 위치에서 화살표 함수 구문을 사용하지 않도록 경고합니다.
      "error",
      { "allowParens": true, "onlyOneSimpleParam": false }
    ],
    "prefer-destructuring": [
      //  X : var foo = object.foo;
      //  O :  var { foo } = object;
      "error",
      {
        "array": true,
        "object": true
      },
      {
        "enforceForRenamedProperties": false
      }
    ],
    "spaced-comment": ["error", "always", { "exceptions": ["-", "+"] }], // 주석 사용 시 한칸 공백 생성
    "eol-last": ["error", "always"] // EOL https://github.com/airbnb/javascript#whitespace--newline-at-end
  }
}

ESLint 설정 페이지

https://eslint.org/docs/latest/user-guide/configuring/

ESLint 규칙 페이지

 

https://eslint.org/docs/latest/rules/

 

.prettierrc.js

/**
 * Prettier 옵션
 * - https://prettier.io/docs/en/options.html
 */
module.exports = {
  printWidth: 80, // 한 줄 최대 문자 수
  tabWidth: 2, // 들여쓰기 시, 탭 너비
  useTabs: false, // 스페이스 대신 탭 사용
  semi: true, // 문장 끝 세미콜론 사용
  singleQuote: true, // 작은 따옴표 사용
  trailingComma: 'es5', // es5 설정 (기본값)
  bracketSpacing: true, // 중괄호 내에 공백 사용
  arrowParens: 'always', // https://github.com/airbnb/javascript#arrows--one-arg-parens
  proseWrap: 'never', // 마크다운 포매팅 제외
  endOfLine: 'auto', // 개행문자 유지 (혼합일 경우, 첫 줄 개행문자로 통일)
  quoteProps: 'as-needed'
};

 

 

Prettier 옵션

https://prettier.io/docs/en/options.html

 

.prettierignore

node_modules/

 

 

VS Code 설정 

.vscode/settings.json

 

prettier가 VS Code에 깔려 있지 않거나 다른 포매터를 사용 시에 이용하는 방법입니다.

 

특정 언어를 자동으로 포맷하지 않으려면 저장 시 포맷을 비활성화할 수 있습니다. 

{
    // Set the default
    "editor.formatOnSave": true,
    // Enable per-language
    "[javascript]": {
      "editor.formatOnSave": false
    },
    "editor.codeActionsOnSave": {
      // For ESLint
      "source.fixAll.eslint": true
    },
    "eslint.alwaysShowStatus": true,
    "prettier.disableLanguages": ["js"],
    "files.autoSave": "onFocusChange",
}

 

위치: 프로젝트 루트의 .vscode/settings.json

 

https://github.com/prettier/prettier-vscode#prettier-formatter-for-visual-studio-code

GitHub - prettier/prettier-vscode: Visual Studio Code extension for Prettier