eslint + prettier + air bnb & vscode, 그러나 적용 안되는 문제

혼자 프론트 작업을 하다 보니 코딩을 너무 난잡하게 하고 있는게 아닌가 하는 생각이 들어 많이들 사용하는 eslint + prettier + air bnb coding style 을 적용해서 사용해 보기로 했다. 웹에 설치 가이드는 많은데 뭐 그리 복잡스럽고 가이드마다 다 다른지.

1. vscode 마켓 플레이스에서 eslint, prettier 설치
2. 서버에 eslint & air bnb coding style 설치

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

3. 루트 폴더에서 .eslintrc.js 생성 확인

//.eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'airbnb-base',
  ],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
  },
  rules: {
  },
};

4. prettier 설치

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

5. 루트 폴더에 .prettierrc.js 생성 확인

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

6. 참조

https://velog.io/@_jouz_ryul/ESLint-Prettier-Airbnb-Style-Guide로-설정하기
https://overcome-the-limits.tistory.com/entry/협업-ESLint-Prettier-Airbnb-Style-Guide로-코드-컨벤션-설정하기
https://jeonghwan-kim.github.io/series/2019/12/30/frontend-dev-env-lint.html
https://hayjo.tistory.com/111
https://velog.io/@cookncoding/ESLint-Prettier-Airbnb-Style-Guide로-프로젝트-세팅하기
https://ooyuolog.tistory.com/51

설치 방법들 중 몇가지 기준을 정해서 따라해 봤는데 vscode를 열어 해 보니 안된다. 서버와 vscode 양쪽에 설치는 잘됐는데 안된다. 이유가 뭘까? 보통 이런 가이드를 따라하다 보면 내 pc의 상황과 일치하지 않아 예외 케이스가 발생하곤 한다. 그리고 원인을 접근하다 보면 아주 사소한 문제로 안되는 케이스가 대부분이다.

그 동안 로컬에서 프론트 개발을 할 때 node_modules 나 package.json 같은 파일들은필요가 없어 vscode sftp 설정에서 ignore 처리를 하고 있었다. node_modules 를 매번 받는것도 부담이라. 해당 설정 때문에 node_modules 를 로컬에 가져오지 않았고 eslint, prettier 등도 서버에만 있다보니 설정 같은 것들을 못 가져와서 vscode에서 제대로 인식을 못한 것 같다. 다 받아오니 정상적으로 동작한다. 항상 사소한 문제가 시간과 에너지를 잡아 먹는다. 얼마나 사소한지 알고나면 +허탈.

sftp.json에 정의되어 있는 문제의 ignore 설정