[JavaScript] ESLint와 Prettier 설치 및 설정

 

자바는 정적 컴파일을 하지 않은 인터프리터 언어이다. 

따라서 에러 찾기가 힘들고, 에러를 해결하지 않은 채 배포할 가능성이 있다고 한다. 

 

자바 스크립트를 사용하는 첫 협업 프로젝트라 

이를 해결하기 위해 eslint와 prettier를 사용해보았다. 

 

EsLint는 자바스크립트 문법에서 에러를 표시해준다 (flutter의 linter와 같은 개념인 듯 하다.)

Prettier는 코드스타일을 자동으로 formatting 해준다. 

 

** CRA(create-react-app)에는 이미 세팅이 되어있다고 한다 **  

 

---

1. eslint 설치 및 설정 

 

1) ESLint 확장기능 설치 

 

vs code의 개발단에서도 사용할 수 있도록 VS code에 ESLint 라이브러리를 통합한다. 

 

2)  ESLint 설치 

 

- 프로젝트에 설치 (앱을 구동시킬 때 사용)

npm install eslint --save 

 

./node_modules 디렉토리 내  패키지 설치

/package.json 의 dependencies 에 추가

 

 

- dev 버전에만 설치 (개발시에만 사용)

npm install eslint --save -dev  

 

./node_modules 디렉토리 내  패키지 설치

/package.json 의 devDependencies 에 추가

 

 

3) ESLint 초기설정 

 

command pallete를 연 후에 create-Eslint-configuration을 입력하여

ESLint를 초기설정하면 아래와 같이 eslintrc.json 파일이 생성된다. 

자신의 필요에 따라 수정하면 된다. 

 

ESLint 설정 구성 참고자료 

(블로그)
velog.io/@kyusung/eslint-config-2
(공식문서)
eslint.org/docs/user-guide/configuring/#specifying-environments

 

[eslintrc.json]

{
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "parser": "babel-eslint",
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "airbnb",
    "plugin:prettier/recommended"
  ],
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "react-hooks",
    "prettier"
  ],
  "rules": {
    "react/react-in-jsx-scope": 0,
    "react/prefer-stateless-function": 0,
    "react/jsx-filename-extension": 0,
    "react/jsx-one-expression-per-line": 0,
    "no-nested-ternary": 0
  },
  "globals": {
    "React": "writable"
  }
}

 

2. Prettier 설치 및 설정 

 

prettier와 eslint는 모두 코드 포멧을 수정하지만

연동되는 것이 아니라 순차적으로 진행되기 때문에 상충되는 부분이 있다. 

이런 부분에 대해 Lint 오류가 발생할 수 있으니 주의해야한다. 

 

 

1) Prettier 설치 

 

eslint-plugin-prettier: Prettier를 ESLint의 플러그인으로 추가하는 명령어이다. 이 것만 사용한다면 eslint formatting rules와 prettier rules가 충돌할 수 있다. 

eslint-config-prettier : Prettier 규칙을 ESLint에 통합하여 prettier와 상충되는 eslint 설정을 비활성화 한다. 

ESLint 는 자바스크립트 문법을 담당하고, 코드 스타일 정리는 Prettier 가 담당하는 방식이다. 

 

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

 

2) Prettier 설정 

 

어떤 prettier의 rule을 사용할 지 설정해야한다.

이를 위한 여러 방법이 있는데, 

 

- settings.json(VS code 기본 설정)에서 prettier를 설정한다. 

- .prettierrc 파일에서 설정(prettier의 포맷을 적용하기 위한 설정파일)

- Prettier 패키지 설치 후 CLI를 사용한다. 

 

[settings.json]

{
  //기본 포멧팅 설정 
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
  //자동포멧팅 
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  },
  "editor.formatOnSave": false,
}

위의 코드에서는 자동 저장 기능(formatOnSave) 을 비활성화 하고 
저장 시에만 codeActionsOnSave으로 자동 포멧팅 수정되도록 한다. 

https://code.visualstudio.com/docs/editor/codebasics

기본 포멧팅 이외에 설정가능한 요소들 

prettier.arrowParens
prettier.bracketSpacing
prettier.endOfLine
prettier.htmlWhitespaceSensitivity
prettier.insertPragma
prettier.jsxBracketSameLine
prettier.jsxSingleQuote
prettier.printWidth
prettier.proseWrap
prettier.quoteProps
prettier.requirePragma
prettier.semi
prettier.singleQuote
prettier.tabWidth
prettier.trailingComma
prettier.useTabs
prettier.vueIndentScriptAndStyle

 

settings.json 여는 법 
Code - Preference - Settings 후 상단 오른 쪽에 {} 혹은 문서 표시를 클릭한다.  

 

** 하지만 아직 언어가 익숙하지 않다보니 

어떻게 설정하는지만 익혀놓고 추후 필요한 포멧팅을 설정해야겠다는 생각이 들었다. 

 

---

[출처]

noooop.tistory.com/entry/VS-Code%EC%97%90%EC%84%9C-ESLint-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-1-%EA%B8%B0%EB%B3%B8-%EC%84%A4%EC%A0%95

velog.io/@mayinjanuary/Next.js-%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0-ESLint-Prettier-%EC%84%A4%EC%A0%95

velog.io/@kyusung/eslint-prettier

pravusid.kr/javascript/2019/03/10/eslint-prettier.html