ESlint+Prettier+Vscode+airbnb 환경 설정

iinnuyh_s·2022년 11월 10일

저번에 프로젝트에 적용하다가 실패했다... 다시 설치하면서 과정 그대로 쓰려고 했는데 블로그 쓰는 거 까머금 ㅜ 정리해봐야쥥

1. vscode 마켓 플레이스에서 eslint, prettier 설치

둘다 검색해서 첫번째 뜨는거 설치함

2. eslint 설치

$ npm install eslint --save-dev
$ npx eslint --init
$ npx install-peerdeps --dev eslint-config-airbnb

3. 루트 폴더에서 .eslintrc.js 생성 확인 후 코드 수정

module.exports = {
  env: {
    browser: true,
    commonjs: true,
    es2021: true,
    jest: true,
  },
  extends: ['eslint:recommended', 'airbnb'],
  overrides: [],
  parserOptions: {
    ecmaVersion: 'latest',
  },
  rules: {
    'linebreak-style': 0,
    'import/prefer-default-export': 0,
    'prettier/prettier': 0,
    'import/extensions': 0,
    'no-use-before-define': 0,
    'import/no-unresolved': 0,
    'import/no-extraneous-dependencies': 0,
    'no-shadow': 0,
    'class-methods-use-this': 0,
  },
};

4. Prettier 설치

$ npm install --save-dev --save-exact prettier

5. .prettierrc.js 직접 생성 & 코드 수정

echo >.prettierrc.js
루트에 생성됨.

module.exports = {
  singleQuote: true,
  semi: true,
  useTabs: false,
  tabWidth: 2,
  trailingComma: 'all',
  printWidth: 80,
  arrowParens: 'always',
  orderedImports: true,
  bracketSpacing: true,
  jsxBracketSameLine: false,
};

6. eslint 저장 시 자동 적용 설정

ctrl+, 로 설정 이동
(여기서 Auto fix on save? 있을 거라했는데 없었음 ㅠ;;)
걍 setting.json 들어가서 수정함

"editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "eslint.workingDirectories": [
    {
      "mode": "auto"
    }
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll": true // eslint
  },
  "editor.formatOnPaste": false,
  "editor.formatOnType": true,
  "eslint.codeAction.showDocumentation": {
    "enable": true
  }

걍 json에서 editor 관련 코드 긁어옴 ㅎ
아직도 뭐..잘된건지 모르겠는데 어쨌든 저장시에 알아서 뭔갈 고쳐준다.이게 airbnb 스타일 맞춰서 고쳐주는 건지는 모르겠는데 맞겠지 뭐 ㅠ 또 한시간 걸림 이거 설정하는데 ㅠㅋㅋㅋㅋ
참..재밌다^^... 과제 환경 설정에만 몇시간이야~..... 블로그 글들 말이 다 달라서 진짜 헤맷ㅅ다 ㅠ
아 그리고 설치하는데 jest에 빨간줄 쳐지고 난리났음 그래서 npm jest 했는데 이번엔 npm오류 남 그거 관련👇