ESLint, Prettier, Airbnb 규칙 사용

GitHub - airbnb/javascript: JavaScript Style Guide

위 링크에 명시되어 있는 JS 코드 스타일과 ESLint 및 Prettier가 로컬에서 적용될 수 있도록 설정하는 방법이다

* ESLint: Linter로 소스 코드에 문제가 있는지 검사하여 문제가 있는 부분에 flag를 달아주는 소프트웨어 도구

* Prettier: Formatter로 소스코드를 일관된 스타일로 작성할 수 있게 코드를 변환해주는 소프트웨어 도구

 

 

* Visual Studio Code IDE 기준

 

1. ESLint 설정

npm init @eslint/config

 

2. airbnb eslint 설정 패키지, Prettier 설치

# airbnb eslint 설정 패키지 설치
npx install-peerdeps --dev eslint-config-airbnb

# eslint-config-prettier: eslint와 prettier간 충돌나는 규칙을 비활성화해주는 eslint 설정
npm i -D prettier eslint-config-prettier

 

3. .prettierrc.cjs 파일 생성

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

 

4. .eslintrc.cjs 파일 수정

module.exports = {
  env: {
    browser: true,
    commonjs: true,
    es2021: true,
    node: true,
    jest: true,
  },
  extends: ['airbnb-base', 'prettier'],
  overrides: [
    {
      env: {
        node: true,
      },
      files: [
        '.eslintrc.{js,cjs}',
      ],
      parserOptions: {
        sourceType: 'script',
      },
    },
  ],
  parserOptions: {
    ecmaVersion: 'latest',
  },
  rules: {
		'import/prefer-default-export': 'off',
		'import/extensions': ['off'],
	},
};

 

5. settings.json에 들어가 아래 내용 작성

{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  // 파일을 저장할 때마다 `eslint` 규칙에 따라 자동으로 코드를 수정
  "editor.codeActionsOnSave": { "source.fixAll.eslint": true },
}

 

 

* WebStorm IDE 기준

 

1. 터미널에 ESLint 및 Airbnb JS Style 설치

# ESLint 설치
npm install eslint --save-dev

# airbnb 규칙 사용
npx install-peerdeps --dev eslint-config-airbnb

 

2. package.json에서 devDependencies 확인

  "devDependencies": {
    "eslint": "^8.2.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-react": "^7.28.0",
    "eslint-plugin-react-hooks": "^4.3.0"
}​

 

3. 프로젝트 최상단에 .eslintrc.json 파일 생성

{
  "env": {
    "browser": true,
    "es6": true,
    "node": true,
    "jest": true
  },
  "extends": [
    "airbnb",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "import/prefer-default-export": "off",
    "import/extensions": "off"
  },
  "parserOptions": {
    "ecmaVersion": 2022
  }
}

 

4. Settings에 들어가서 ESLint 검색 및 설정

- Manual ESLint configuration 선택

- ESLint package를 eslint가 설치되어 있는 경로로 설정

- Configuration file을 .eslintrc.json 경로로 설정

- Run eslint --fix on save 클릭

- Apply 및 OK 선택

 

 

5. 터미널에 prettier 설치

npm install prettier --save-dev

 

6. 터미널에 ESLint와 Prettier 충돌 방지 설정

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

 

7. 프로젝트 최상단에 .prettierrc.json 파일 생성

{
  "arrowParens": "always",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "printWidth": 80,
  "proseWrap": "always",
  "quoteProps": "as-needed",
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false
}

 

8. Settings에 들어가 Prettier 검색 및 설정

- Manual Prettier configuration 선택

- Prettier package를 prettier가 설치되어 있는 경로로 설정

- Run on save 클릭

- Apply 및 OK 선택

 

 

 

9. 터미널에 아래 명령어를 통해 코드 문법 및 포맷 정리 가능

- 저장 기능을 통해 코드 정리할 수도 있음

# Prettier 코드 정리
npx prettier --write 파일이름

# ESLint 코드 정리
npx eslint 파일이름 --fix

 

출처

https://velog.io/@2wndrhs/%EC%95%8C%EC%95%84%EB%91%90%EB%A9%B4-%EC%93%B8%EB%8D%B0%EC%9E%88%EB%8A%94-ESLint-Prettier-%EC%84%A4%EC%A0%95-%EB%B0%A9%EB%B2%95

https://techwell.wooritech.com/docs/tools/prettier/prettier-eslint-airbnb/

 

https://kyuhyuk.kr/article/javascript/2021/05/13/ESLint-Prettier-Airbnb-Javascript-Style-Setting

https://velog.io/@jiseong/React-ESLint-Prettier-%EC%84%A4%EC%A0%95-airbnb-style-%EC%A0%81%EC%9A%A9