[JavaScript] ESLint && Prettier

NPM 축약법 간단 설명

npm init -y 명령어에 -y는 --yes의 축약법으로 npm 프로젝트를 초기 세팅할 때 
아무 질문 없이 기본값으로 프로젝트가 세팅된다.
비슷한 명령어로 --force(-f)가 있다.

npm i -D eslint 명령어의 -D는 --save-dev의 축약법이며 비슷한 옵션으로 --save가 있다.
차이는 아래를 참고한다.

--save-dev는 설치한 패키지 정보를 
./package.json 파일의 devDependencies 항목에 저장하며
npm install을 할 때 해당 패키지가 같이 설치된다. 
설치할 때 --production 옵션을 붙이면 해당 패키지를 제외하고 npm이 설치된다.

--save는 설치한 패키지 정보가 
./package.json의 dependencies에 추가되며
npm install을 할 때 해당 패키지는 항상 설치가 된다.

아무 옵션을 넣지 않으면 순수하게 ./node_modules에 패키지만 설치한다.

 

eslint

vscode extensions ESLint 설치 +

npm install -D eslint // 내 프로젝트에만 설치 ( -G 포함시 전역 설치 )

eslint 설정

eslint --init
// 또는
./node_modules/.bin/eslint --init

How would you like to use ESLint?

To check syntax only
// 문법 오류만!
To check syntax and find problems
// 문법과 에러까지!
To check syntax, find problems, and enforce code style
// 문법과 에러에 코드 스타일까지!

What type of modules does your project use?

JavaScript modules (import/export) // es6 import / export
CommonJS (require/exports) // 기본 require / exports
None of these // 모듈화를 안 써

Which framework does your project use?

React
Vue.js
None of these // 그런거 안 씀

Does your project use TypeScript?
// Y or N

Where does your code run?

browser
Node

How would you like to define a style for your project?

Use a popular style guide
// airbnb || google || standard
Answer questions about your style
// 직접 만든다
Inspect your JavaScript file(s)
// 내 자바스크립트 파일 참조

What format do you want your config file to be in?

JavaScript // 주석 가능
YAML
JSON

벌써 끝! 잘 된다!!!

 

Inspect your JavaScript file(s) 를 선택 후 입맛대로 설정법

airbnb ( 원하는 취향 선택 ) 스타일로 설정

npx install-peerdeps --dev eslint-config-airbnb-base
// npm 5 version 이상이면 npx 명령어로 모든 dependency를 한번에 설치

.eslintrc.json 파일 수정

// .eslintrc.json
{
    "env": {
        "browser": true,
        "node": true,  // 에러 방지 위해 browswer, node 둘다 true
        "es2020": true  //2020-12-03 기준 2021은 eslint가 안되는 오류가 있다
    },
    "extends": ["eslint:recommended", "airbnb-base"], //airbnb-base 포맷 사용
    "parserOptions": {
        "ecmaVersion": 11, //es2020
        "sourceType": "module"
    },
    "rules": {
    	"no-unused-vars": "warn" // 선언 후 미사용 변수 빨간줄 해제
    }
}

적용 확인

eslint app.js --fix
// 또는
./node_modules/.bin/eslint app.js --fix
// app.js 대신 본인의 예제 파일 아무거나!

잘 된다! 신난다!

 

Prettier ( 생략 가능 )

설치

npm install --save-dev --save-exact prettier
// 마찬가지로, 전역을 원하면 -g 옵션 추가

 

린트와 프리티어 합체

npm install eslint-plugin-prettier@latest --save-dev -g

$ npm install --save-dev eslint-config-prettier 
// prettier와 겹치는 eslint 룰 삭제

$ npm install --save-dev eslint-plugin-prettier
// eslint 기본 포맷 대신 프리티어 룰과 동일한 포매팅을 이용함

 

eslintrc.json 수정

( 뒤에 오는 설정이 앞을 덮어쓰기 때문에 꼭 prettier 를 뒤에 추가!!! )

// estlintrc.json
"extends": ["eslint:recommended","airbnb-base", "plugin:prettier/recommended"],

 

적용 확인

eslint app.js --fix // 린트에 프리티어 확장을 설치한 경우
// 또는
./node_modules/.bin/eslint app.js --fix

prettier --check . // 프리티어로 체크했을때 문제가 있는 파일 목록 출력
// 또는
./node_modules/.bin/prettier app.js --check

prettier --write app.js // app.js파일을 포맷팅해서 덮어쓴다
//또는
./node_modules/.bin/prettier app.js --write

 

내 입맛대로 prettier 설정 변경하기

루트 디렉토리에 .prettierrc.js 파일 생성 ( .json 도 가능. 주석을 달고 싶다면 .js 파일로 )

// .prettierrc.js
module.exports = {
    singleQuote: true,
    // 문자열은 홑따옴표로 formatting
    semi: true,
    //코드 마지막에 세미콜른이 있게 formatting
    useTabs: false, // true 는 탭 사용
    //탭의 사용을 금하고 스페이스바 사용으로 대체하게 formatting
    tabWidth: 2,
    // 들여쓰기 너비는 2칸
    trailingComma: 'all',
    // 자세한 설명은 구글링이 짱이긴하나 객체나 배열 키:값 뒤에 항상 콤마를 붙히도록 	  	//formatting
    printWidth: 80,
    // 코드 한줄이 maximum 80칸
    arrowParens: 'avoid',
    // 화살표 함수가 하나의 매개변수를 받을 때 괄호를 생략하게 formatting
    endOfLine: "auto",
    // windows에 뜨는 'Delete cr' 에러 해결
  };

 

ESLint 와 Prettier 가 충돌하지 않게 설정들

 

ESlint extension 설정

vscode 설정

1. command + shift + p // 윈도우는 ctrl + shift + p
2. format document with ~
3. config default formatter
4. prettier 선택

 

저장 시 코드 자동 포메팅

1. command + shift + p // 윈도우는 ctrl + shift + p
2. eslint 검색
3. 아래 사진처럼 code actions on save 설정

1. command + shift + p // 윈도우는 ctrl + shift + p
2. Format On Save 검색
3. 아래 사진처럼 Format On Save 체크