[VSCode] 자바스크립트 확장 플러그인 ESLint & Prettier 사용법

플러그인명	설명
ESLint	문법 상 오류 방지 및 교정
Prettier	코드 스타일 통일 및 교정

 

1. VSCode에서 확장 플러그인 설치

VSCode extensions에서 'ESLint', 'Prettier' 검색 후 설치 (Node.js 필요)

 

 

2. 터미널에서 필수 플러그인 설치

/* 1. 필수 플러그인 설치 */
yarn add -D eslint prettier

/* 2. config 파일 생성 (프로젝트 root 위치에 생성됨) */
npx eslint --init // 개발환경에 맞게 대답 선택 (아래 질문들은 보기와 같이 선택 권장)
  How would you like to use ESLint?
  > To check syntax and find problems

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

  Would you like to install them now?
  > Yes

  Which package manager do you want to use?
  > Yarn

/* 3. 기타 플러그인 설치 */
yarn add -D eslint-config-prettier // eslint의 코드 스타일 규칙을 비활성화 (prettier와 conflict 방지)
yarn add -D eslint-plugin-prettier // prettier를 eslint 플러그인으로 추가 (포맷오류를 eslint 오류로 출력)

yarn을 통한 설치를 권장하나, npm으로 설치를 원하는 경우 위 코드에서 ‘yarn add’ 를 ‘npm install’ 로 변경해서 실행

 

 

3. 프로젝트 루트 경로에 있는 '.eslintrc.js' 파일 일부 수정

/* .eslintrc.js */

module.exports = {
  env: {
    browser: true,
    node: true, // Node.js 전역 변수 및 Node.js 범위 지정
    es2022: true, // ECMAScript 2022 전역 추가, ecmaVersion 파서 옵션을 13으로 설정
  },
  ignorePatterns: ['node_modules/'], // 해당 폴더는 형식 무시
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended', // eslint와 prettier 간 충돌 방지
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint', 'prettier'],
  rules: {
    'prettier/prettier': ['warn'], // prettier 형식에 맞지 않을 경우 경고로 표시
		@typescript-eslint/no-var-requires': 'off', // typescript: 변수 requires 사용 제한
  },
};

 

 

4. 프로젝트 루트 경로에 .prettierrc.js 파일 생성

/* .prettierrc.js */

module.exports = {
  "printWidth": 80, // 한 줄 최대 문자 수
  "tabWidth": 2, // 들여쓰기 너비
  "semi": true, // 문장 끝 세미콜론 사용 여부
  "useTabs": false, // 탭 사용 여부
  "singleQuote": true, // 작은 따옴표로 통일 여부
  "bracketSpacing": true, // 중괄호 양 끝에 공백 추가 여부
  "trailingComma": "all", // 꼬리 콤마 사용
  "arrowParens": "avoid", // 화살표 함수 단일 인자 시, 괄호 생략
  "proseWrap": "preserve", // 마크다운 포매팅 제외
  "endOfLine": "auto", // 개행문자 유지 (혼합일 경우, 첫 줄 개행문자로 통일)
  "vueIndentScriptAndStyle": true, // vue: 파일에서 태그 안에 있는 코드 개행
}

추후 해당 파일 내용 수정 시 VSCode를 재시작해야 기존 규칙과 충돌이 나지 않음

 

 

5. 저장 시 포맷에 맞게 자동 변환 기능 활성화 (VSCode 설정 파일 수정)

Command+Shift+P > Open Settings.json(JSON)

/* settings.json */

...
"files.autoSave": "onFocusChange",
"editor.formatOnSave": true, // 저장시 자동으로 포맷팅
"editor.defaultFormatter": "esbenp.prettier-vscode", // 기본 포맷터를 prettier로 설정
// "editor.codeActionsOnSave": { // eslint에 의한 자동 수정 활성화 (필요한 경우 추가)
//   "source.fixAll.eslint": true
// },

 

 

6. 안전한 적용을 위해 VSCode 완전히 종료 후 다시 시작